Mobile & Responsive Design
What is Mobile and Responsive Design?
The concept of responsive (sometimes referred to as mobile) web design suggests that design and development should respond to whatever device is being used to view a site. Using a mix of flexible grids, layouts, images and the intelligent use of CSS media queries, a responsive site has the underlying technology to automatically adjust and re-flow visual elements according to screen size, platform and orientation.
With the proliferation of mobile devices, it’s becoming more and more important to provide a great user experience across all devices. As the user switches from their laptop to iPad, iPad to iPhone, iPhone to netbook, companies can no longer afford to ignore the mobile marketplace.
With responsive design, a high-quality experience can be consistently delivered without compromising content or functionality. This approach eliminates the need for a separate mobile-only website, different design and/or development phase for each new gadget on the market. Ultimately, that means you spend less time and money creating/managing different versions of your website. Instead, you only have to focus on one.
Google Recommends Responsive Web Design
When building a website that targets smartphones, Google supports three different configurations:
- Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.
- Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
- Sites that have a separate mobile and desktop sites.