Responsive Web Design -- Why you should care and how it works by Avantia, Inc.

Responsive design, a critical element of one's Moble Strategy, has been a term buzzing around the web design community for the past couple years, but it is not just a buzz word. It is a concept that has solved the critical issue of adapting web content to the expanding array of device screens. The idea is that the content of the web page has flexible dimensions defined in relative units to adjust to different sized screens. Websites that don’t use responsive design are easily spotted. Ever open a website on your phone’s browser and have to zoom in and squint just to read it? This is because mobile browsers normally deal with websites designed for a large screen by simply scaling them down pixel for pixel.

blogImage1.pngThe remedy to this issue is to essentially “trim the fat”. There is limited space on a phone’s screen, so it is best to only deliver essential content to the user. This means removing unnecessary content like images and banners. Another issue is the navigation menu. Everyone has seen the “hamburger” icon that has become the universal symbol for the navigation menu. Click this icon and the menu slides into view. This is the most common solution to the most common obstacle. The next thing to consider is the layout. Many designers use two column (sometimes three or more column) layouts. In order to avoid horizontal scrolling the columns must stack vertically as the screen size gets smaller until it is down to one column on phone screens. Once the unnecessary content is gone and the menu is hidden you are left with more screen real estate for the essential content of the site and, most importantly, BIGGER TEXT!

How it Works

The size, positioning, and overall style of each web page’s HTML is controlled though a CSS document (Cascading Style Sheet). Within the CSS there are statements called media queries that monitor the dimensions of the browser window. You can then place CSS code inside block set to only execute when the browser is under or over a designated width. The media queries look like this:

@media (min-width:768px)
{
     ......
}

or

@media (max-width:768px)
{
     ......
}

The media queries are normally set as a different break point for each major screen size category - large desktop, laptop, tablet, and phone. This means that for each of those devices certain style rules will be overwritten to accommodate for the screen real estate available.

Images

One major component to be taken into account is image sizing. An image can either be embedded in the HTML as its own element or as a background image of a different element. The two methods react very differently to change in the dimensions of their parent HTML element. When it comes to creating a responsive image I prefer not to use a background image. With this method, as the dimensions of the container shrink, the border of the container will clip the image rather than the image resizing with the container(there is a css property to handle this, but it does not have wide spread browser support yet). When embedding the image in the HTML it is easy to make the dimensions completely flexible with the boundaries of the parent container. Set the image “max-width: 100%” in the CSS and that is it. One important rule to follow is to only set one dimension to your image. The browser will automatically scale both dimension proportionality. This is the best way to avoid stretched images. This leaves all image scaling up to the grid that surrounds it. 

The Grid

blogImage2.pngThe grid is the foundation of a responsive web page and carries most of the load. With the content of the page being separated into grid rows and individual cells it can more easily be rearranged to adapt the layout to the browser window. Generally speaking, as the screen gets smaller the layout should become more vertically oriented. Achieving this with a grid means that at a certain point, when the screen width is too narrow to comfortably hold the content, the page becomes a single column layout with each grid cell spanning the entire row. There are free responsive frameworks available that have the grid system built right in. These frameworks lay the foundation for the css and allow the developer a starting point to continue from with custom coding.

The concept of responsive web design is still new, so there is still a lot of room for defining conventional practices. One that is on the rise is the “mobile first” approach. This is the idea of coding the base CSS for mobile and then gradually upscaling from there, rather than coding the desktop version first and overriding styles to degrade the layout for mobile. Every web designer has their own style of approaching responsive layouts, but the main concept remains the same - creating a website layout that adapts to all screen sizes. As mobile web browsing continues to increase in popularity there is no doubt that responsive web design will be sticking around for the foreseeable future.