Until recently, the size of the screens of computers getting bigger every year. For web designers, it « enough » to expand the interfaces over time. Then came the iPhone and other Smartphones, the iPad, tablets and other Notebook, which are gradually revolutionizing the Internet and its uses.
A major challenge for web designers now is to build an interface readable on small screens, remain enjoyable on large one, taking into account the specific constraints to each medium (navigation with mouse or finger), in order to provide the best user experience as possible.
One answer is the Responsive Web Design.
Ethan Marcotte was the first to wrote the principles in an article published in May 2010. Principles which can be summarized in two words: flexibility and responsiveness and are based on three basic elements:
- grids that can build interfaces using a variable number of columns in which are inscribed contents
- flexible images where size and layout are set in response to the screen size
- media queries that can detect which medium is used (or rather the size of the screen) and allow specific design (size, shape, position of elements, ...)
This technique is still young enough and uses the latest web standards: HTML5 and CSS3 (especially for media queries), and requires careful consideration from the designer's site on how to redistribute items based on resolution of the screen, or appearing/disappearing of some elements.
The Responsive Web Design offers therefore new possibilities for website design and provides tools and methods to give for each device the best design.
A Responsive Zenphoto theme
After creating two "static" themes for Zenphoto and regularly browsing on the Net with a SmartPhone, I see now the benefits of a photo gallery that fits the media.
After seeing the excellent theme zpSkeleton, I started a new adventure and I am working on a new Responsive Zenphoto theme. I hope to quickly achieve a beta that I will show you.
Informations about Responsive Web Design
- designspartan.com/info_generale/responsive-design-definition-fonctionnement-ressources-et-tutoriels/ (french)
Tools for building Responsive sites
Examples of Responsive sites (resize your browser to see the different responsive layout)