Best of 2021 – How to Scale Your Website to Perform on Mobile Devices

As we head into 2021, we at DevOps.com wanted to highlight the most popular articles of the year. Here is the sixth installment in our Best of 2021 series.

We all surf the internet mostly on our mobile devices because they are easy to use and easily accessible. The vast majority of mobile device users make online purchases and pay utility bills using these devices. A recent study by Forrester titled “The Digital Business Imperative” showed that in a three-month period, 43% of US bank customers used mobile phones for online banking.

The growth in the volume of online business transactions via mobile devices has been significant year after year, encouraging companies to realize the importance of creating websites and e-commerce sites that look, feel, work and perform identically on computers as well as smart mobile devices. However, most of the time, the experience of browsing a website on a smartphone is not the same as the experience of browsing a website on a computer. Understand the underlying reasons for this diverse behavior across different platforms to be able to develop websites that scale effectively/smooth across different devices.

Web pages typically consist of one or more of the following components: header and footer, main content (text), images, forms, videos, and tables. Devices differ in screen dimensions (length x width), screen resolution (pixel density), computing power (CPU, memory), and operating system (iOS, Android, Windows, etc.). These differences contribute significantly to the overall performance and display of web components such as images, videos, and text across different devices. Another important point to note is that most mobile phone users do not always connect to a high-speed network; Hence, web pages must be carefully designed so that they also work effectively on low bandwidth connections.

The most annoying issues with websites on mobile platforms

There are a variety of issues with website performance and scalability across devices, we will now discuss a few of the important ones as listed below:

  • Websites do not automatically adapt to different screen sizes. Some sites are designed to format changing screen sizes, but their elements may not resize automatically. This may cause the site to automatically adjust itself to different screen sizes, but the items inside may look too large on smaller devices. Some sites may not be designed to adapt to changing screen sizes, which makes the elements of these sites appear too small on devices with smaller screens.
  • Websites with a lot of content for mobile devices. Some websites load with more content just to fill the empty space when you open them on your desktop. Websites developed without the awareness of mobile phone users in general fall into this category. These sites take more time and bandwidth to load and if the pages are not designed appropriately for mobile devices, part of the content may not appear on the devices.
  • Sites that take a long time to load images. Websites with too many images or heavy image files will likely take a long time to load if the images are not optimized during the design phase.
  • The data in the tables looks very complex and takes a long time to load. Many websites present data in a tabular manner (for example, comparison of competing products, airfares from different travel booking sites, flight schedules etc.), and on mobile devices these tables look very complex, difficult to understand and/or take Too long to download.
  • Websites hosting videos do not play on some devices. Not all video formats are supported by all mobile devices. Websites sometimes host media that requires licenses or Adobe Flash and certain other players that some mobile devices may not support. This causes frustration among the users and an overall bad experience with the site.

Design your websites to adapt to different devices

All common issues with mobile websites can be addressed with proper design that takes these issues into consideration. The most highly recommended practices aremobile firstApproach. When working with many constraints such as screen size, bandwidth, etc., the need to focus on the right quantity and quality of content should be a high priority. The Mobile-First approach places content as the primary goal and aims to produce a design for the smallest devices to ensure Although it only has the most basic features, it addresses the design challenges of mobile devices first and then makes it easy to gradually improve the design for other, larger devices.

Here are some best practices to keep in mind when designing websites that you intend to scale on different devices.

Adapt to any screen size: At a minimum, the web page needs to be scaled to fit the screen size of any mobile device. Nowadays, mobile devices come with very high screen resolution. The pixel density on mobile devices is much higher than that of desktop screens. It is therefore important to format the page to match the width of the mobile screen in device-independent pixels. Handles the “meta viewport” tag included in The HTML document has this requirement.

The meta viewport value as shown above helps format the entire HTML page and display content to fit any screen size.

‘Content is King’: Web designers should remember that the content should determine the design of their website and not the other way around. Websites with too many elements like tables, forms, charts, etc. get tricky when you need to scale them on mobile devices. Developers end up hiding content for mobile users and as a result, the desktop and mobile version of the website become inconsistent. The goal of the design should be to focus on the basic structure and content rather than incorporating the decorative elements on the website. As recommended by the Mobile-First methodology, designers should ensure one version of content for both desktop and mobile users. So web designers must carefully consider, craft and improve the content so that it not only meets business goals but also attracts mobile users. Content that does not appear in the mobile version may not need to appear in the desktop version.

