I was recently working with a client to make their website mobile friendly. When the process was over, they asked for some pointers on how to keep making their content mobile-friendly moving forward. This is such a great question (and something that not everyone who updates a website always considers) that I wanted to share some of my tips for continuing to create mobile-friendly content.
Format your text for easiest reading
The easiest thing that you can do to keep your website and content mobile-friendly is to format your text in a way that is easy for users to skim. This means to write is short sentences and paragraphs, with the use of headings and lists to make important ideas stand out.
Speaking of important information, keep the most important information at the top of your blog posts or articles. You have a very short period of time to actually grab someone’s attention before they decide whether or not to stay and read your information, or to go back and find it somewhere else.
It’s not just formatting your text into short sentences and paragraphs that you need to take into account. When it comes to readability, it can be hard to see the same text in different lighting situations; also, think about how easily those who may have some vision impairments can read your content. If you’re changing the colour of any text, try out your background and text colours in this handy colour contrast check. You ideally want your contrast ratio to be above 4.5 for good readability.
Prepare images for viewing on mobile before adding them to your website
The size of an image file can have a huge impact on how mobile-friendly your website is; there are a few things that you can do to ensure your images aren’t negatively impacting your users’ experience on your mobile website.
Crop and resize your imagery in an external editor, not in the pages of your website. If your image is 2000px x 2000px, resizing it in an html editor doesn’t actually make the file physically smaller – which means that if a user has a slow connection, the large photo could cause your website to take a really long time to load. Plus, if your user accessing your site via a data plan and not over wifi, you don’t want to be the cause of your user potentially exceeding their data plan limit!
Tools like Photoshop or Gimp can easily crop and resize your images.
An additional step that can really help to make the file sizes of your images smaller is to optimize them using tool like TinyPNG, TinyJPG or WP Smush. These will make the file size actually smaller without compromising the quality of the image.
The next tip relating to images may cause some controversy, but it’s something that I feel very strongly about. For best social sharing, a lot of users will place text on a sharing image. We’ve all been guilty of it, especially when it comes to Pinterest. But I would argue not to go this route, as text on images isn’t a habit you should get in to – especially when it comes to high resolution and retina devices. Text used in images is not as clear or crisp on higher resolution devices and can lose some of that “wow” factor.
Be conscious that your user may be using a very slow connection on a mobile device
One key thing to remember is that the more times a webpage needs to make a request to a server, the slower that page will load. This includes any images, videos and scripts that you have included on any page (even Google Analytics).
When you do add items that require a call to your server, one way to make your website appear to load faster for your users is to load any images below the initial view of your page. If you are adding additional scripts to your website, adding them right before the </body> tag will also help it appear that your webpage is loading faster.
Getting a mobile-ready website is only the first step – once you have one, you’ve got to keep thinking about how content you create going forward is optimized for your mobile users.
Image by Sebastiaan ter Burg
