Responsive web design is well and truly here to stay and it’s great to see it being adopted (albeit slowly) on personal and commercial websites alike.
Having built my fair share of responsive websites I thought it about time I shared some of the techniques I use.
1. Use background images everywhere possible
Until there is a graceful solution to the problem of serving up chosen images based on the viewport size, background images will be your best friend. This is because setting display:none on an image only hides it and still loads. As far as design elements are concerned you should be using background images anyway, and if you aren’t and you want to delve into responsive design then you should start now.
By using a background image instead of an in-line image, you can then completely disable it or swap it out out for a optimised version suited to the breakpoint / viewport. Some examples:
@media only screen and (max-width : 960px) {
#banner {
background:url(large.jpg);
}
}
@media only screen and (max-width : 640px) {
#banner {
background:url(small.jpg);
}
}
@media only screen and (max-width : 320px) {
#banner {
background:none;
}
}2. Only execute the Javascript you need based on the viewport size
Yes it is possible and it’s actually quite easy.
if($(window).width() > 960) {
// my magic javascript here
};Simple, yes? In this instance we will only run the script if the viewport is larger than 960 pixels wide. This is helpful for example in an instance where you have a script responsible for controlling a banner slider show, but you don’t want to use it on the responsive view.
3. Fade in a ‘back to top’ link (jQuery required)
While it’s great to see more responsive websites, seldom do I see a quick way to get back to the top of any given page. Safari on the iPhone will quickly zip you back to the top of the page by double tapping the top of the browser, but no such feature exists on Android.
You can easily add a ‘back to top’ anchor on the page but I like to do it with a little more fineness, by making it fade in after the user has scrolled a certain amount and also keeping it in a fixed position so it’s always accessible wherever you are on the page.
The Javascript
// Show back to top after scrolling down 200px and hide when below 200px
$(window).scroll(function() {
if($(window).scrollTop() > 200) {
$(".btt").fadeIn("slow");
}
});
$(window).scroll(function() {
if($(window).scrollTop() < 200) {
$(".btt").fadeOut("slow");
}
});The HTML (this example assumes the topmost element of your page has the id header)
<a href="#header" class="btt">Back to top</a>The CSS (to initially hide the anchor)
.btt {
display:none;
}Don’t forget to style the .btt anchor how you want. You can see it in action on this site. If you’re reading this on a mobile device then by now you would have seen the anchor appear in the lower right.
4. Allow images and embedded video to automatically scale
Use this with caution. If the image is smaller than the width of the device displaying it, you will notice some pixelation. But generally speaking it is fine with larger images.
embed,
object,
img,
iframe {
max-width: 100%;
height: auto;
}You can change the width to suite your design, but the key point here is the hight must be set to auto in order to maintain the element proportions.