Responsive Images. The design should take into account small portable devices operating in areas with low signal strength. Large images and complex graphics are not suitable for mobile devices operating in such conditions. Designers need to make sure that images used in websites are optimized for different widths of frame sizes and pixel densities. The recommended approach is to use a “resolution switch”, which can instruct the browser to select and use an image file of an appropriate size depending on the device’s screen size. The image is swapped according to the resolution using two attributes: srcset and sizes. With these attributes (included in the code snippet below), the browser will use the device rendering to determine the most suitable media state available in the list of sizes, choose a slot size based on that condition and load the image referenced into the srcset closely matching the chosen aperture size.

For example, if a device with a 320px width port loads the page, the media state (max-width: 320px) in the list of sizes will be true, so the corresponding slot 280px will be chosen. The first image included in the srcset (elephant-320w.jpg) has a width that is closest to this slot. Browsers that don’t support switching resolution will display the image listed in the src attribute as default. This approach not only selects the right image for your device’s viewport, but also prevents the loading of unnecessary large images that will consume a lot of bandwidth.

Response tables: The world is getting more and more data dependent. Bringing critical and time-sensitive data to people’s mobile devices gives end users a lot of power and freedom to make decisions. The challenge is to present the data to the user in a way that is easy to load on a mobile device and to read. Data often needs to be presented in tabular form, but when spreadsheets become too large and impractical, it can be frustrating to interpret them on a mobile device with a small screen. The screen can be much narrower than the width of the table forcing the user to zoom out just to fit the table on the screen, making the text look too small. Similarly, the screen can be much larger than the width of the table, forcing users to zoom in to view the data, requiring continuous vertical and horizontal scrolling. There are several ways to build responsive tables, the most important of which will be mentioned below:

The table will not be treated as a table since the columns will be converted to rows. Each column will be sized to be the same width as the screen to prevent the need to scroll horizontally. With appropriate colouring, (one row of data) each row of data can be distinguished from the other. In this case, for each “cell” the generated CSS content (:before) must be used to apply the label so that each piece of data can be clearly identified.

The second method is to present data in two forms based on screen width: 1. Chart form in narrow screens and 2. Full table form in wider screens. If a mobile user wants to click on the chart to see the full table, the method discussed in (a) can be used to show the data in tabular form.

The third method is to show a small graphic in a narrow screen to indicate the presence of a table, which with a click of the user will allow the table to expand and display.

Always playing video: Video files are usually not played on mobile devices if their formats are not supported or if they need a special video player to play the content. The recommended method is to use standard HTML5 tags for videos and animations. The video element in HTML5 can be used to load, decode and play videos on your website. Video production in multiple formats to suit different mobile platforms is highly recommended. It is also important to size the videos appropriately so that they play within their containers.

The example below demonstrates the use of <عناصر التحكم في الفيديو> Where marks allowThe developer has the choice of several different types of video formats (indicated by the genre element) from which the browser can choose. In this approach, switching to the correct format occurs on the client side and only one request is made to the server. This reduces network latency and allows the browser to select the most appropriate video format without having to download a video first to check its format.

The videoWidth and videoHeight properties of the video element help determine the encoded size of the video. Video dimensions can be controlled using JavaScript or CSS. Maximum width: 100 percent helps limit the size of videos to fit the screen. CSS media queries can be used to set the size based on the dimensions of the viewport. There are also many JavaScript libraries and plug-ins that can be used to maintain the aspect ratio and size of videos.

All things considered…

With the exponential growth in the number of mobile phone users, smartphones and tablets are regularly used to surf the web and conduct business transactions. Online business has become the primary business channel for many companies around the world. Thus, it is important for companies to develop websites that work and scale well on mobile devices to enhance the mobile user experience and mirror the functionality and performance of websites on desktop computers and large screens.

The “mobile first” approach helps web designers create sites that perform well on small mobile devices. Web designers need to be careful about selecting appropriate content that meets business requirements, given technical limitations of hardware, such as screen sizes, processor speeds, memory, and operating conditions (for example, weak network signal strength). Care must be taken to ensure that images, videos, and data served on mobile devices are designed to be responsive. Designers also need to be sensitive to breakpoints, touch targets, etc.

A well-designed website that works and scales well on a small device can always be incrementally optimized to work on larger devices.

Originally published in 2018.

– Sridhar Asvatanarayanan

Leave a Comment