Metropolis Creative on Twitter Metropolis Creative on Facebook Menu

Responsive Website Design

Your website is being viewed on multiple platforms ranging from small to large screens, and from desktops to cell phones. So how is it possible to get your content delivered in a readable and attractive format for all these devices?

Being responsive

Responsive Website Design is the answer. Instead of trying to tightly control the viewing experience on each device platform, it is better to embrace the flexibility of the web and design with that in mind.

Start by making your page elements flexible. Instead of setting type on a homepage in pixels, style it in ems, a relative measurement which will adapt to different screen sizes. Set the width of elements within the page design relative to each other, so the integrity of your design isn’t lost on an iPad or Blackberry, or even a PC from 1995 for that matter. These changes can turn a good website into an adaptable, accessible one.

Design for a common denominator. What does the user really want? It depends on how they’re viewing it. If they’re looking up a restaurant on a desktop, splashy photos might be nice. However, on a mobile device, the address and hours are far more relevant. Why not display the hours and address on the top of the page anyways? Then follow with descriptive text and nicer images.

Keep hierarchy in mind. What’s most important on your web page? You can specify the hierarchy of elements in your webpage design to load in a specific order or even disappear based on screen size, and create an option to drop slower-loading elements if the site is viewed on a mobile device. These changes ensure that all visitors are exposed to the only most relevant and important sections of your site.

The market is always evolving. There will always be a new mobile phone, computer, or who knows, another format altogether. If you choose to design flexibly from the start, you message will be heard across all platforms.

About the Author: Michael Flint


Recent Blog Posts

What you need to know about WordPress 5 Gutenberg

What you need to know about WordPress 5


What is a wireframe?


Create a Custom Pumpkin Carving Template

Contact Us
