Essay: Mobile-responsive web design

Mobile-responsive web design is the approach that suggests that design and development should respond to the customers’ behavior and environment based on screen-size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries (Smashing Magazine, 2011). This means that websites should now be designed to adapt to a screen-size, whether that be through adapting the content by cutting out unnecessary information (particularly in the smaller screen-displays) to optimize the screen-space to its maximum capacity. As desktop devices require a mouse, whilst mobile devices rely on a finger for navigation, the different mediums should be treated differently. To compensate for the difference, the responsive website should consider changing the size of their buttons, a suitable replacement for any hover functions, compressing their information in fewer words (particularly long articles) and changing the layout of the overall website to optimize the use of the screen-size. The statistics show that most of the mobile users spend less time/ interact less with long-form articles, hence it is worth experimenting with shorter content or breaking down the content into smaller paragraphs of text (Ibisbegovic, 2018).
Along with mobile-responsiveness, a website should be able to have clear communication to its target audience. Whether this be through the use of headings and sub-headings, F-Pattern Design, a Grid Layout and button size. The F-Pattern Design relies upon various eye-tracking studies for its foundational concept as the ideology lies on web-surfers reading the screen in an ‘F’ Pattern – by seeing the top, upper-left corner and left sides of the screen most (and only occasionally taking glances towards the right side of the screen) (Jones, 2012). A grid layout website design allows for the website to align neatly, consequently achieving effective hierarchy and consistency. Through the use of appropriate headings (and sub-headings), F-Pattern Design, a grid layout and suitable button-size, the website should be able to clearly communicate the purpose of the website along with the purpose of each individual page. Navigation is another vital component to the design of a website. Whether it be through the use of a navigation bar, breadcrumbs or a menu, navigation should follow the Three-Click Rule. The Three-Click Rule is the principle that navigation in a website should always allow the user to access all information in three mouse clicks.
Through the analysis of the purpose, communication, navigation and mobile responsiveness in the Coca Cola website, this report will critique Coca Cola’s website as to whether it is successful in these components.
2 Analysis
2.1 Purpose
Coca-Cola frames its website around the intention and purpose of advertising their brand, selling their drinks and maximizing their profit whilst upholding a long-term sustainable growth as a worldwide beverage brand. Segmentation enables brands to define the appropriate products for different kind of customers, however, Coca Cola doesn’t target a specific segment but rather, adapts its marketing strategy by developing new products (Vandredi, 2012). Hence, Coca Cola has not designed their website to target a particular audience. Despite this, they have incorporated aspects of their website to appeal to the age audience of twelve to thirty years, singly, their largest consumer age-group (Vandredi, 2012). Figure 2.1.1 shows the home page screen of Coca Cola’s website on a mobile device. The website displays three slides that rotate to the next panel every five seconds. The first panel communicates to the viewer other alternatives of drinking Coke and the images illustrate that the drink can be served with various fruits and berries. The overall atmosphere depicted on this slide is quite refreshing and healthy. This could indicate a change in their approach to advertisement, as in recent years, the volume of their sales has dropped (likely caused from social media raising health-conscious mindsets). From 2016 to 2017, Coke sales dropped by 2% in volume, and since, not only have the sales continued to decline, but bottled water has grown by 6.3% and surpassed Coke sales in volume (Taylor, 2018), possibly also due to the recent enunciation on health-consciousness (refer to Figure 2.1.2). Therefore, by promoting their drinks in a seemingly healthier way, the company may make a comeback in their sales and maximise their profit. In the second panel, the screen displays an advertisement for their new drink; Coke Orange No Sugar, thus, affirming the practice of their marketing strategy – to introduce new products as different trends become in demand. As their Coke No Sugar drink is increasingly becoming one of their brands most popular drinks, introducing a new flavour of this particular drink could extend their growth as a company – hence supporting Coca Cola’s purpose (Sammy, 2013). On the third panel the slide promotes one of their current popular drinks, the Coke No Sugar. By placing a ‘find out more’ button on the first two panels, Coca Cola is allowing their customers to discover additional information regarding the drink advertised, hopefully resulting in the product being sold. Through this, Coca Cola has conveyed their website purpose to their customers on the home page slide.
As their main consumers are from the age group of twelve to thirty, an audience abundantly connecting through social media, Coca Cola, specifically Coke, has extended its advertising to social media platforms for further reach to a world-wide audience. 2018 statistics show that 88% of people from the age of 18-30 in the US and 99% of the same age group in Australia are active on social media (Murnane, 2018) (Civic Web Media, 2018). Accordingly, to appeal and popularize their product to their largest consumers, they have dedicated a section of their home page to their social media handles (refer to figure 2.1.3). By doing so, the company is widening their audience on other platforms, thus fulfilling their purpose of upholding a long-term sustainable growth as a global beverage brand.
Thus, through the execution of these aspects on their website, Coca Cola has been able to convey the website’s purpose and attract all audiences, in particular – the crowd of the brand’s largest consumer.
2.2 Communication
Throughout the mobile website, a sans serif font of size 12 is used for body text (refer to Figure 2.2.1). The use of sans serif font (as opposed to serif font) is modern and clean to read. Research over the years has proven that sans-serif fonts are more legible when character size is small relative to the reader’s visual acuity (Lighthouse Guild, 2011). Hence, through the use of the sans serif font on their website, along with a comfortable font size of 12, Coca Cola has created a website with easy readability and communication to their audience.
In regard to the communication of the content, despite the website not being organised through headings and sub-headings, a grid-based layout is used throughout to communicate the different segments of the website (refer to Figure 2.2.2). The website uses the grid layout to separate the various sections on the page. Figure 2.2.2 shows that at the top of the website is the promotion of new drinks and popular existing drinks of Coke (as mentioned previously in Section 2.1: Purpose). Following this, the website displays a separate section. Though not distinguished by a heading (or sub-heading), the grid-formation design allows for clear communication as to what the content’s intention is for. The second section displays the four Coke drinks Coca Cola is selling through having a simple image of each can along with a sentence beneath to describe each drink briefly. The communication is clear, concise and uses the minimum words necessary to create a clean website front. Recent studies have shown that people spend less time interacting with websites and online articles with a great deal of words. Since, Coca Cola has restricted with only putting the bare minimal text, the website is allowing for more interaction with its potential customers (in comparison to a website with an abundance of words). By scrolling further down, the website dedicates the second half of the entire home page to their social media handles – possibly to reach out to their main consumer age-group refer to Section 2.1 Purpose). Throughout the website, images are inserted to help divide the different sections and to add aesthetics into the design. The images are of high-quality and any sliding panels (refer to section 2.1 Purpose) is done smoothly and does not take from the communication of the website. By using a grid-layout, the content is more organised as elements are stacked on top of each other, straightened and aligned.
Hence, website shows very clear navigation through a gird-based layout design on the mobile website. By using minimal text at a sans-serif font 12, the content is succinct and easy to read. Additionally, all images are of a high quality and buttons are easy to define.
2.3 Navigation
Coca Cola uses a fairly simple navigation throughout its website. In the top left-hand corner, there’s one simple menu button that when clicked, has a menu panel that slides out from the left (refer to Figure 2.3.1). The menu has a total of seven tabs, four of which represent the different Coke drinks, and the remaining three being ‘Coca Cola Journey’, ‘Careers’, and ‘Contact Us’. This simple menu also validates the ‘three-click-rule’ as all segments of the website are accessible within three clicks. The Three-Click Rule is unofficial website navigation rule that suggests that users should be able to find any information within a website using no more than three mouse clicks (Thurow, 2014). As the Coca Cola website is quite a simple website with relatively little pages to display, all the content can be accessed from the navigation bar – through the ‘Menu’ button, hence the website follows the Three-Click Rule. The navigation remains constant, consistent and follows a logical page hierarchy in the sense that all the sections are placed in appropriate areas of access, i.e., clicking the logo takes you to the Home Page, and the ‘Contact us’ page is the last tab in the menu bar. The buttons of the mobile website are of an appropriate size, as they are big enough for the space of a fingerprint. The minimal use of buttons itself also allow the website to be user-friendly, as too many buttons (particularly if they are close to one another) can be very inconvenient, particularly for people with larger fingers, as it becomes difficult to navigate to the desired location on the website. Therefore, due to the uncomplicated navigation of the website, minimal use of buttons (and maximizing the size of the buttons for convenience), the mobile website is user-friendly and easy to access.
The menu/navigation bar is accessed through a ‘Hamburger’ icon. The Hamburger icon is firmly established as the standard navigation icon in web design as they require very minimal space and gives the overall website a very clean navigation. The Hamburger icon came into popularity within web design as the smartphones began to popularise. Saving screen real-estate was the cause, and flyout menus- triggered by the hamburger icon- was the effect. With the whole world moving to smaller screened devices, the need slowly arose to get as many menu items on the screen as possible (Rand, 2019). Hence, through the use of the hamburger icon, the navigation used in the Coca Cola website is concise and user-friendly.
2.4 Mobile friendly/responsive designing
Responsive Web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation (Smashing Magazine, 2011). Generally, responsive designing consists of a mix of flexible grids, layouts, images, and an intelligent use of CSS media queries (Smashing Magazine, 2011). The use of responsive designing can be seen on Coca Cola’s website page, i.e., the menu panel on the home screen (refer to figure 2.4.1). As Figure 2.4.1 shows, the ‘products’ are accessed through a small button in the top right-hand corner on the desktop website whereas on the tablet and phone screen sizes, they are accessed through the menu bar on the left. By doing so, the design is being simplified on the smaller screens so that the space provided is optimized to its maximum extent. However, as the background slide changes between the different images (refer to Figure 2.1.1), both the ‘products’ and the ‘menu’ button become hard to see, predominantly due to the button being small in size and white (against light-coloured backgrounds) which completely defeats the purpose of responsive designing. For an effective responsive design, the ‘menu’ and the ‘product’ button should be displayed larger for customers to visually find it easily. The location of the button, however, is in a very good spot as it falls right into the corner of the ‘F’ website formation, making the button one of the foremost initial components customers see. Likewise to the ‘Menu’ button, the ‘Find out more’ button is also placed quite awkwardly and can be hard to see (depending on the image in the background). This is an unsuccessful use of responsive design as the button clutters the screen and is hard to read (refer to Figure 2.1.1). Whilst this button is helpful in finding information, the positioning and overall design is very unnecessary, and should either be made clearer and placed in a position that does not take away or clash with the image.
The use of responsive designing in the website can also be seen in the Nutritional Page. For nutritional information on the Coca Cola (original) Drink, the top tab in the menu bar in clicked. According to Figure 2.4.2, the nutritional information provided on the different screen sizes have been compressed and simplified so as to not crowd the small screen.
As seen in Figure 2.4.2, the nutritional information on the mobile screen is compressed into a table of one column, as opposed to having four columns in the tablet and desktop website designs. Doing so simplifies the information displayed on the screen – a key component in mobile-friendly design as user attention is a precious resource and should be allocated accordingly (Babich, 2016). Cluttering your interface overloads your user with too much information: every added button, image, and line of text make the screen more complicated (Babich, 2016). Additionally, by slightly altering the content to the screen size, the website is making appropriate use of responsive design. As desktops use a mouse whilst a mobile device uses a finger, the content, buttons and text have to be rearranged to compromise for the navigation variance. However, by compressing the table into one column, the information then becomes hard to read, thus Cola Cola’s attempt in mobile-responsive design was ineffective in this regard. On the other hand, whilst the desktop version has a clearer table to read with all the information labelled under four comprehensible columns, the table is not centred on the desktop display, hence killing the layout of the overall website. Hence, even though the content of the website has been designed for responsive screen sizes, the result is not very successful as the desktop view is not centred similarly to the rest of the website, and the mobile screen displays the information in a way that is messy and not clear to understand. The tablet version however, is quite well-designed as the page is centred, the information is clear to read, and the table is neatly presented on the page.
In regard to the layout in Coca Cola’s responsive design, the company has maintained its grid layout. As illustrated in Figure 2.4.3, the Coke Drinks in the desktop view are displayed in a grid-layout where the four drinks are in a row, whereas in the tablet view, the same four drinks are displayed in two rows (with two columns). As the screen size continues reducing to the mobile view, the drinks are displayed in a grid-layout where the cans are positions directly on top of the other in one long column. The lack of small buttons and needless information allow this section of the website to easily transition to the different displays whilst maintaining consistency and unity within the website. By using a grid-layout, the website is making it easier for potential customers to navigate through the website. Grids add structure to a design as they lead to rational standardized systems that help people absorb the information the company is trying to communicate (Bradley, 2013).
Hover functions throughout the desktop website have been used sparingly. Due to this, the hover functions have not poised any drastic differences in the mobile website that would affect the navigation on a touch-screen device. Throughout the entirety of the website, hover functions have only been allocated in one area of the website and use of the hover action has been kept very minimal. Figure 4.2.4 shows where the hover function has been used throughout the website. As the images illustrate, the Coke Can increases in size very slightly when the mouse is hovering over it (green can, right). As opposed to when the mouse is not hovering, all four cans are the same size (right image). In the mobile and tablet displays, the Coke Cans are displayed at the same size, and when clicked, take you to their nutritional page. Thus, meaning the hover function is removed without any equivalent replacement in the touch-screen displays.
Throughout the desktop, tablet and mobile versions of the Coca Cola website, as illustrated through the Figures above, numerous images are used. Often websites will alter the images in some form when transitioning from a desktop website to a mobile website. This would be done to optimise the space of the screen and to simplify the display, particularly in the mobile display where the screen size is considerably smaller. In the Coca Cola website, the images throughout the website have not changed amongst the transition from desktop to mobile. To compensate, the images have been cropped so to fit the screen. As observed from Figure 2.4.2, the image in the top half of the screen has not changed but has simply been cropped to the appropriate screen-size. Therefore, the website has kept the website very consistent throughout the different displays and has showed only very minimal changes in regard to hover functions and images.
3 Conclusion
Through the analysis of the purpose, communication, navigation and mobile responsiveness in the Coca Cola website, this report critiqued Coca Cola’s website as to whether it was successful in these components. As stated previously, the purpose of Coca Cola’s website was to advertise their brand and to sell their drinks, ultimately maximising their profit whilst upholding a long-term sustainable growth as a world-wide beverage brand. Communication of the purpose through the website has been done through a grid-based layout to separate the various sections of the website. Through this, the website has also achieved an aligned and straightened look, allowing for the website’s content to be stacked neatly. By placing a hamburger styled navigation icon in the top left-hand corner, the website abides by the F-Pattern design and the simplicity of the menu vindicated the principle of the Three-Click-Rule. Whilst the website successfully incorporated concepts of a clear purpose, communication and navigation, the website’s responsive design is quite lacking. Specifically on the desktop version of the website, the background images used, clash with the ‘Find Out More’ button, consequent to the button having a low opacity. Following this, the page with the nutritional information on the desktop website is not centred, thus not aligning with the website’s grid-layout scheme.
The website used minimal use of the hover function, therefore the responsive mobile design has no substantial differences on the mobile design that would affect the navigation on a touch-screen device. Images have been kept the same throughout the website on all display sizes, hence creating a sense of consistency within the website.
A recommendation for the website would be to redesign the buttons as it clashes with the background. In regard to the ‘Find Out More’ button on the homepage, though the size and position of the button is adequate, the button should have an opacity of 100% to counteract the inability to read it clearly due to the background images. Furthermore, all the pages within the site should be aligned and centred to follow the grid-layout scheme and to keep consistency within the website. Doing so would result in an overall cleaner appearance to the website. To follow the F-Pattern principle in the website (distinctly on the desktop), the ‘products’ and ‘menu’ button should be combined. Not only is this already done on all the other responsive designs of this website, but by doing so, the website would follow the F-Pattern Principle. As seen in the mobile view of the nutritional page, though the tabled information is compressed to optimise the screen, the table has become hard to understand. In response to this, the full table should be displayed on the mobile page for easier clarity regarding the information.
Hence, through the analysis of the Coca Cola website, it is concluded that whilst the website is satisfactory in regard to the purpose, communication and navigation, the website’s desktop to mobile responsiveness is quite flawed as elements are not aligned, buttons are clashing with the background and information is compressed in a way in which is hard to comprehend.