Category Archives: Website Management

Help Me Read Your Website

A guide to helping your visitors to read the important bits on your webpage.

There’s no easy way to say this so I’m just going to come out with it…. Your visitors don’t even bother to read the text on your webpage…….
they just about manage to scan it.

They scan over all your carefully thought out text skipping huge chunks of vital information because they have far more important things to be doing and unless something jumps out and grabs them by the eyeballs they’re closing this tab and jumping onto facebook to see how Fiacra is getting on in Finland.

We all do it, our behaviour when reading a webpage is different to printed material, our attention span is reduced and we are always searching for the bit that is relevant to us.

So how do we at least get them to read the important bits?

First we analyse the problem. How do we know they scan?

Thankfully some clever people have already done all the hard work for us. If we look at the revised F shaped pattern study 2017 by Nielsen Norman Group we can see a common behaviour pattern of  people scanning a webpage. This is the same pattern that existed in the original study 11 years prior.

The F-Shaped Pattern from a study by
Nielsen Norman Group

The F-pattern is the default pattern when there are no strong cues to attract the eyes towards meaningful information. This means users can easily miss the info we really want them to see. This isn’t the only scanning pattern but is very prevalent when no clever formatting has been applied.

We can’t manipulate this pattern to suit us  (like sticking the important words in the path of the pattern) as when the text responds to a different screen size the layout of our text will change. The important sentence on line 3 when browsing on my laptop has now moved to line 5 when I have a look on my tablet.

This F-Shaped pattern happens when these 3 things exist:

1 A web page or a section of the page includes text that has has not been well formatted well for web. For example, it has a “wall of text” but no bolding, bullets, or subheadings.

2 The user is trying to be most efficient on that page.

3 The user is not so committed or interested that he is willing to read every word.

Source: Nielsen Norman Group

The F Shaped pattern due to very little formatting on page.

What can I do to improve my text layout and avoid the F-Shaped pattern.

Point 1 you can actually do something about. Points 2 & 3 are harder or impossible to control so lets focus on point 1 and look at some clever formatting techniques.

Clever Formatting Techniques

Include the most important points in the first two paragraphs on the page.

Don’t save the best for last dish it out straight away. A webpage is not a book.

Use headings and subheadings.

Ensure they look more important, and are more visible, than normal text so users may distinguish them quickly.

This breaks up the page. The reader can categorise the info quickly.

Start headings and subheadings with the words carrying most information:

If users see only the first 2 words, they should still get the gist of the following section.

Visually group small amounts of related content.

Try using a different background colour or border. This helps the brain understand the info is related and separate to the surrounding content.

Bold important words and phrases.

This gives the reader a feel for the content at a glance. When reading a paragraph the introduction of some key phrases in bold breaks up the text and keeps the reader intrigued to read on.

Take advantage of the different formatting of links

Ensure that links include information-bearing words (instead of generic “go”, “click here” or “more”). This technique also improves accessibility for users who hear links read aloud and will help improve your SEO

Use bullets and numbers to call out items in a list or process.

Our brains can then instantly jump into list mode and again it breaks up the layout of the page.

Cut unnecessary content.

Cut the fluff and filler text. Adding in text just to fill out a page will result in none of the text being read. Remember, an image can say a thousand words!

Good vs Bad Text Formatting on a web page
Good vs Bad Text Formatting on a webpage

No more ‘F’ing pattern

Find a bit of text on your site that could do with a lift (the terms & conditions page is usually a good place to start) and apply the above. You will see that every word has more purpose and the page as a whole is more aesthetically pleasing.

You have now avoided the F-Shaped pattern and made the internet a more user friendly place.

If you want any further advise or a quick review of your site please contact us at dmac media.

Walkthrough: How to optimise images for mobile

Google now looks at your ‘mobile first’ when deciding your website ranking. One of the key ways to improve your ranking is to improve your page load speed. When improving the load speed of any webpage the first thing to do is Optimise your Images. Images are the main culprits for slowing down a web page as they generally have a large file size and often unnecessarily so. So how do we Optimise Images?

Go to Page Speed Insights

