Responsive Sites
Responsive sites are crucial in this day and age. People across the world now access websites from phones and tablet as well as desktops. The screen size of these technologies varies widely from massive retina PCs to tiny mobile phones and everything in between. Therefore it is important to cater a website to suit every user as if it is unreadable, the audience will simply leave.
A responsive site is designed so that it changes once a certain “breakpoint” is reached. This is based on the width of pixels on the device viewing the site. This means that as a device passes a breakpoint set, the site design changed to accommodate the size of screen given. This makes sites more usable, particularly on smaller screens, and prevents side scrolling.
In order to find the standard sizes, I looked at a website building framework created by Twitter. According to Bootstrap (n.d.), the standard size for a mobile site is 480px and below whilst the standard size for a desktop is 980px upwards. They do go on to define different sizes for tablets as between 768px and 980px with smaller sizes/ large phones as between 480px and 768px.
Other sources, such as 1stWebDesigner (n.d.) argue that tablets should be sized between 768px and 1024px. The 1024px limit implies that most laptops and desktops today now have a standard size of 1024px. This convention can also be seen on Adobe’s software as the minimum standard web size (see image).
A good example of how a layout can be changed to suit the user is from BBC News. Their modular design adapts to fill the screen and still be readable. The navigation design also adapts to become much more simple. This allows the user to use the site with ease and not need to side scroll to navigate or mean that the menu uses up half of the screen space.
1stWebDesigner. (n.d.). The Ultimate Overview of Responsive Web Design Breakpoints. [online] Available at: https://1stwebdesigner.com/responsive-design-breakpoints/ [Accessed 14 Oct. 2018].
Bootstrap. (n.d.). Scaffolding · Bootstrap. [online] Available at: http://getbootstrap.com/2.3.2/scaffolding.html#responsive [Accessed 14 Oct. 2018].
