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.
Quelques ressources
Informations about Responsive Web Design
- www.abookapart.com/products/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)
Mark: on 04/13/2012
I did most of it by adjusting the layout using css and the sizes through media queries. I had to use a couple of shims to get everything working with the platforms I was supporting.
My biggest issue was with position:fixed on the Android. I never did manage to keep the footer in the bottom of the viewport on that platform.
I look forward to seeing your work on this.