The nuts and bolts of web design normally boil down to what looks best when a visitor views your site. The problem is, there are different platforms where someone can look at a website: a home PC, laptop, tablet, mobile phone, or even an IOT (Internet of Things) device like your refrigerator. It is important to include all of these form factors into design plans, but the most important is mobile.
In mid-2019, Google started switching the indexing of new websites so that it is based on the appearance in a mobile browser. The entire web will be switched starting in September 2020. What this means is that all ranking and indexing from Google will be based on the mobile version of your site.
Based on this information, for the best possible search results, it is imperative that your site is optimized for use on mobile devices.
Responsive Web Design for Mobile
When web browsing on a phone was just beginning, webmasters would create different versions of pages that would display when loaded in a mobile browser. The much lower speeds and rendering power back then forced developers to pare down the amount of graphical content and scripting on a page so they wouldn’t take forever to load.
While this practice is still being used, mobile versions of websites do not need to be as limited anymore. Smartphones and broadband technology have come a long way to create a faster and better user experience, but mobile loading is still slower than desktop in most cases.
Instead of serving completely different code based on the browser a web page is viewed on, Responsive Web Design (RWD) is applied which keeps the same HTML code, but lays out the content based on the device it is loaded on. This ensures that content viewed on different devices is always consistent, and when edits need to be made they only have to happen in one place.
A perfect example of RWD is when you are using a tablet or other large handheld device. The layout is based on the width of the screen, so you may see things laid out differently when holding the tablet vertically vs. horizontally. All the same content is still there, but different parts like navigational columns on the sides may appear on the page when viewed one way, but made into a clickable expandable menu when held another.
Mobile Site Speed
With site speed becoming a ranking factor for Google, based on the issue that searchers demand better performance from mobile sites, it is important to serve the best page you can in the least amount of time. The longer a page takes to load, the more likely it is that the visitor will leave your site before ever interacting with it.
Images for Mobile
One issue with Responsive Web Design is that since the same content is being loaded for each device, a large image that spans the screen of a desktop monitor at 1920 pixels will load easily over wifi, but if that same image was loaded on a mobile screen it would take much longer and drag down performance.
On a mobile device, it is recommended that you keep image sizes below 100KB, which can be difficult if serving the same image to a large screen.
To get around this, developers often rely on server resources to provide a smaller image for smaller browsers. This could be performed by installing a 3rd party package on your hosting server, hosting images in a completely different location, or by changing your CDN settings to let them resize on-demand.
Here is an example showing instructions for enabling image resizing on CloudFlare.
Image Optimization in WordPress and Other CMS Platforms
WordPress and many Content Management System (CMS) have their own solutions to optimizing images for display on mobile devices. While their overall server process may be different, they generally work by copying the original uploaded image and generating multiple copies in different sizes. The largest image will be displayed on large screens, and the smaller sizes on smaller screens.
While this sounds like a great solution, it does not take care of all image size issues. The file sizes of the generated copies are based on the original image, and if that image is of an immense size, the smaller copies may still be too large for a good mobile experience. For instance, we have seen clients upload images around 3MB, and the reduced versions served to mobile browsers still float around 1MB.
WordPress has additional options for image optimization. There are some excellent plugins that can reduce file sizes either when an image is uploaded, or in a bulk process for images already on the server. Some examples of these plugins that we have had good experiences with:
At the end of the day, the best process to put in place is one that begins with image optimization before uploading to your website. This can be performed with image editing software like Adobe Photoshop or GIMP on your computer, an online resource like Squoosh, or a server extension like ImageOptim API.
The large amount of code that these resources require has to be parsed within the browser, and this can take up valuable computing time that could be used to paint the actual page. In addition, if called toward the beginning of the HTML code and not configured properly, these become what are called “Render Blocking Resources.” When the browser starts to read that code, everything else on the page has to wait for it before it can render.
Here is an example of a warning note from Google PageSpeed Insights:
The mobile experience has become standard in our daily lives, and we need to do our best to reflect that in our websites. Designing pages intelligently to load based on the device that the site is being viewed on is the first step, and making sure the page loads quickly helps both in your search engine rankings as well as customer retention.