There’s no doubt that mobile Internet has grown to the point where the number of users now exceeds those using other devices worldwide.
The crossover point happened in about October 2016.
In the UK and other more mature markets, mobile Internet has increased but Desktop users are still the largest single user group at 51.5%.
Reference: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/united-kingdom
Just before Christmas 2017, Google announced that it is preparing to use so-called mobile-first indexing. This means that they will, at some point in the near future, prioritise and index the mobile version of a website in preference to the desktop version. See this link for more information: Getting your site ready for mobile-first indexing
Google haven’t revealed when they are making the switch, but this all adds up to making sure that your website is mobile ready and works properly on all devices. See more information here: Website detox for your digital presence
Your responsive web design
Most sensible website owners will opt for a responsive web design. This means that your main website detects the device that a visitor is using and presents the correct layout, buttons, text sizes and images. Page elements that work with desktop PCs and laptops will not necessarily work with mobiles and vice-versa.
Setting up the website this way means that you have one version of your content to update which is a much more efficient use of time. Therefore it’s important to test how your website performs for different devices and fixing any important issues.
Technical SEO tip: swapping to a different header image using CSS
One key part of any mobile friendly version is the ability of the site to show different images based on the device.
Recently we overhauled a client site and found the need to swap and add to the header image when someone was using a mobile or tablet. You can use CSS to swap images based on the screen size of the user’s device.
We adapted this very useful piece of code and found it works perfectly:
First create two divs, one for the mobile only image, one for the desktop only image:
<div class="desktop-image"> <img src="URL TO DESKTOP IMAGE" alt="" /> </div> <div class="mobile-image"> <img src="URL TO MOBILE IMAGE" alt="" /> </div>
Have unique classes for the mobile and desktop div.
Then in your main CSS file add this code:
.mobile-image {
display: none;
}
@media (max-width: 890px) {
.desktop-image {
display: none;
}
.mobile-image {
display: block;
}
}The @media is a rule is used to define different style rules for different media types/devices. In CSS2 this was called media types, while in CSS3 it is called media queries. Media queries look at the capability of the device, and can be used to check many things, such as: width and height of the viewport.
In this case we’re specifying that for screen sizes up to 890 px (so mobile’s and tablets). The desktop image is swapped out (by specifying display: none;) for the mobile image for screen sizes up to 890 px. By default it disables the mobile image div. This is triggered by screens sizes up to 890px.
As it’s a div you can include text and other elements for each type of device.
You can add further variations for tablets by adding another max-width but beware of over-complicating your design and having too many variations that may go out of date.
See this link for suggestions on how to place and align the divs: https://www.w3schools.com/css/css_align.asp
This code should work whether you are dealing with a HTML or WordPress site.
See this link for the original discussion thread that inspired this blog post: https://generatepress.com/forums/topic/different-header-images-for-mobile-devices/
