Originally published early January 2017 as an internal document.
The Internet continues to evolve rapidly and become a more mature platform for content distribution; at the same time the devices we use to access the Internet are becoming more varied. We continue to use desktop and laptop computers with a wide range of screen sizes but have also seen the proliferation of mobile phone with Internet access, followed by an array of Tablet devices and onto the upcoming expectation of an increase in wearable tech and virtual reality devices.
As modern web developers it is essential that we consider all devices as best we can, else the sites we deliver are unlikely to display well across this range of screen sizes. To put this into some perspective, consider the following:
Whether we are updating an existing site or creating a new site from scratch, supporting the vast array of device screen sizes can seem a daunting task – how can you design something on a huge desktop screen that can fit and look good on a small portrait smartphone? At present you have two options:
This involves creating a completely separate site for mobile devices, then detecting the type of device viewing your site and sending them to either the desktop or mobile version as appropriate. This approach has been in use for the last ten years or so; but has some significant drawbacks:
This approach involves allowing your web site to change its layout to suit the screen size of the device, this even occurs in real-time as the screen size is changed (such as rotating a mobile device or resizing a browser window on a desktop). Responsive Design allows every visitor to enjoy an optimised experience of your site; encouraging visitor retention and increased sales.
“Responsive Design” overcomes the drawbacks of the older “Mobile Site” option and is, by far, the preferred solution for creating modern mobile-friendly sites that cater for all screen sizes.
Bootstrap additionally brings many layout tools not part of the standard HTML web page language; for example, navigation menus which reduce down to “hamburger menus” on smaller screens, and grid-based columns allowing content to be displayed in up to 12 columns on larger screens but less columns on smaller screens, all the way down to a single column on the smallest screens.
Bootstrap introduces default recommendations on layout concerns such as font size, padding and guttering; whilst often contentions, these defaults certainly create highly readable sites even for those with suboptimal eyesight. Such defaults can be overridden, but the further you deviate from the Bootstrap defaults, the more customisation you will need to make – this can increase initial design costs substantially and great care must be taken to ensure you have consistently customised across all screen sizes (such testing of the defaults has already been performed by the Bootstrap developers and the huge number of sites that have chosen to use this framework).
As a designer, there are certain steps to consider when creating a responsive design:
If a small screen user will have to scroll down repeatedly to reach the actual content of a page or wade through enormous menus, then they are unlikely to enjoy your site – they are likely to go somewhere else!
Ideally designs should be produced for both large screen desktop devices and small screen portrait smartphones, perhaps also an intermediate tablet size. Bootstrap detects specific screen sizes so it is important that designs are created at these sizes in your design software:
It highly recommended that all designers familiarise themselves with the concepts of Bootstrap (without getting into too much of the detail initially), especially the content of the CSS and Components sections at http://getbootstrap.com/
Your site can be profiled at profiled at https://testmysite.thinkwithgoogle.com/