Coined by web designer Ethan Marcotte, “responsive web design” refers to the process of creating websites and other digital experiences to be utilized across a wide range of devices and screen sizes. A responsive website adapts its layout and content to suit the individual user’s screen size, optimizing user experience from desktop monitors to laptops to mobile phones.
In the rapid evolution of today’s digital landscape, cross-platform accessibility has become a priority for web users. Mobile web traffic has increased by 75% since 2015, and with modern sharing capabilities such as Apple’s Airdrop and Windows Nearby, it's more important than ever to ensure that your digital product translates seamlessly across devices.
Responsive design is important to the process of search engine optimization (SEO). SEO is the process of optimizing a website to promote its status in search engine results and increase site traffic. Today, search engines incorporate a variety of factors in determining which sites to return. Responsive design is key amongst these factors.
Many search engines, including Google, take mobile web content accessibility into account when ranking links in search results. Search algorithms evaluate factors of responsive web design such as media queries, viewports, flexible images, and browser width. Responsive design also increases link sharing and decreases bounce rates, both of which improve a site’s Google ranking.
Choosing to forgo responsive design and instead create two separate websites for desktop and mobile creates duplicate content will damage your SEO. Furthermore, this route is neither cost-effective nor labor-effective. Hosting and maintaining multiple websites has additional costs, and when your sites require refreshes or revisions, the update will take much more time and effort. Responsive design is undoubtedly the efficient way to go.
For information on coding a website with responsive design, we recommend Google Developers’ “Responsive design basics” and MDN’s CSS guide. Further reading includes MDN's guides on media queries, grid layouts, and responsive images.
