In the last few years, a number of the mobile devices used for browsing the web significantly increased. It’s getting hard to keep up with endless new resolutions, from wide-screen desktop to tablet to small-screen mobile. To create a separate website for each of them can be very unrealistic and costly.

Responsive Web Design

Responsive web design recommends that instead of creating a separate version for each device you would make them a part of the same experience. So, you will create a website that will adapt to a user environment based on their platform, screen size and orientation. When the user looks from different devices the website is accommodating for that resolution and provides the user with continuity.

Main elements of a Responsive Website

Responsive design is achieved by using:

1. Flexible grid and Images
A flexible grid and Image allows the website to flow smoothly into whatever space is given.

2. CSS3 Media queries
CSS2 allows you to specify a separate stylesheet for specific media types like screen or print. After CSS3 added media queries you can have one stylesheet for wide-screen displays and a different stylesheet for mobile devices. It allows you change the layout without changing content.

A few things to keep in mind:

1. Touchscreen experience
Touchscreen devices cannot display CSS hover states. When user touches screen they click. When creating responsive design, consider cover states as an additional feature for cursor devices.

2. Screen resolutions and how they will affect layout.
Your design may need to change to provide a good experience on every device. Link sizes, copy and images should be adjusted on smaller devices.

A showcase of Responsive Web Design

Here we have a few examples of responsive Web Design:

1. Saneef

2. Expositio

3. Berkshire Salon and Day Spas

4. Andersson Wise Architects

Is Responsive Design Approach Right for Your Website?

Responsive design opened a new phase in web design. It is changing the way we think about existing design, development and strategy processes. By using it you will:

• Prepare your website for the new devices and resolutions that will be available in the future. This way you won’t need a custom website version every time.
• Create better user experience because responsive design is adapted to specific resolutions.
• Save time and money, as it doesn’t require creating multiple versions for each device.

But the idea of the responsive design is not to be a complete replacement of the mobile sites. You need to carefully evaluate your project to see whether you should go with one or the other. If users have different goals while accessing your website you shouldn’t be using responsive design. Let’s look at an example, there is an event at the restaurant and the mobile audience is offered the ability to vote on something while they are at the event. So, voting functionality should be easily accessed from a mobile device. In the meantime desktop users may be looking for the menu for hours. In this case it may make sense to create a separate mobile version.

If you want to learn more about responsive web design read “Responsive Web Design” book by Ethan Marcotte.

Milcut is company offering complete fabrication capabilities in precision die cutting, water jet cutting, slitting, laminating, convoluting, splitting, and assembly.



Visit site.

My role: Art direction, design. 2010

Visit site.

My role: Design, css/xhtml, cms. 2010

Visit site.

My role: Art Direction, design, development. 2010

My Role: Art Direction, design. 2010

Visit site.

My role: Art direction, design. 2010