Why Your WordPress Website Graphics Don’t Show Up on Mobile
Mobile devices have transformed the way we engage with content and information, and the impact is evident upon glancing at a phone’s wallpaper or home screen.
A recent report revealed that mobile usage accounted for 77% of all website visits in 2021.
Although there are many advantages to using mobile devices for browsing websites, the format can be disconcerting to viewers when it comes to assessing the quality of a website’s design.
Consider the following examples of mobile-friendly and non-mobile-friendly website designs.
Mobile-friendly Website Designs
When interacting with a website through a mobile phone’s browser, the objective is to have a positive experience by having the information and content easily accessible on-the-go. The mobile-friendliness of a website is often measured by taking into consideration the following criteria:
- Desktop font size
- Visual appeal
- Menu functionality
- Responsive design
- Cross-browser compatibility
- Color scheme
- Site speed
- Text clarity
- Crisp imagery
- Mobile-friendly WordPress theme
To ensure that your website looks the same on a mobile phone as it does upon a computer, consider using the following tools.
Responsive Web Design
Responsive web design (RWD) makes it possible for a website to adjust its layout and display to different screen sizes and device types. With RWD, a web designer creates one set of digital files that can be used to construct a website that will render well on a variety of devices including desktops, tablets, and mobile phones. RWD allows a website to become more accessible to a greater number of people.
There are four distinctively different screen sizes that a browser treats as a single document—a large display (which is the default setting), a small display, a tablet, and a phone. Each of these screen sizes has a different pixel density, and the smaller the screen size the higher the pixel density. The higher the pixel density, the better the visual appeal and the more vivid the display. The pixel density of a phone is the highest, and to ensure that your website looks the same on mobile phones as it does on a computer, it is advisable to use RWD.
Colorful Icons
For a modern interface to be appealing to users, it is of paramount importance that the icons used to represent actions, features, and components are colorful and easily recognizable. The availability of high-quality, vibrant colors makes it simpler for users to discover what an application or feature is and how it works. In the next section, we will discuss the importance of using both dark and light variants of the same color.
Dark and Light Color Schemes
While we normally think in terms of black and white when it comes to colors, this is simply because the majority of colors we use daily are contained within these two hues. When we consider the variety of colors available to us it becomes evident that the sky is the limit in terms of what we can create. For this reason, it is preferable to work within a color scheme – a combination of related colors that work well together. This will help to unify the design language throughout the site and give it a polished and cohesive finish.
Monochromatic color schemes are popular due to their simplicity and uniformity. There is often a clear demarcation between the various colors used, which makes it easier for users to find their way around the site. With monochromatic color schemes, we often use complementary colors that pop against each other’s background—a vibrant orange sitting comfortably alongside a soft pink.
Appealing Typography
To create a successful and engaging user experience, the typography used throughout a site must be easy to read and, most importantly, memorable. The impact of good typography varies from providing a clearer display of information to simply making a document more visually appealing.
For example, imagine how hard it would be to read an un-calligraphed, all-caps headline laid out in rough block letters instead of the elegant, scripted appearance we usually see. The leading and the kerning of the typeface used should be adjusted to suit the size of the display used, with smaller font sizes being used upon smaller screens. This makes it easier for users to navigate complex content.
At the very least, well-designed typefaces make for much cleaner displays, and that alone can increase the likelihood of a user staying on the page and engaged with the content.
Accessible Menus
Menus are a common feature within websites and while they can look excellent and functional upon desktop browsers, the experience is very different upon a mobile phone (or tablet). A good mobile menu should be simple and prioritise functionality over appearance, utilizing white space to keep the content displayed undamaged by too much text.
The functionality of a mobile menu should be easy to discover and use. To that end, we normally expect to see three stages: (1) a list of items; (2) a small, clickable image next to each item to give the user some visual indication of what they are selecting; and (3) a small, informative text block that contextualizes the contents of the web page.
In the first instance, if we consider that the average display size of a mobile phone is 4.5 inches, the small form factor of the device reduces the amount of white space allocated to the menu – leaving very little room for images or copy. When we reduce the number of items displayed within the menu to two or three, the quantity of text is similarly restricted, leaving only enough room for an image.
The last thing a user wants upon clicking an item is to be presented with a massive drop-down menu, especially one that is not relevant to the current context. Consider limiting the number of items presented in a menu upon a click to only two or three to avoid overstuffing the limited space available on small devices.
Minimalism Versus Expansiveness
The appearance of a website can be considered “minimalist” if it is sparse, employing a limited color pallet, and uses images or graphics sparingly. When we consider the use of typography and the extent to which web content is used, we can identify that minimalism is not always the best course of action. Expansiveness is often the more effective approach, as we can see from the next two examples.
Large Font Sizes For Desktops
To achieve the best possible display upon a desktop, large font sizes are often used. Upon a mobile device, the amount of space allocated to a webpage is at a premium so large font sizes can be a hindrance. This is why we often see smaller fonts upon smaller screens.
Short But Sweet
We have all been there. Launching a website and eager to share its existence with the world, only to discover that the copy we wrote for the blog post is way too much text for the limited window of opportunity afforded by a mobile phone’s display. Naturally, we want to include as much content as possible, but this will require sacrifices in terms of readability.
In those instances, it is preferable to pare back the copy to the essentials – a necessary description of the product or service, a summary of the key features, and perhaps a call-to-action or two.
Clear And Consistent CTA
Call to actions – or what we might call a “CTA” for short – represent the verbs that a user must click to proceed to the next stage in the conversion process. Clear and concise CTAs keep your users moving forward, and ensure that each step of the way, they experience a positive and actionable experience.
Consider the importance of a well-designed CTA and the value it can provide. As web content becomes more accessible and mobile-friendly, the importance of good call to actions increases, as they provide easy access to key content.
The location of a CTA is slightly more nuanced than that of other interface elements, as it ought to appear close to but not on top of the text it represents. A CTA is a crucial element of any form, and its impact can be felt throughout a website – from increasing the conversion rate of a sales funnel to simply making an interface more enjoyable to use.