Traditionally, websites were designed and coded to take advantage of as much screen real-estate of the smallest, but still widely used, screen sizes. If there were enough users using a desktop or laptop with a screen resolution of 800 pixels wide, then a website was typically built to display at 750 pixels wide, for example. That width was static for all screens regardless of size. The website would look the same on a 13” laptop and a 19” desktop monitor, often leaving large amounts of unused space in the margins to the left and right of the site on larger screens.
That has changed dramatically in recent years and, today, good web design is responsive design.
Advances in HTML and CSS allowed developers to move away from tables to structure their sites, and eventually allowed them to create sites that automatically responded to the device screen size. This is what has become known as responsive design.
Responsive design allows developers and designers to address an infinite number of screen sizes with relatively little coding and no need for multiple style sheets (Adaptive design) or subdomains. The method uses a mix of flexible grids and layouts images and CSS media queries to allow the site to adjust or respond to the user’s device and preferences, including switching easily from portrait to landscape orientations, and working with keyboards or touchscreens.
From Wikipedia: Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Why is this important?
Google wants your site to be mobile-friendly. If it isn’t, your site might not show up on Search Engine Results Pages (SERPs) when a user searches on a mobile device.
Because one URL is used a responsive design, instead of subdomains, it is easier for Google to crawl and index, improving your SEO “juice.” Google is actually including “Mobile-friendly” on the search results on a mobile search to alert users as to whether they should expect a good experience on the website result.
Responsive design provides a better user experience. As more and more people own and use smartphones and tablets for web browsing, the more critical it is to provide them with an user friendly and easily navigable site. According to Pew Research Center, as of October 2014, 64% of American adults owned a smartphone, 32% owned an e-reader and 42% owned a tablet computer. As of May 2013, 63% of adult, cell phone owners used their phones to go online. If your website isn’t easy to use, visitors will bounce off of your site without reading what you have to say. Plus, according to Huffington Post, an individual will be 67% more likely to buy a product or service if he/she has had a positive experience on your website.
It’s easier to manage. Rather than having to update content on separate mobile and desktop websites, content can be updated in one place, saving time and money. It’s also faster because you are using one codebase that is streamlined to deliver the optimal experience so the time it takes to load your website on a screen (which Google is also looking for) is reduced.
Ignoring mobile users ignores a large – and growing – group of customers and potential customers. If your website isn’t already responsive, it’s time to consider an update.