There's site I'm working at and design for tablet/mobile devices require me to move elements (from left sidebar to right, change order, etc.). These elements include simple text and images (pretty small, logos).
My question is, what would be the best way to go about this? So far I have only two ways.
1) Duplicate HTML content and then show/hide with CSS media queries. My concern here is that it's not SEO friendly, and content / images still gets rendered, even if hidden. Could that leave me with a performance problem?
2) Move elements using JS. My concern here is that people with JS disabled will still see the content in old places, and maybe this JS solution could impact performance even more?
Would really appreciate some input on best practices in a situation like this.
Here's what I'm trying to achieve:
The questions are contradicting a bit :)
First of all, it's 2016 in the WEB, if you are speaking about having responsive layout, support of mobiles, tablets, desktops - they will have JavaScript support, so you shouldn't worry. - it is answer on your question number #2. The percentage of people not having JS is extremely low, it's below <1%.
CSS media queries are enough to make good responsiveness. Sometimes you need to add helper methods with JS to manipulate DOM and to make it even more advanced.
You may check how they do responsiveness with classes in Twitter Bootstrap.
Sometimes content will be duplicated in HTML, but as soon as it's not visible simultaneously on the screen because of visibility rules from CSS media queries - it will not do any harm on SEO.
There's the way to over-complicate things a bit, RESS: Responsive Web Design + Server-Side Components, and to serve different HTML layouts depending on the detected User Agent.
You mentioned that you were reluctant to use display: hidden because something about them being rendered. If I'm understanding correctly, then you can use display: none on the right side for example. Then in your media queries, you can set content on the left to display: none and content on the right to display: initial. That should work just fine, if I understood you correctly. Then no space will be allocated for the hidden elements.
For example:
.leftDiv {
display: initial;
}
.rightDiv {
display: none;
}
#media screen only and (max-width: 1000px) {
.leftDiv {
display: none;
}
.rightDiv {
display: initial;
}
Related
Consider the following site: 200minus.com
This site looks good on both a mobile phone and a desktop. It's as if when you view the site on a mobile phone, everything is appropriately shrunken. Where in the source code (HTML/CSS/JavaScript) is this being dealt with (or is this typically dealt with)?
In the CSS as media queries.
You can adapt the layout of CSS styling, depending on what size the browser window it's being viewed with is.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries, and
the official W3C documentation: http://www.w3.org/TR/css3-mediaqueries/
Theres 2 typical approaches to page design in mobile/desktop situations.
Adjust the page to suit the size of the display at load.
or...
Make the page respond to it's size dynamically( This is referred to as responsive design).
It is considered good form to use responsive design, as it has obvious advantages for screen resizes. Such as if a tablet/mobile was rotated or if a desktop user resized their window.
A good design should be implemented predominately in css as it is the fastest part of the page to update/ evaluate, and is simpler to implement than modifying the page style than JS. Proportional layout and forward planning help considerably when it comes to producing a layout that works well on many screen sizes and many guides will instruct you to design for mobiles first, then adjust for desktop sites. Personally I try to think of them as one part that is never a fixed size.
The bread and butter of responsive design is media queries; they allow you to only active certain css rules under one or more conditions. For example:
#media (min-width:650px){
.about_tablet{height:175px;}
}
#media (min-width:650px) and (max-width: 675px){ /* both conditions must be met */
.about_tablet{height:175px;}
}
#media (min-width:650px) , (max-width: 675px){ /* one or both conditions must be met */
.about_tablet{height:175px;}
}
Another very useful trick is viewports
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width" />
They can be a little strange, behaviour isn't uniform across older mobile devices and they don't work at all on desktops, but they are quite useful. You can force a page width and scale the page on a pixel by pixel basis (800 px image on a 400px wide screen for instance). Prevent the user from being able to zoom in, or limit the zoom. Most useful is the width=device-width" which prevents the horrible zoomed out effect you get on non optimised webpages when you view them on a phone.
If theres a more specific concept you want to talk about I'm happy to help, a vast majority of my work is done for mobiles.
This is simple Bootstrap. Just try it out! I think it's really good. Also mentioned in the answer above this is everything done with CSS. For example this:
#media (min-width:768px){.container{width:750px}
}
#media (min-width:992px){.container{width:970px}
}
#media (min-width:1200px){.container{width:1170px}
}
When the width is smaller than 992 px the container will be set to 750px.
Greetings
In CSS using media queries, as explained here:
http://css-tricks.com/css-media-queries/
For example:
#media screen and max-width:600px { /* CSS here */ }
Is a common brakepoint that I use.
For some specific handling I've found I have to use javascript or jQuery to really get the effect I want, but generally CSS media queries and some intelligent and creative use of showing/hiding objects with the display property will get you 99% of the way there.
I am back here again with another question for responsive grid systems. I have this website http://www.waldenservices.com that uses The Responsive Grid system with various columns, I have CSS codes for 1024, 768 and 480. I am definitely inserting the css scripts on the page but I am not sure of the jQuery/java code I need to make it work.
My questions are: What script do i need to call these css styles?
And, Does these help me to detect the screen size of the user? (I think web browser size is one is my biggest concern, as different users cannot see the whole page but have to scroll from side to side to even see the whole menu).
Any help or input is very appreciated, I really don't want to have to redesign this whole page.
Thank you guys!
You don't even need to call script (I don't know what you meant by it), you just need responsive stylsheet.
All you need:
#media screen and (min-width: 1024px) {
.col-5 {
width: 50%;
}
}
#media is CSS # rule, used for media queries.
screen means these styles are just for screens, not for printers, or for presentations.
(min-width: value) and (max-width: value) are used to specify minumum or maximum screen size on which these styles will apply. You can combine (min-width) and (max-width).
Whenever, if you have problems with coding responsive grid systems, you can start using a framework (e.g. Bootstrap).
I have a website where in the desktop version a sidebar is shown containing 10 to 20 small images. Until now, on mobile devices this sidebar was simply hidden with a display: none, which is the least performant solution since all the images will be loaded anyway.
I'm now wondering what the best way is to disable the sidebar completely on mobile devices (without using a separate AJAX request).
The best solution I could think of is the following:
Write the HTML code of the sidebar into a JavaScript variable
test the device width by checking a media query with JavaScript (e.g. using Modernizr.mq or so)
if this test yields a non-mobile device, write the content of the variable into the DOM, for example by using innerHTML, jQuery.append, jQuery.prepend or similar
I know that RWD performance can sometimes be a very complicated topic and that the most performant solution is often not obvious. So can anyone think of a better solution than the one presented above?
If you don't want the images to load on mobile, instead of placing the images as <img> tags, you could set divs to the desired width and height and bring the images in as background images. In your css, hide the sidebar by default. Then, at whatever width you deem to be beyond mobile, use media queries to display the sidebar and load the background images in the divs.
#sidebar {
display: none;
}
#sidebar div#sidebar-img-1 {
width: 100px;
height: 100px;
}
/* ... */
#media only screen and (min-width: 480px) {
/* display sidebar */
#sidebar {
display: block;
}
/* set background image for sidebar items */
#sidebar div#sidebar-img-1 {
background-image: url("sidebar1.jpg");
}
/* ... */
}
The drawback is that by placing content in the stylesheets, you're trading performance for semantics.
I was just doing some research on how to do this and ran into this by the filament group:
https://github.com/filamentgroup/Ajax-Include-Pattern/
Seems easy to set up. It works off of what looks like media queries set in data attributes.
So a sidebar you don't want to appear on mobile would look something like this:
<aside href="..." data-append="articles/latest/fragment" data-media="(min-width: 40em)">Possible Mobile Content</aside>
So your sidebar would only come in on a screen that was at least 40ems (~640px) wide. Of course you also need the javascript file and to initiate it, but those look fairly simple as well.
I was looking around for a way to arrange content differently depending on screen size when I noticed this site. Quite a nice looking site too. As I change my browser's size, the column configuration changes? When I reduce to the very minimum size or visit it on a phone, the large image on top disappears completely, leaving only the small icons. I've turned off javascript, and this still happens. Also, it works in my ie8, so I'm guessing it's not an HTML5 thang. How is it being done?
Thanks!
This effect is not being done by Javascript, instead it is being done by CSS #media queries. Chris Coyier of CSS Tricks has a great intro to #media queries
Simply, it allows you to specify the scope of a stylesheet based on some boolean expression (such as checking if the window width is a specific width used in that example you saw) and then apply specific styles thus making it responsive design
I want my main logo to change when mousing over.
I understand there are several ways to achieve this, and was wondering what's the best way for stability, browser compatibility, efficiency - and ease to setup.
Some ways I've found are:
Javascript (jQuery) replacement of the "src" attribute.
CSS using backgrounds and "hover"
Any more?
What's best?
Bottom line
For content-ful images, you want to have the src in the HTML markup. You want to use the Javascript solution and put the rollover image in an attribute.
For content-less images UI elements, especially ones that are common across the site or duplicated, a straight CSS solution would be the best (so you don't have to re-declare the image locations at each invocation). Among the CSS solutions, sprites are the best since they don't require preloading overhead.
The Javascript solution
HTML:
<img src="/img/one.jpg" data-rollover="/img/two.jpg" />
In jQuery:
$(function(){
$('img.rollover').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
}); /* a preloader could easily go here too */
});
Sample implementation: http://jsfiddle.net/dtPRM/1/
Benefits: It's easy; it makes sense; it works with minimal additional markup once you have your library set up.
Downsides: Requires Javascript and overhead of loading the jQuery library.
Probably the best option. If your user is using a browser where rollovers are relevant (probably the case), they have the Javascript capabilities to run this option. The folks who have intentionally turned Javascript off for some reason will clue in if you leave a little <noscript> note saying that they may not get the full featureset.
The CSS solution: Best
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 300px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-position: top right;}
Sample implementation: http://jsfiddle.net/dtPRM/5/
Personally, I think that for content-ful images, this is an even worse option than the CSS + two background images solution. You're separating the HTML markup from the semantic value of the display.
If you're using content-less images like UI elements, though, this is the best solution in my opinion.
The CSS solution: Also okay
Another CSS option is available that doesn't involve background images (preferred among the CSS solutions if you want to have the image tags in the HTML, like for semantically meaningful images).
<div class="rollover">
<img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
<img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>
CSS (I use the :not pseudo-selector here, but it's pretty easy to avoid using it; I also think I got the classnames semantically backwards):
div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}
Sample implementation: http://jsfiddle.net/dtPRM/2/
Benefits: Semantically sensible compared to the previous CSS solution of putting all the information the stylesheet.
Downsides: Extraneous markup needed.
Comment: This one may automatically pre-load depending on whether the browser calls for it.
Bottom line: A decent fallback if option (1) is unavailable because you absolutely need IE2 compatibility or non-JS support.
The CSS unsolution: Stay away
I mention this only because you mentioned it in the question. I wouldn't use it.
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 600px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-image: url('http://dummyimage.com/600x400/fff/000');}
Sample implementation: http://jsfiddle.net/dtPRM/4/
Benefits: Widely compatible; all you really need to support is background images and hover.
Downsides: Semantically weird to put images in CSS and to centralize it there. Makes future modifications more difficult. That being said, if you have a scenario that warrants a rollover image, there's a good chance it may be a non-content image (e.g., a UI element), in which case CSS would be semantically (perhaps) even more suitable than a regular image. See the note on sprites below.
Other downsides: You'd have to be careful to declare image height and width (a good practice anyway, but it may get cumbersome when you just want to get things done). Users viewing on mobile browsers that may treat CSS background images unusually.
Even more downsides: If you want to layer a preloader on top of it, you're going to be using Javascript and somehow selecting the rollover-able elements, and at that rate, you may as well use Javascript for everything.
Bottom line: Don't use this for content-ful images. If you must stay away from Javascript, use sprites for UI elements and the alternate solution for semantically meaningful images.
#btn{
width:100px; height:100px;/*the dimensions of your image*/
background:url(bird.png) left top no-repeat;
}
#btn:hover{
background-position:left bottom;/* pixel references can be used if prefered */
}
Using an image like this:
Note: Avoid JS image replacements as you will incur a short image load time if images are not cached before.
Hope this helps bro!
W.
CSS using backgrounds and "hover"
Use CSS sprites, in other words combine both images into one and then use css :hover to shift the image.
One advantage of using CSS is that it'll work even if JavaScript is turned off.
One advantage of using a single image is it'll avoid the extra HTTP request.
See: http://css-tricks.com/css-sprites/
Tools to help generate image and CSS:
http://csssprites.com/
http://css-sprit.es/
You should use a :hover CSS rule.
CSS by far. Though you may want to precache your image with javascript.
Image rollovers using 'sprites' List a part - sprites CSS
Use CSS sprites and the :hover psuedo-class in CSS. Here's why:
Switching image source either through JS or through the CSS will cause a "blink" on the first mouse-over while the new image is downloaded by the browser. If you use the sprite, it's just one image that changes position, so no blink.
A single image reduces HTTP requests, making the site load faster in general.
It works if the user has JavaScript disabled.
It's supported by all browser types (desktop, anyways, phone browsers without a :hover state don't count for this anyways).
More information: http://css-tricks.com/css-sprites/
$('#div1').hover(function(){
this.style.color='white';
},function(){
this.style.color='black;
});
or
$('#div1').onmouseover()...
$('#div1').onmouseout()...