Ensure your website is accessible across all devices and platforms.
Responsive or mobile-friendly are terms associated with a website which automatically scales up and down to best fit the users device whether that be mobile, tablet or desktop. With the ever increasing usage of mobile devices as the first choice to browse the web, it’s vital your website is robust and future-proofed to provide longevity.
Having a responsive website is an important factor for two main reasons which are visitor retention and search engine ranking. Users have naturally adopted a mobile-centric attitude to the web and expect any website they visit to be accessible through a mobile device. Should they be expected to pinch in and out to view content is considered somewhat detrimental to the overall experience meaning they are then far more likely to leave the website and look elsewhere for a similar product or service. In recent times Google also announced that they would be using mobile-first indexing for the entire web. This was quite significant in that since Google only serve users with the most relevant results, it would now naturally favour and promote websites which as well as having valuable content would also provide good user experience and functionality.
From a coding perspective it’s always best to build a website from a mobile-first approach simply meaning you start with the smallest device first and then work your way upwards to desktop. Due to constraints regarding the physical width of most mobile devices it’s not uncommon to see a website appear as a single column. As you then work upwards to tablet there is then of course more physical device space available allowing you to consider what elements need to be adjusted so that content remains accessible and the design aesthetically balanced. There are different views amongst the coding community as to when is best to begin considering this change in layout. Some favour this should happen only when the website is beginning to look unbalanced where others work to a more strict method where by using CSS media queries they can target specific device sizes such as iPad portrait and landscape. I personally tend to work using the method of CSS media queries but understand the benefits of both options.
At the time before mobile devices were on the market a website would of been delivered as 'fixed width' which as the name suggests would remain at one constant size and not scale up or down. This method was considered as industry standard given that all web traffic was desktop driven however with the dawn of the first mobile devices developers now needed to take these into account and so the adaptive method was born. An adaptive website worked by targeting the specific sizes of these early devices and given the fact CSS media queries were not widely supported, it also meant they would need to create three sets of code for just one website which of course was very time consuming. With the influx of mobile devices the term responsive design was coined by where a site would be built using percentage based widths which could flex and grow to fit any devices that helped to future-proof the clients investment and be a more cost-effective approach to a build.