Responsive Web Design
Why Responsive Web Design?
Browsing the internet with a mobile device has increased with 192.5% since 2010.
The experience of browsing a website from your comfortable home office compared with browsing on your mobile phone is a whole lot different.
Mobile users surf while waiting in line, sitting on the bus, even while going out for a drink. The focus of a mobile visitor differs significantly from a desktop user. A mobile user doesn’t want to keep staring at a loading screen, and has absolutely no interest in a whole bunch of irrelevant content.
This is something you have to keep in mind when deciding on building a website. When you design a mobile website, “focus” content is king.
What is “Responsive” Web Design?
There are many different kind of devices, and they all come with their own screen resolution. Because it is almost an impossible task to make a new website for each kind of device (mobile, tablet, desktop…), some creative industry experts came up with the idea to create Responsive Web Design.
“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.” – Smashing Magazine
Smashing Magazine also put out some very handy guidelines for responsive web design.
How we made Petralian.com Responsive
The new Petralian website makes use of this technique. On a mobile browser, all the clutter is removed. The focus is 100% the content where the visitor is looking for.
First of all we removed the illustration, together with the links in the footer and the client-login. Thereafter, the page was given a fluid-width, so it automaticly adapts to the width of any screen.
Most mobile devices are touch-based. This means the hover-events for the menu won’t work on a mobile phone. But on a mobile website, you can’t just strip pages or content. We re-aligned the primary navigation, and put the submenu’s below the title on the specific page it belongs to.
We had to make sure this content was available, and even more important, readable on mobile devices.
If you browse the website with your smartphone, the page title is always on top of the page, followed by the submenu. These are the most important elements for the user to navigate. Again, the content fills the entire width of your screen.
Because most of the pages do have a lot of content, there is always a back-to-top link on the bottom of each page. This will bring you to the top of the page, with a smooth transition.
Depending on the width of the screen, you will see one or two columns for the portfolio items. If you click or tab on an item, a lightbox will show up. The image of this lightbox will fill as much space as possible on the screen.
You can always ‘pinch’ to zoom in on an image to see more details.
Responsive Design Sketchbook, Allows you to quickly sketch out your responsive site.
Golden Grid System, a folding grid for responsive design.
Deliver optimized, contextual image sizes in responsive layouts.
Responsive Web Design Live Examples
Simon Collison, colly.com
The Boston Globe, bostonglobe.com
Internet Images, interim.it
Spigot Design, spigotdesign.com