Table of Contents
We are in the last part of this Guide. In part 1 we talked about RWD principles, images and how to make them flexible and in part 2 about fluid layouts and media queries. Today we will take a look on some JavaScript techniques we can use and talk about couple important ideas to think consider.
JavaScript
If you have separate style sheets for different resolution or for older browsers with limited support, you may want to use JavaScript to cycle through them dynamically as the browser or screen width changes. JavaScript can be also used as a fallback for browsers that don’t support the newest CSS3 technologies like media queries. In this case you can only hope that JS is enabled in user’s browsers.
Since not everyone has necessary skills to write his own scripts from scratch, you can as well use some already existing libraries. One example is css3-mediaqueries.js. Support for this particular library is quite impressive – IE 5+, Firefox 1+ and Safari 2. For Firefox 3.5+, Opera 7+, Safari 3+ and Chrome you don’t have to add anything, from these versions up they offer native support of media queries.
For those of you who like jQuery, here is a short snippet of code to detect browser width and changes the style sheets accordingly. Don’t forget to include a jQuery library before using the code below!
$(document).ready(function() {
$(window).bind('resize', resizeWindow);
function resizeWindow(e) {
// creating new variable for storing the window width
var newWidth = $(window).width();
// testing value (width) of our variable
if (newWidth < 600) {
// if the width is smaller than 600px, JS will make browser switch to style sheet created for mobile devices
$('link[rel=stylesheet]').attr({href: 'mobile.css'});
} else {
// otherwise, browser will switch to regular style sheet
$('link[rel=stylesheet]').attr({href: 'style.css'});
}
}
});
As always, feel free to use the snippet anywhere you wanted.
When it comes to JavaScript and enhancing the abilities of our browsers, our fantasy and knowledge are the only limits. Just keep in mind that not even JS is a silver bullet. Some of users may block JavaScript as default. For these situation you will still need to come up with a different non-JS solution, but that is what design is all about – solving problems.
Don’t forget the touch
Now, when we have examine all the options and possibilities we have in responsive web design, it’s time to talk about some important ideas which are binded to RWD. First one is about touch.
Many web designers forget how we interact with mobile devices. We don’t use mouses like on desktops. However, many websites are still built and optimized for cursors. Want example? Think about navigation. Almost all of them use some kind of hover effect. Without cursor, hover state is pretty useless. How can you hover over something with your finger on touch device? Right, you can’t. This is another problem for you to solve. You could easily create brand new navigation just for these devices, but if you break the consistency you will only confuse the user. The user experience must stay same or at least similar across different screen sizes. Important thing to consider is also which hand is used to interact with screen. Putting navigation on left can make it harder to use right-handed people and otherwise. I will touch this subject more in-depth in future article.
Keep it readable
Typography of your website is another thing to think about. What is legible on desktop might be disaster on mobile phone. You will probably find out by yourself, that typography is one of the toughest to deal with. This will confirm any type designer. When it comes to typography, there is big amount of factors you have to consider. All of the line heights, letter spacing, font sizes, weights and individual families of fonts can easily cause you headaches, but they are necessary for building good structured content no matter the device. Don’t worry, you can always hire someone.
Summary
As you can see, there is many ways how you can make your web page responsive. Some of them are more difficult and some are less. Which one you choose and what technology you use depends solely on you. Remember, to create sustainable RWD principles following website, combine fluid grid, fluid layout and flexible images. By this, you will ensure that every user will get the best experience while browsing your pages and the chances of returning will raise too.
I hope you enjoyed this guide.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
