What is “Responsive Design”?
Responsive web design means creating web pages that respond to different screen sizes, specifically those of mobile devices like phones and tablets. In the past it was common practice to create 2 different versions of the website, one for mobile and one for desktop, and direct users to the appropriate site. While this type of website cans till be found, for most applications it has been replaced with Responsive Design.
The main idea of Responsive Design is to build websites that give users the same or greater features on mobile as they can find on desktop; This is known as “Mobile First”.
How Does A Website “Respond”?
A website responds by resizing page elements to suit different screen widths. For example the font of a heading may be 55 pixels tall on desktop, but when the same page is viewed on a tablet like an Ipad the font will appear as 35 pixels tall. Left at its original size, the text may be so large that it runs right off the screen on an Ipad. The same kind of resizing can be done with photos and other content blocks.
Responsive Design is not just limited to simple resizing, the entire web page layout can adapt to different screens. For example a layout that is 4 columns across can change to a 2×2 grid layout on a tablet (a medium sized device) and then that can change to a 1 column layout when viewed on a phone (a small sized device). Responsive resizing is not just limited to mobile devices, it applies to desktops as well. Some older desktops may have similar screen resolutions to many mobile devices. Websites should be accessible by anyone regardless of device.
Responsive And Mobile Friendly
Being responsive is a good start but a website should also be mobile friendly. There are two main differences with a mobile device compared to a desktop:
- Actual screen size
- Input method
Even though you can resize a web page to fit on a mobile device it’s important to remember that the actual screen size of a phone is around 5 inches on the diagonal. Mobile devices are usually held a good distance away from the eye which means that text and images must be much larger in order to be easily seen. The most common approach is to make most elements span the entire with of the screen, stacked in a single column.
The challenges of a small screen size are even greater when you consider that the main input method for a phone or tablet is touch. A thumb can take up as much as 30% of the width of the screen. It is important that any buttons, menus, and text boxes are big enough to be easily tapped.
Responsive design isn’t just about making things smaller, sometimes it’s making things bigger too.
You Can Reach Twice As Many Customers
It may sound like too much work to make your website optimized for mobile but in fact it is critical. More people than ever are using mobile devices to view the internet and that trend is just increasing. In 2015, 51% time spent using the internet was on mobile. If your website is not optimized for mobile viewers you could be turning away half your customers!