Visit and enter your website address:





Next you will see a quick overview of your page speed. By default your mobile score is shown first.


Your Mobile Speed test



Scroll down until you see the heading ‘Optimization Suggestions’. Beneath this again is the sub heading Optimize images with a link to ‘Show how to fix’



Click on the text ‘Show How to Fix’ and the page will list a summary of images below that can be optimised (reduced in size with minimal loss to quality)


Beneath this again, you can see the text ‘Download optimized image’.
Clicking on the word ‘image’ will download a .zip folder to your computer containing all the optimised imagery.





Now its time to replace all the old bulky images on your site with your new speedy optimised ones. Run the test again and see your score improve.




Note, some loss to image quality may occur but the flip side is you have fulfilled one of Google’ most basic criteria and worked towards your site ranking better in search results.


In Summary.

This is the quickest way to optimise images and keep Google super happy but there is more you can do. This process simply compresses your image as much as possible it doesn’t resize the width or height. If you have uploaded an image that is 2000px wide and it only displays on your page at 1000px wide, then you should resize this image first to further increase your page speed. Here’s a quick walkthrough on Resizing imagery for web


Of course if you need to know more, don’t hesitate to get in touch with us at Dmac Media

A quick way to resize & crop imagery without buying photoshop

So you have found the perfect image but the proportions just don’t fit with your layout!

Fear no more here’s some free tools that allow you to resize and crop imagery. No expensive software or graphic design services required!


Whether you are managing a blog, website or newsletter we all know how a layout can quickly look unprofessional with the wrong shaped images in situ.  Taking full control of how your images display is the key to a slick & professional presentation. Images should be consistent and neatly fit in the area you are trying to place them. A landscape image in a portrait sized box always looks awkward and lazy so take 10 minutes to click through these suggestions and give them a go next time your adding an image to your site.

This is a basic online image editor tool that allows you to resize and crop an image quickly and easily. No login required just click the link and get started


resizing website imagery





‘Open’ a photo to choose one from your computer. Once you have selected your image a toolbar of options appears to the left…



The first two tools are Crop & Resize. I always resize my image first and then crop it to the required dimensions.


Resizing your image.

Images that are too big will slow down your web page. Find out the largest width your image needs to be displayed at and resize down to that pixel(px) amount.



Always ensure that ‘Lock aspect ratio’ is ticked so that your image doesn’t get stretched. Don’t worry if your height is too big, we will crop this next.

Be careful when making a small image bigger as this will result in a loss of quality and may appear pixelated, better just to find an image large enough to do the job.

Cropping your image.

Cropping is the most important tool when trying to make your image the correct size. It allows you to extract a portion of the image in whatever size you need without distorting the image. For example if your website layout needs a square shaped image but your desired image is rectangular, then you can crop out a square shape and trim away the leftovers. It’s best to find out the exact image size required for your layout and just type them into the required fields.



As well as typing in dimensions you can also drag visual guides to your desired size. Have a play around with the options as this will soon become your new best friend!


Save your image

And that’s it. Click on save up the top of your screen and save the image to your computer ready for upload to your website.

Some other tools for resizing imagery

The above tool, BeFunky, is all you need for resizing & cropping but here’s a quick overview of some more online tools I recommend on a regular basis.


Shutterstock Editor

This is very similar to but offers more in terms of design and also gives you some quick templates for creating facebook covers, twitter headers etc. You have to create a free account to use the tools but this is a handy image editor for making quick mock ups.

This is a free online tool based on photoshop. It is more advanced than the tools mentioned above but offers so much more once you get the hang of it. If you are doing a lot of image editing it is worth your while learning the basics. Photopea really comes into its own when you have to quickly resize multiple images to certain dimensions.


Photo Razor.

This is a tool we use a lot in the web industry when we want to reduce the size of an entire folder of images for example a folder of product images that are all way too large to display on web. It allows you to select a folder, set the max width and click go! This is great for bulk resizing of images but not cropping

Photo Razor can be downloaded for free from softsonic here.

If you need a few quick pointers don’t hesitate to get in touch with us at Dmac Media