I am in love with responsive websites. I don’t know if it’s the easygoing attitude on resizing, their ability to beautifully render on multiple form factors or the fact they respond to user behavior seamlessly that is so interesting. Either way, we are going to see more of them as technology’s demands are making responsive websites a necessity.
Why would you want your website responsive? The benefit is that your website design will look good at varying screen sizes. Especially for the mobile visitor, content will be more usable and readable, since it reorganizes based on screen size (instead of a mobile experience that simply has a full view of the desktop design of the website.)
Designing for a responsive site is similar to designing for a fixed-width website, except with more planning and back end, since there is more motion and more relationships between elements. To do this, one must keep in mind three things:
- The site must be based on a flexible grid
- The site is using flexible images
- The site is controlled using media queries
The goal of responsive web design is for your website to be presented in a similar fashion on all screen sizes, both portrait and landscape. Responsive web design does not limit creativity, but rather gives both developers and designers better ways and options to present and balance their content. Using a grid when designing your website gives a developer a guide, and it provides ability for comps to match final code more precisely.
Fluid grids allow content to remain organized when movement occurs and they are the foundation for the object, text and layout designs. Consider your content and what parameters you want. Make sure your grid can be stretched out wide and squeezed in and will still work. When creating a responsive layout using a grid, make sure you specify a maximum width of your site. This prevents columns from stretching all the way across when viewed on giant, wide screen monitors. It also prevents your content from being pushed all the way down the visible area.
Sites that are designed based on a grid system are the best candidates for responsive interactions. A fluid grid is one where the widths of the columns are given in percentages rather than pixels. This allows the layout to scale consistently across the multitude of screen widths we will be handling.
Building a grid from scratch:
Frameworks that create fluid grids:
Grids provide the framework, but it’s how they are populated that often fleshes out the design and gives it personality. In a responsive design, every element has a relationship to the other elements on the page, therefore things must adapt. Use style sheets, ranges, and percentages to allow images and text to scale seamlessly.
Columns that scale proportionately are great, but the content must adapt as well. Text is generally well-suited for this task, as it can re-flow on the fly with very few issues. Images, on the other hand, require special consideration. By using images that are larger than their containing elements and resizing them using CSS (and, in the case of Internet Explorer, proprietary CSS filters like AlphaImageLoader), you can have images that scale as gracefully as your text.
Media queries are instructions that control how the relationships between text, graphics and grid function and react. These pieces of code control how sections will react a certain way if those other sections change. They can speak to anything from height and orientation to resolution and syntax. Be sure to consider all of possibilities media queries can open up in your design.
If fluid grids and flexible images are the Princess Leia and Luke Skywalker of responsive design, media queries might be considered Hans Solo, the last piece that ties the whole thing together. Introduced as part of the CSS3 specification, media queries are specialized selectors that allow us to apply styles based on the current device viewing environment. For example, if the maximum width of a device is 480px (maybe a smartphone), you can re-arrange the layout of your content in a more mobile-friendly manner. Without media queries, your fluid grid would simply get really skinny on a mobile device.
Responsive website examples:
If you’re interested in learning more about responsive web design and how it works best for your brand, contact us today!
4 comments on Designing for Responsive Web Design