Mar 28, 2012

Responsive Design: One Design for Each Job: Not Enough!

Responsive Design: One Design for Each Job: Not Enough!

The responsive approach begins to make it's way, users appreciate the advantages, designers and developers around the world support it. If we're lucky enough to meet a client who wants to produce his or her site with this technology, we should be happy because we have the opportunity to work on a modern project. But we must also be concerned that when working on a good responsive project, work is harder and it's hard to convince a customer to pay more for a responsive site than for a normal site. We can push the client to pay more if they propose to develop a dedicated mobile site or application for iPad, but this isn't our case. We want our project to be "cross-device" and "avaiable in all sizes."

Responsive Design: A hard job ahead

If we think we can complete a responsive project working only with media-queries, grids and flexible images, we're only doing half the job, and definitely not a great job! For any web designer, thinking responsive means accepting a new challenge: to be creative not only to produce something that works well on desktop PCs, but also on tablets and smartphones; to create new designs for each device and not just to adapt the initial one, that's wouldn't be enough. Last generation tablets and smartphones have a special feature: the touch-screen, this leads us to focus on the optimization of our designs more than we did in the past when we only had to think of desktop versions of websites.


The Challenge

We need to think responsive starting from the concept, without fear of what awaits us, without limiting our creativity. Looking at various css-galleries, I've noticed a large percentage of very simple and minimalist sites. It may be a good choice, but I think that the motivation behind minimalistic style lies in the fear of facing the difficulties of a more complex design.

The challenge is to produce a quality product, with care and attention to detail and cross-device design. To accept this challenge we will have to take into account many variables, including:
  • · Screen size
  • · Touch-screen
  • · Content
These 3 concepts help us understand not just how to adapt the original concept to make it readable on any screen, but how to make the necessary changes to preserve the quality of the design on each device. Sometimes, it just takes a few changes to the css file (via media-queries), but my call is to think in depth and find the best solutions, paying close attention to detail. With the new responsive approach, the web designer has acquired a new skill that is not about creativity, but more technical issues that need to be understood and predicted. The question is: how will the site behave on devices different from the common desktop PC? The web designer must first know what possibilities responsive design offers in order to be able to design new layout for mobile devices. We must treat the concept of our responsive site from end-to-end, constantly testing and optimizing, and not leaving this important task to developers in latest stages. Test all the effects on physical devices, touch the buttons and see if the behavior expected from the concept is really usable for touch-screen devices. Finally, the web designer must also take the content into account. The responsive approach (unless you use javascript or server-side technology) is criticized mainly in this aspect. It's usually too complex to view the same content on a desktop PC as on an Iphone. It 's our duty to seek the best solutions for reading, navigating and understanding a site in its detail.

Responsive Design Examples

Barack Obama's Website On the desktop version of Obama's site, the logo is placed in the central part of the header. Just below, there's the main navigation menu that occupies 100% of the page. The main headings (STATE, GROUPS, ABOUT etc.) are activated on "mouse-hover" featuring the voices of the second level. When the page is viewed on iPad, in the landscape layout, there are some really interesting changes concerning user experience. The logo is reduced to a single symbol and moved to the left. The main menu disappears from its original position and becomes a key attached to the logo. The two call-to-actions, "Get the latest" and "Donate", take a different location and become much more important.Clicking on the logo or text "menu" opens the menu in expanded format. This is very important to facilitate the UX on touch-screen devices. The menu setting is reminiscent of the native applications for iPad. New Adventures The page features an evocative image that accompanies the claim. The main menu is placed over the image. In the iPad portrait version, the page becomes more simple, the image is deleted and the space that houses the logo changes color to give more strength and dynamism to the template. The menu is arranged vertically and the elements of the section "Featuring" no longer have the float property, but are arranged in a more simple list. Fork The site features a generous creativity that accompanies the claim of product launch. When the page is displayed on iPad in portrait mode, media-queries come into action removing images that become unnecessary and may impair navigation. If you continue to reduce the screen size, the page becomes even more simple by eliminating the icons. United Pixelworkers This site presents the full-version desktop background image for the header part and below that is the content. The structure does not change in the iPad version, only in scaling percentage. When we descend below 600 pixels, the page changes and eliminates the large background image. The logo becomes much larger and occupies 50% of the page. The logo is flanked symmetrically by 4 call-to-actions (Faq, Shopping, Twitter, Email). Andersson Wise This project has several interesting ideas from the point of view of creative UX. On the desktop and iPad versions, the setting is basically the same, they pay full attention to the optimal visibility of the main image. On the iPad, the two balck boxes are moved down to allow the maximum extension of the image. If we decrease the size of the screen, the image keep its priority, thanks to the shift of the main menu to the top (right below the logo). The boxes are simplified, using a white background approach throughout the whole page. The "Projects" section is treated so that the ease of viewing images is optimal. If we go down to 600 pixels, the page structure is similar to that of the homepage and photos are presented in a slideshow with user-controlled keys.