Updated 20-Sep-2023
This is my attempt to give a good set of guidelines based on two sites: Migrationology and Bellroy. What these sites do well and what they do poorly will be discussed, delivering a list of what is important. This post builds on the discussion in Multiplatform Web Design.
Summary of Mobile Web Best Practices
Here is the list of derived best practices:
- Must deliver sub 2 second asset download and sub 4 second rendering. Actually, twice as fast is the desired goal.
- Images need to be optimized for mobile (in order to achieve speed goals)
- Note that this does not necessarily mean that images cannot be dynamically resized, just that they should not be enormous
- Image sliders should not preload images beyond the first one
- Image thumbnails for clickable content elements can be a fixed size in both desktop and mobile
- Fluid design is great for a single site that accommodates various mobile sizes as well as desktop, using one page for both (no separate mobile site needed)
Scalable, Fluid and Responsive Design
For the design geeks, tl;dr this is about three different implementations of mobile friendly: scalable, fluid and responsive design.
- The first -- Scalable Design is indeed the simplest, which relies on the pinch-and-zoom abilities of mobile (touch) devices.
- The second -- Fluid Design is what we are mainly discussing in this article, essentially a self-scaling design, with some images static in size (and whose number-of-images-per-column changes based on the width of the available screen), and some images which are resized based on available screen.
- The third is -- true Responsive Design which essentially can resize buttons and transform columns based on media-queries (all CSS goodness).
Site Assessment
First off these sites are good brand sites which address mobile.
The first site, Migrationology, looks great from multiple screens using a combination of features. However, it is enormous in terms of image size and download speed. The experience is only good for people with extremely fast Internet access, which is kind of crazy since the site is about food in (mostly) developing countries, which do not have such high speed access. The dirty little secret? This is not for people traveling, but those who are specifically (or at least currently) not traveling.
The second site, Bellroy, also has a nice mobile/multiple screen effect, though there is a bit of a dissonance. Very recently the Bellroy site changed, and what used to be a more clear-cut navigational options became more of a mess requiring a lot more clicking to figure out where one is and what to do. On mobile, the charcoal background color on some pages looks great but on larger screens the look is less than desirable, strangely enough.
The takeaways are to focus first on some basics such as load time and clear navigation. This is the skeleton and the basic heft of the site that should, like a well-trained athlete, clearly indicate what kind of performance and functionality exists for the visitor.
Site redesigns should deal with all elements and the entire site, not just tweaking the home page with more small images to view. Also, navigation should not be a surprise, but rather clearly meet expectations.
The quality of logo and images on the Bellroy site in contrast with the cartoonish Migrationology logo should also be instructive. Both sites/brands have good, unique, brand-worth site names. Get that name out in front in a clear, crisp, obvious way. Bellroy also has an iconic owl design (which frankly doesn't connect much with the brand name or what is for sale). Migrationology has the backpacker with a giant spoon, a good character, but not rendered clearly (a thin outline and green on black text).
Checklist of Mobile Web Best Practices
- Get the Logo, Fonts, etc. working first (low-hanging fruit)
- Get a clear navigation for the site, not too much, not too little, well-worn paths
- Put the site on a diet, slim down image weight (without sacrificing quality), put plugins on a diet, anything with little value, remove or refactor
- Then start with Mobile-Friendly site using Scalable Design principles
- After, move into Fluid Design, and really look at metrics to see if the user experience is enhanced
- Add in Responsive Design to make the site sing across all interfaces and interactions
Remove All Sliders
Sliders are bad (and unnecessary, there are many other options) with the simplest alternative being a Hero Layout (which is now common, and done poorly, but by itself can work well).