Responsive Web Design Breakdown as Described by a Rookie

Why-Web-Designer-Should-Turn-towards-Responsive-Web-Design4I have been in the design arena for some time, but I do not begin to pretend to know everything.  There are too many design areas in the creative world to be an expert on everything. It used to be pretty much print and fine art, created by hand and given to a press operator using ink. I also consider old time animation (think Disney) fine art because it was all done by hand, painting cells and drawing steps. These days we have print, fine art, web, mobile, animation, digital photography, and video all being created using a computer. As great as it would be to know how to do it all, there would always be that fear of becoming a jack of all trades expert at none. But the reality is as a designer you SHOULD be constantly learning about new software, techniques, and new areas of design even if you don not plan on working in those areas of expertise. It is just good practice to at least understand these areas. Even a traditional illustration might eventually need to be used in another area of design.

I have been designing web pages now for many years, and I consider myself savvy enough to understand that viewing a web page on a computer with a 27 inch screen is a very different experience from viewing the same page on a seven inch tablet, and even more so on a smart phone. How do you design for all three without having to become an expert at all three platforms? Well I am about to share what I have learned.

“Design is a plan for arranging elements in such a way as best to accomplish a particular purpose.”  — Charles Eam

Enter Responsive Web Design

seesparkbox-siteIn earlier days when smart phones were not widely used and new on the market, designers had the daunting task of creating a web page and then an additional dummied down boring version for the phone. The pages were not as inviting, but they would be readable on a phone’s small screen. Well I am sure somebody out there was thinking, why create 2 or more jobs for the same material just to be seen on different screen sizes? There had to be a better and easier way. Responsive design in a nutshell is designing a page using flexible, fluid grids that use percentages rather than fixed widths, and also using creative cascading style sheets (CSS) and media queries that help control those widths and other elements on the page. Fixed sizes are going by the wayside. Now everything needs to be fluid and adaptable.

Responsive design has been around for years, but it had not been widely used until recently. 2013 is suddenly being touted as the year of responsive design due to the amount of information being digitally designed for online media including books and magazines. And it is predicted that mobile devices will outpace the desktop computer in just a few more years.

Design trends online change more often than the wind, and slightly less often than my socks.  — Suleiman Leadbitter

In a study by Knotice in November of 2011, 20% of all emails were being opened and read on mobile devices. Well, it has been a year since that study and new smart phones as well as a plethora of new tablets and the iPad mini have come onto the market. The 2012 holiday season has just come to an end and new mobile devices were received as gifts. I have no new numbers, but I’m betting that 20% has, at the very least, doubled. And this does not take in account viewing web pages on these devices or playing games. As a designer it is important to be thinking about how email and websites will look on all these devices.

Some research from Google tells us that “90% of people move between devices to accomplish a goal, whether that’s on smartphones, PCs, tablets or TV.” The three most common ways users move between devices are:

  1. To search again on the second device,
  2. To directly navigate to the destination site, and
  3. Via email, that is, to send themselves a link to revisit later.

I have found myself in all three of these situations simply because so many sites are not set up for responsive design and it is just too cumbersome to try and find something on the phone. I do not own a tablet (It is not for lack of wanting), but I assume that searching the web and reading email on a tablet is probably as user friendly as using the computer.

New trends will come on the market, and we as designers will need to be think beyond the basic ways to present information.

If you want to read more about Responsive Design, A List Apart has some of the best information out there on this subject.

Screen Shot 2013-01-12 at 6.37.08 PM

LauraMalickSmith
Laura Malick Smith is the Principal Creative at ChikenSkratch Studio (formerly Digitaldemiurge). She has over 25 years experience in design including print, web and illustration, holds a degree from the Art Institute of Colorado and has been know to enjoy a lively discussion or two.
LauraMalickSmith
LauraMalickSmith


Leave a Reply