Sponsors
26th Oct 2011 | Posted in CSS3, Web Design

“Mobile browsing is expected to outpace desktop-based access within three to five years.
(Ethan Marcotte, 2010)
The clients demand to have a mobile version of their website is increasing and it has to be working on all mobile devices.
And we will have more devices to build our sites in the next few years.
So, it will be almost impossible to code website for all platforms and have the same looking in all of them.
But in the last year, webdesigners have never been so creative and the possibility to have fluid layout and resizing images brought us again the idea to be outside the boxes. I mean not having fixed width on our pages and leave the viewer see our website with his own current resolution screen.
From an article of Ethan Marcotte, A List Apart, may 2010 and his book, designers started again to think about fluid web layouts which was kind of ‘old fashion’ before. From his thoughts, there have been discussion with the pro & contro about the Responsive way to code website.
Css3 and media queries give us a huge improvemnts to the fluid websites from the 90′s.
Media queries are, in short, conditional comments for the rest of us. Rather than targeting a specific version of a specific browser, we can surgically correct issues in our layout as it scales beyond its initial, ideal resolution.
So we can code our css media queries for different screen sizes and decide what to show when the screen is smaller such as a mobile and keep respecting our business or portfolio style.
You can find hundreds of tutorials online about media queries.
I personally got very interested watching Think Vitamin tutorials, (thanks to the video tutor Nick Pettit).
Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market. (smashingmagazine.com)
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.
We are designing work meant to be viewed along a gradient of different experiences.
My website has a fixed layout of 960px width. I liked the idea to have inside this field rounded shapes and thinking about my works as a process to develop my skills, I think will re-design my wordpress site and be more involved into Responsive web design.
Every day I take inspiration from lots of web designers via twitter and every day I’m amazed of how web design is developing. Thanks to:
alistapart.com
colly.com
hardboiledwebdesign.com
thinkvitamin.com
and also ref: mediaqueri.es
R