There is always a new challenge for web designers and developers.
One of the latest is definitely responsive web design; the art of serving the same web page to multiple devices which look good on all of them.
It is a getting-popular approach. As always, there are questioned parts (like the increasing number of screen sizes and the difficulty in setting breakpoints) but these are minor and creating a responsive website is nothing difficult.
Thanks to talented people out there that there are great resources simplifying development of such websites. Many tricky stuff can be handled easily with the right tools.
For jQuery users, there are a good number of responsive design plugins and here is a carefully collected and well-categorized list to bookmark and hit back when you are about to design responsively : ).
Layout & Tools
The plugin has the mobile-first approach and enables us to dynamically arrange code blocks based on breakpoints + serve media progressively using HTML5 data attributes.
It also offers useful methods for easily testing screen properties that are important for creating responsive websites.
This plugin adds dynamic classes to the <body> depending on the operating system, browser and window size so that you can use a single CSS to change every aspect of your design.
When you resize the window, it automatically changes the window size related class. There are also two functions called, one on init, and the other on resize, so that you can make design manipulations accordingly.
Read the rest of this entry »
