One of the biggest challenges facing website developers and designers today is how to make the site look good on all types of devices. Computers aren’t the only piece of hardware with a web browser anymore. Building a website that is suitable to work on any screen, no matter what size, big or small, mobile or desktop, is a continuing hurdle. Responsive web design is focused on providing the cell phone and desktop user with the best experience possible. Responsive web design is not a single piece of technology, but rather, a set of techniques and ideas that form a whole.
The term responsive web design was originally coined by Ethan Marcotte in an article several years ago. The concept has gained in popularity since then, so much so that Mashable declared 2013 “The Year of the Responsive Web Design”. According to Jeffrey Veen, VP for products for Adobe, the number of devices and platforms grows daily and because of this, your site needs to grow. Responsive web design is now a part of how we build our websites for the decade to come. There are 3 technical ingredients for responsive web design: Fluid Grids, Flexible Images and Media Queries. Along with these components, responsive web design requires a different way of thinking.
The first idea behind responsive web design is utilizing what’s known as a fluid grid. In the past, creating a “liquid layout” that expands with the page hasn’t been as popular as creating fixed width layouts. The page designs are a fixed number of pixels across and centered on the page. But because of the huge number of screen resolutions in today’s market, one can no longer ignore the many benefits of liquid layouts. Fluid grids in responsive web design go several steps beyond the traditional liquid layout. A fluid grid is more carefully designed in terms of proportions, as opposed to a layout based on rigid pixels and percentage values. By using a fluid grid, the layout resizes its widths in relation to one another when squeezed on a tiny mobile device or across a huge screen.
To calculate the proportions for each page element, divide the target element by its context. You can do this by creating a mockup in a pixel-based imaged editor that is high fidelity. You can then measure a page element and divide it by the full width of the page. Here’s an example: Say your layout is 960 pixels across. If your target element is 300 pixels wide, multiply the result by 100 to get the percentage value of 31.25%. You can then apply this to the target element. The limitation for fluid grids is that when the width of the browser becomes too narrow, the design can break down. Fortunately, you can remedy this with another element of responsive web design: Media Queries.
CSS3 media queries is the second part of responsive web design. CSS3 media queries allow you to gather data about the site visitor and use it to apply CSS styles conditionally. Media queries also allow you to use precise fine-tuning to reshape the pages themselves. You can increase the target area on links for smaller screens and selectively show or hide elements that can enhance the page’s navigation. You can use responsive typesetting to slowly change the size and leading of your text, giving the reader the optimal experience for whatever device is providing it.
You can also move entire sections of pages depending on the size of the available screen real estate. Media queries allow you to move one or more columns or elements on a page. This adjusts to the available space and targets the minimum or maximum widths using media queries.
Normally when adding an image to a web page, developers set a width and height using absolute measurements like ‘px’. But doing this fixes the image size and renders it inflexible. Being able to create flexible images is vital when creating a flexible layout. What good does a flexible layout do if the content inside forces the layout to be too rigid? The fixed image is, at some point, the perfect size. However, in all other cases, it is too large or too small for the layout. For most cases, all that needs to be done is to set a max-widlth of 100% on the images and media to make them flexible. Set your measurement in % and the image can resize itself as its container resizes. If the image is larger than it’s container, it will scale back to be the same size at the container. Conversely, if the image is smaller than the container, the image will be its default size.
People these days expect to be able to browse on their phones as easily as they browse the web on a computer. Using responsive web design allows developers to not have to create a different version of a website that targets each individual device. Instead, using different techniques and a different way of thinking users can have a great experience, no matter what kind of device they are using.
If you found this information helpful, be sure to check out our post “Going Mobile and Today’s Mobile Consumer”. The Organik SEO team is passionate about helping businesses grow by tapping into the power of social media and SEO. To discuss how we can help you grow your business, contact us today!