Guidelines for Building Responsive Websites
View All Blog Posts
Guidelines for Building Responsive Websites
For many years, websites were designed at one size, typically 960 pixels wide. This paradigm began in the mid 2000's when the most common screen resolution was 1024 x 768 pixels. The 960-pixel website fit nicely on standard monitors and at higher screen resolutions but with the recent flood of web-enabled devices of all sizes, this approach became outdated. Now, you can surf the Web on a netbook, smartphone, tablet... oh right, and on your desktop computer too.
In a nutshell, a responsive website detects the size and resolution of a viewer's web-enabled device and 'responds' by displaying the content tailored to the specific screen size. The layout, hierarchy, and scaling of fonts, images and other visual elements will vary depending on what size screen it is being viewed on. The content is the same, but the delivery of that content is maximized for the screen you may be viewing the website on at any given time.
The Funny Garbage development team is putting the finishing touches on a responsive version of our company website and would like to share the following tips to help you with your own responsive site:
Use a Framework to Accelerate the Development
Start your development using a framework like Less or Foundation; out-of-the-box, they will help you to build a responsive website. Check Responsive or Skeleton if you are using WordPress, or Omega if you are building a Drupal website.
Grid Layout
Try using a grid layout for your website designs. Essentially, grid layouts have a fixed number of columns with spacing between them; usually you will find 12 or 24 column layouts, with 10px or 20px of spacing. The page content will be grouped in blocks (e.g. header, footer, sidebar, preface, etc.), each with a width determined by the number of columns in the grid. Try to design these content blocks to be fluid, so that the content inside them is adjusted even if the width of the content block changes.
Development Time Will Increase!
As mentioned above, using a framework and a grid layout will help reduce development time; however, you will be building 2 - 4+ versions of your website. You will also need to check that all the site versions display correctly in the receiving devices. All told, your total development time will likely increase by 20%.
Adaptive vs. Responsive
Do I need an adaptive or a responsive website? Both types of website change according to the user's device or window size. Adaptive websites focus on the device features, like enabling swipe gestures when the device is capable of performing them. Responsive websites focus on displaying a design layout that fits the receiving device. These approaches are not mutually exclusive, and they can be used to ensure a good user experience regardless of the device the website is viewed on.
The takeaway: building a responsive website may require extra effort, but it's worth it once you see your site adapting magically to any device!