Web developing for mobile devices has a very different set of considerations than developing for a desktop. The screen size is a major consideration, because content may be arranged in columns that must be adapted to fit for different screen sizes
Reasons why a user may access a website from their mobile device:
Finding information urgently Sometimes, users need to find information immediately while away from home. For example, to make last-minute reservations, find a business's phone number, or check stock at a nearby store. Mobile devices should make sure to present the information to the user as efficiently as possible. Opening a link from a notification Users receive notifications on mobile devices, and will often open the item of interest on the same device. Push notifications, real-time messaging, and email are common sources for this. Many people will use a mobile device while relaxing, and recreational browsing on mobile devices will often lead people to new websites.
Interactive Elements
Since most mobile devices use a touch screen, links and buttons must present a clickable area that is large enough.
Hover states should not be relied upon because a touch screen does not allow for hover interactions. It is also important to show scroll indicators where content overflows. Scrollbars are not usually visible by default on mobile screens and the presence of overflowed content may not always be obvious. Most people know of the hamburger button and the bottom-aligned icon navigation bar. Making these interactive elements easily viewable needs to be considered.
Data Usage Cost
Mobile devices are frequently used when not on Wi-Fi, and users must rely on mobile data, which can sometimes be very costly, depending on the amount of usage.
Keeping the total file size of your mobile site as low as possible will help content load faster in situations where the mobile connection speed is reduced, and can potentially reduce user costs associated with data usage. Images tend to be very data heavy so try to only use them when needed and use small ones. The JPG image format allows for saving images of the same dimensions using different quality levels, allowing for a reduction in file size without a change to the image dimensions. Slightly reduced quality is rarely noticeable to the human eye but can significantly reduce the file size.
Mobile-Specific Website
Although mobile-specific websites are still used by some very large and complex websites, this approach is generally falling out of favor.
Most businesses now prefer to build and maintain a single website that works across all devices.
Websites achieve this by loading the same HTML for both mobile and desktop and then using CSS to control the differences in appearance. Mobile-First Design is becoming more common, with the desktop use case is seen as an extension of mobile, with added features that are appropriate for desktop use. The web-friendliness of a website directly impacts its search engine visibility through several factors: Mobile Responsiveness: Search engines prioritize mobile-friendly websites, as they provide a better user experience. Page Speed: Faster-loading websites are ranked higher by search engines, as they improve user satisfaction. User Experience (UX): Easy navigation, clear layout, and accessible content contribute to longer user engagement, which search engines reward with higher rankings. SEO Optimization: Proper use of meta tags, alt text, and structured data enhances a website's discoverability by search engines. What are three important considerations when developing a mobile website?
The website should adapt or re-flow to fit the available space in both landscape and portrait orientation. Increasing the touch area of buttons makes them easier to use on mobile devices. A smaller file size will save a user's data and help the website load faster.
Responsive Design Techniques
Responsive Web Design is the practice of creating a single website that can be used across a wide range of devices and screen sizes.
In responsive design, CSS is used to change the experience depending on the device. The elements on the page respond to the size of the device and the CSS may change their appearance or layout, all while avoiding the loss of usability or features. Using this approach, the same code base can be used across all devices and a comparable experience can be provided to all users. Responsive design can be completely fluid and reflow freely across all screens, or may use specific breakpoints describing the screen size where certain design rules should apply. Fluid Design
Fluid Design is achieved by avoiding fixed-size elements and using relative-sized elements instead.
Instead of using fixed-size units such as pixels, fluid design requires the use of percentages (%) or the percent of view width (vw) and percent of view height (vh) measurement units in CSS What works well with Fluid Designs? Using CSS, it is possible to allow elements to grow when the space is available, but also give them a maximum width to prevent them from growing too large. Example: A website's content area may be set to "width:100%, max-width: 800px, margin: 0 auto;" to achieve a center-aligned content area with a maximum width of 800 pixels. This code will cause the content area to use the full screen width on small screens but stop growing once it reaches 800px.
Media Queries
Media Queries are breakpoints used to determine the CSS code that should be applied for a given screen size.
Before using Media Queries, first decide if the website will take a mobile-first approach or desktop-first approach.
Note that media queries are inclusive, so they will be applied when the properties defined, such as min- and max-width, are matched by the user's device. Media query breakpoints are usually chosen so that they capture a specific group of common screen sizes, such as phone, tablet, desktop and large-desktop. Most mobile-friendly websites used a combination of media queries and fluid design techniques to achieve a good user experience. Any website that may be printed should include a print style sheet when the default style sheet is unsuitable for the print use case. 12-Column Grid Pattern
The 12-Column Grid Pattern is used to build responsive websites. The basis of it is when any screen is split into 12 columns and then each element is assigned to span a different number of columns depending on the screen size.
Mobile Web Apps
The primary difference between web apps and native apps is that web apps are used within a web browser, while native apps must be downloaded from the app store on a compatible device.
Web Apps
Web apps are more suitable for infrequent use, which is why many business websites, news websites, blogs, and other casual browsing sites focus primarily on the web experience. These websites are more likely to be accessed from mobile search results or via links from other apps, and are unlikely to be revisited on a regular basis. Providing quick and easy access is the priority for these use cases, and it would be detrimental to put the content of interest behind the barrier of an app download. Native Apps
Native apps require more buy-in from the user, because they require a person to install the app and then also keep it on their device. Native apps are more suitable for offering a higher-quality alternative to existing web apps. Use cases include video streaming services, productivity apps, and social media apps. These are likely to be accessed by users on a regular basis and so the commitment of downloading an app to their device is justified. Using a native app also gives the app access to the mobile device's system. For example, it could save files on the device, use hardware graphics acceleration, and access sensors such as the gyroscope or the camera. Technologies are available for building native apps, but it is still an emerging market. Some popular examples are Flutter, React Native, and Ionic. These tools allow a developer to build a native app using web languages such as HTML, CSS, and JavaScript, and then create a build of that app that can be submitted to a platform's app store. What are three reasons why creating a mobile-friendly website may be preferred to creating a native app?
Websites only require the user to download the content they are interested in. Native apps require developers with a different skill set for each target platform. Websites can be accessed on a wider range of devices.
Creating Mobile Web Pages
Several HTML/CSS elements and options can be designed to have the rendering adapt responsively to smaller display dimensions on mobile devices.
From a design and implementation point of view, it is important to develop models for devices of different sizes, keeping two factors under consideration:
Screen/Window Size - iPhone 7 screen has 750x1334 vertical pixels, while usual desktop windows have 1366x784 pixels Pixel Density - PPI (pixels per inch): e.g., iPhone 7 has 326 PPI, while a usual desktop window in a usual 27" 16:9 monitor 4K has 108 PPI Web Page Layout Variants
There are the Header, the Navigation Menu, the Articles (page contents), and the Footer as the main boxes. However, in a considerably smaller window (less than 800 pixels wide) other positioning is more frequently employed
@Media Conditional Formatting Rule
The CSS @media rule defines some CSS rules that are applied when certain conditions are met.
This CSS resource, also generically referred to as a media query rule, is a powerful tool that reacts to common screen changes when optimizing traditional desktop web pages to mobile devices.
In this case the @media screen rule notes that the <h1> tag has a font size of 35 pixels when the screen width is above 700 pixels, but drops the <h1> font size to 20 pixels when the screen width drops below this pixel threshold. The media query defines conditional formatting, and this is a useful tool to provide adaptability to different screen/window width sizes. The condition of a media query is summarized as an operation of comparison that results in a Boolean value (true or false) Media Queries operated based on three different pieces of information: what aspect of the media is being observed, which in this example is: "screen" (either the window of a desktop browser, or the mobile device screen itself) what characteristic of the media aspect is being observed and how, which in this example is: "max-width" informing that it is the width of the screen that is being observed, and that it is relevant when this width is smaller than or equal to the threshold ("max") what is the threshold to be observed for the characteristic of the aspect, which in this example is: "700px" informing that the condition changes at 700 pixels of width
Mobile Page Navigation and Hyperlinks
One of the most common changes from a traditional desktop web page layout and a mobile web page layout is the navigation menu setup.
It’s more natural for the user to scroll the page up and down to see information than to scroll it left and right. Clickable Elements - In a traditional browser, the use of mouse or trackpad devices to point and click provides greater precision Designing mobile web pages must provide the user larger space for buttons and hyperlinks. The CSS Padding property can be used to create enough safe space among clickable areas of the mobile web page.
Images on Mobile Web Pages
Web page performance is significantly impacted by the time it takes for some large data to be downloaded and rendered. This is particularly true concerning massive data files such as videos or images.
Web designers should create efficient mobile web pages and provide images (and videos) with the appropriate resolution to enhance the user experience. <Picture> Tag
The <picture> tag allows the definition of a source set of images with <source> tags. Based on the width of the viewport, the <picture> tag allows the media property to define which of the source images will be selected.
When using the <picture> tag according to the window/screen size, a different image will be downloaded with the following conditional formatting:
low resolution for width of at least 400px medium resolution for width of at least 700px high resolution for larger width values Is there a necessary order to include the <source> tags within the <picture> tag? Yes, the order of <source> tags matters. Browsers evaluate them top to bottom and apply the first one that matches the display conditions. Do the properties of the <img> tag affect the display of the other alternative sources mentioned in the <source> tags? Yes, properties of the <img> tag (like alt, width, and height) apply to the displayed image, whether it's from a <source> tag or the <img> tag itself. Since image size/weight is an issue, what can be done to reduce it?
To reduce image size/weight, use optimized image formats like WebP, compress images, and resize them to match the necessary dimensions for different devices. What are the advantages of the HTML <picture> tag compared to the HTML <img> tag?
The <picture> tag allows for responsive images by serving different sources based on device, screen size, or resolution, providing better performance and user experience than the <img> tag.
Testing
Gone are the days in which a company might need to build two websites—one for full screen devices, and one for mobile devices. Modern web pages must be designed for responsiveness on an end-user's screen size, be it a personal computer or a smartphone.
Unit 6: Designing for Mobile Devices
