You are here

Responsive Design 101

There's been a lot of buzz around responsive designs lately and there is a good reason for it: because they are awesome. There used to be a time, not too long ago, where a designer's biggest concern regarding screen sizes was to create a website that would work both on 800x600 and 1020x768. Well, those times are gone! These days you can be sure your work will be accessed through a wide variety of devices, from small phone screens to super wide monitors and even TVs, each with different sizes, resolutions, proportions and even user goals. How can you account for that? One option would be to create an entirely different site for mobile devices and redirect mobile users to a different address like m.yourdomain.com, but not every client has the budget for that or even needs such an intricate solution. Alternatively, when designing a new product or when working on a major redesign one could invest a bit more on design and front end development and have a very elegant solution using a responsive design. A responsive design adapts itself to the screen is being viewed on. It's more than just using percentages for the widths of your elements like on the old fluid layouts, it will actually change how the site or application looks. Hide and reveal different elements, change the placement of items on the screen, substitute multiple columns with single columns and so it goes.

You can find a nice collection of responsive websites over here: http://designmodo.com/responsive-design-examples/ It's important to keep in mind that creating a responsive site is something that requires planning and thought from the early steps of the process. A designer needs to account for that and provide the different mocks and resources for the developer to be able to do its work. It has to be thought of as fluid both horizontally and vertically so watch out for designs that rely heavily on complicated background images and illustration, those tend not to scale too well. Development-wise there are a couple different ways you can tackle the work, first of all if to use percentages instead of absolute values aided by "max" and "min" widths and heights and, above all, make good use of the media-queries, they are the beautiful css declarations that will allow your layout to change once it reaches a certain size.

You can find more information on media-queries over here: http://www.alistapart.com/articles/responsive-web-design/ My favorite method of developing a responsive site so far is to use the 1140 grid: http://cssgrid.net/. Saves you a lot of time when you work inside framework, especially if you are also the designer or you can ask your designer to work with a particular grid in mind.

Have you worked with responsive designs before? Share some experiences with us! Have a happy theming!

Érico Nascimento

SHARE SOCIAL
Designer
Érico has been a Front-End Developer and Designer with Appnovation for almost 4 years. While he specializes in responsive design and mobile, Érico’s other projects include user experience design, information architecture and business analysis. Originally from São Paulo, Brazil, Érico moved to...→ More about Erico
Designer

Érico has been a Front-End Developer and Designer with Appnovation for almost 4 years. While he specializes in responsive design and mobile, Érico’s other projects include user experience design, information architecture and business analysis. Originally from São Paulo, Brazil, Érico moved to Canada in 2007 to pursue a career in web development and design.

Current Playlist Includes: Allen Toussaint, Joe Bonamassa, Neil Young, City and Colour, Daft Punk and Rammstein – WOW that’s a mix!

Bucket List Accomplishments: Moving to Canada and recording an album.

Languages Spoken: Portuguese, English and a hint of Spanish and Italian

Appnovation Technologies