Go Back

5 Tips for a Mobile-Friendly Website

Jul 20th - 3min.

5 Tips For a Mobile-Friendly Website

Of every three minutes spent on the internet, two are spent on a mobile device. Making your blog or website mobile-friendly is the new standard. Discover how you can do this in this blog!

Of every three minutes spent on the internet, two are spent on a mobile device. Making your blog or website mobile-friendly is the new standard. Discover how you can do this in this blog!

Mobile user experience - more important than ever before!

In general, the UX of customers is extremely important to get a nice spot in the list of search results. Make sure that you take the following elements into account:

1. Responsive frameworks

Responsive web designs are becoming increasingly important for your SEO ranking. Do you want to know how your site is performing on mobile? Then take the mobile-friendly test from Google.

If you work with a responsive web design there's only one version of your website. The design adapts itself to every device, in this way Google only has to index your website once. More about helping Google and making your website faster in “Drastically Improve Your Website's Loading Speed ​​in 10 Steps”.

2. Touchscreen readability


On the mobile version of your website, buttons must be large enough to easily click on them. According to WooRank, the average area that a fingertip occupies is 48 pixels high and wide. Also, leave enough space between different buttons. Give them at least about 8 pixels of space.

Font size

Use a font size of 12 pixels for at least 60% of your text. If necessary, adjust the structure of your website and menu to improve the browsing experience of visitors.

3. Optimize images (for mobile)

Ask yourself if you really need all those visuals?

Can't you replace your GIF with an animation that can be placed in the CSS code? Avoid heavy JavaScript frames and delete images if they aren't necessarily to convey your story.

Adjust the file format of your images

Go for WebP in the first place, this format ensures a large compression + 30% without compromising on quality. Or choose one of the following options: JPEG for normal photos (without transparency), SVG for scalable illustrations and PNG for images with a transparent background.

Compress and resize images

Delete the metadata, such as the time and date of photos. Experiment with the quality settings of them and see what it can mean for their loading speed.

Test different charging techniques

Lazy loading is a technique where photos are placed under the fold and are only loaded when needed. Using placeholders of progressive JPEGs can also help you improve the speed of your site.

Example of a progressive JPEG

Photos with a resolution of 72 dpi are sufficient for the web, with Photoshop you can easily reduce the resolution of images. As well, the free Image Optimizer tool can help you optimize your images for online use.


Provide your website with a favicon. This is the icon that you see in a tab before the URL.

4. A clear navigation bar

Provide your design with a simple navigation bar on your site without too many options. Tell the visitor what his next step should be, let them do what you want them to do.

5. Headings & CTA's

Give your web pages attractive headings. Implement CTA's in visible places. Take a look at “How Does the Ideal Call To Action Look? [12 Points of interest] ” to design converting call-to-actions.

In snack format

  • Work with responsive web designs: one design that adapts to every device.
  • Buttons must be about 48 pixels high and wide. Leave 8 pixels of space around your buttons.
  • Set your font large enough: 60% must be at least 12 pixels.
  • Delete images where necessary.
  • Compress and resize your images. Tools such as Image Optimizer can certainly help you.
  • Experiment with different loading techniques.
  • Make sure your website has a favicon.
  • Guide your visitors through your website with a clear navigation bar.
  • Give your pages attractive headings and add CTA's to convert users.