Abstract
The growing use of mobile devices for e-commerce, news, social media, and web search has created a need for mobile-friendly web sites. Mobile sites are designed to accommodate the physical limitations of mobile devices such as small displays, touch screens, and slow download times. Mobile-friendly sites typically display content in a single column formatted to use the full screen width, utilize vertical scrolling, use smaller images, provide larger touch targets such as buttons and links, and utilize space saving navigation techniques. The objectives of this article are to describe the attributes of mobile friendly web sites, overview current popular mobile design techniques, and discuss their strengths and weaknesses.
TopPhysical Limitations Of Mobile Devices
In this article the term mobile device is used to refer to smart phones and tablets. Desktop device refers to desktop computer and laptops. The two types of devices differ primarily by screen size and input methods. Mobile devices typically have smaller screens than desktop computers and cannot display as much information. Web designers can accommodate smaller screens by arranging content in screen-width columns that can be conveniently viewed with vertical scrolling. Mobile-friendly sites frequently display less information, smaller images, and use more space efficient navigation. For instance, navigation options that are fully visible on a desktop computer may be put into a “hamburger menu” which the user may then expand to display navigation options (Moyers, 2018).
Mobile devices also use touch screens for user input rather than keyboards and mice. Touch screens require that tap targets, such as hyperlinks, buttons and forms, be large enough that a user can tap it with a finger. They must also have enough space around them so that users can tap individual items without accidently selecting other tap targets (Brooks, 2017).
Figures 1 and 2 compare the same web page (https://huxley.wwu.edu/) in desktop and mobile formats. The desktop format (Figure 1) displays a large image with navigation menus both above and below the image. The five navigation options in the top menu and eight options in the bottom menu are all visible. The page content (not visible) uses both two and three column layouts.
Key Terms in this Chapter
Client-Server Network: The internet is network of connected client and server computers. Clients are the devices used by web users to make web requests. Client devices include desktop and laptop computers, tablets, and mobile devices such as phones. Web clients also include smart devices such as security cameras, appliances, lighting systems, and HVAC (heating, ventilation, and air conditioning) systems. Servers are computers that respond to web requests. They are typically identified by unique domain names, such as Google.com or Amazon.com.
JavaScript: A programming language that is executed by web browsers. Web developers can use it to identify device attributes, change page layout and styling, make web requests for images and cascading style sheets, and create responsive navigation. It is the only programming language used by all web browsers.
HTML: Hypertext markup language is a scripting language that describes page content to web browsers. It is used to create navigation elements, paragraphs, display images, create hyperlinks, and form elements such as textboxes and buttons. It is styled using CSS (cascading style sheets).
World Wide Web Consortium (W3C): The primary standards organization for the world wide web. It consists of over 475 members, including businesses, universities, governmental entities, and nonprofit organizations. Its members propose and adopt standards for browsers, HTML, CSS, web requests, web responses, security, and many other essential features that provide interoperability across devices on the internet.
Cascading Style Sheets (CSS): A standardized scripting language used for styling web content. CSS is interpreted by the client’s web browser. Web designers use it to specify web page layout, colors, fonts, backgrounds, spacing, and other stylistic features. The most recent standard, CSS 3, includes a feature called media queries which allow web designers to specify styles for specific device characteristics such as screen height and width, orientation (vertical or horizontal), and resolution. Web designers can use media queries to apply different layouts and styles based upon device characteristics.