Responsive Website Design
Responsive Website Design
Responsive website design involves building a website that can be viewed and interacted with on any device, including phones, tablets, and desktop computers.
Here are some basic starting points for responsive design.
- Design the layout with mobile-first in mind. Google’s algorithm is mobile-first. This means that the search engine looks at how the page appears on mobile for rankings on the SERP. Consider how the page appears on mobile devices and use that as your visual cue to design the page.
- Use Flexible Grid Layouts. Use grid systems to design the layout of your website in a way that will flexibly resize to any size of the device that is accessing it. For images, use site code to instruct the device to load certain images depending upon the screen size. This is important because if your images are 2000px on the desktop, a 2000px on a mobile device will take too long to load.
For example, say you have two images. One image will load for small screens – those with a maximum width of 300px, and another one for screens that run larger than 300px. In this situation, you might have code that looks something like this on your page.
<picture>
<source srcset=”img_smallexample.jpg” media=”(max-width: 300px)”>
<source srcset=”img_example.jpg”>
<img src=”//www.grozina.com/img_example.jpg” alt=”Example”>
</picture>
This tells small devices to load the first ‘smallexample’ image, while devices that do not fit this criteria will load the standard size image. Alternatively, you may want to consider changing file types. - Use Relative Units. Make sure that all font and page elements are sized relative to their containers instead of absolute values, like pixels.
Through responsive website design, businesses are able to provide visitors with a more satisfying user experience while improving visibility in the online space.
Related: Accelerated Mobile Pages (AMPs)
Related: Mobile Ecommerce