Responsive Design breakpoint traps

Allessandro has made a good write up about responsive web design and analyzed some examples - the only problem I have is that he falls into the device/breakpoint trap as many do - me included. Most responsive website just look great at certain screen sizes - a normal Laptop Screen, the iPad, the iPhone ... everything in between looks often akward.

If the design has fixed widths then we generate white space (therefore the many minimal designs) or if we have fluid designs, we get strange overlays when sidebars don't move to the right place or we have too long text lines, that make the content unreadable.

And there will be more viewers with odd screen sizes than we have now in the future - so most of the responsive websites of today will be redone in a couple of years when they become unbearable.

Another downfall of responsive is that it's not so easy to optimize the user experience because you are bound to the same structure. If you have to load a new page on the desktop, you have to load it on the mobile view as well. I'm still on the boat of having separated mobile sites if you have major functionality changes ... if not than responsive is good enough. #responsive #design #webdesign

Embedded Link

Responsive Design: One Design for Each Job: Not Enough! For any web designer, thinking responsive means accepting a new challenge: to be creative not only to produce something that works well on desktop PCs, but also on tablets and smartphones; to create n...

Google+: View post on Google+

Free yourself from the 960 Pixel grid with Grid Calculator Basic Edition

Every serious web designers nows about the 960 Pixel Grid - it was the solution for designers who wanted to improve their design with a grid layout optimized for a standard screen resolution of 1024x768. It is still very popular, but with the advent of responsive/adaptive design and the need for designers to make designs on various screen sizes the 960 grid helps only with one size and the standard 12 pt web ssafe fonts. To calculate grids is a pain and is time consuming - making more than one for a project was not possible until now. Designers Bookshop has updated their Grid Calculator Basic Edition - which has now a focus on setting up Document Grids for Photoshop and Illustrator.

This means in short that you can make an optimized grid for your web project based on screen sizes, resolution and the font you are using in minutes - and even better, you can maintain gutter and leadings etc. through the whole project for different devices.

I'm a great fan of the Grid Calculator Tools (also have a look at the Pro Version for Indesign) and for only 29.99 it's a bargain and well worth a try.

#GridCalculator #grids #layout #webdesign #responsive

Embedded Link

Designers Bookshop – Grid Calculator Basic Edition The ultimate resource in grid systems.

Google+: View post on Google+