Client-Winning Website #4: Design Tweaks to Improve Your Weebly Website Over a Weekend

September 5, 2021

Minor changes can go a long way. Just study the butterfly effect!
​​The same goes for your Weebly website, as specific changes to the design and interface can make a massive impact on how your visitors interact. So in this part, we’ll share some tips to improve your website without needing to spend too much time on it.

Don’t Make Text Lines Too Wide for the Screen.

Yes, modern laptops and desktops have wider screens than their predecessors. However, nowhere does it say you have to occupy all that space. If the text on your website is spread wide on the screen with too long lines, it’s just going to make things difficult for your readers.

​So what are the signs your text lines are too long?

  • ​​The reader has to move their head from left to right to read one line and back to the left to read the following line.
  • ​​They carry their pupils quickly to navigate the lines and paragraphs.

​​This strategy for the desktop version of your website works well because it offers more compatibility with different screen sizes. Whether it’s an old monitor that’s more squarish or a contemporary one that’s wider, the text will be equally legible on both.

Rule of Thumb
​​On average, monitors and laptops screens are wider than they are taller (unlike mobile screens). A good rule of thumb for text placement and its width is to occupy 50 percent of the screen.
​​Ideally, you’d want the text to be center-aligned with 25 percent white space (or whatever the background/color of your website is) on either side.

​​Alternatively, you can use more space on the right and adjust the left margin for it.
​​Such a format for your website, especially the text, including on pages about us, contact forms, and blogs, will significantly help your readers read everything rather easily and quickly.

How to Correctly Use (and Not to Use) Pictures on Your Website

​​Did you know that photos make up 93 percent of the most engaging content on Facebook? Well, that’s the power of images! Visual content is more interactive for viewers naturally. However, there’s a big difference between using pictures and using them the best way. Again, the devil is in the details.

​So here are some dos and don’ts when it comes to adding pictures to your business website:

​Dos:

  • Use high-resolution pictures (It’s not 2004)
  • ​​Solid backgrounds help the image pop out more
  • Face taking much of the space with a friendly expression (whether it’s your picture or stock one)
  • ​​Facing straight towards text or call-to-action (CTA)

​Don’ts:

  • ​​Low resolution, blurry pictures
  • Overly edited
  • ​​Too much going on in the background of the image.
  • ​​Looking away from the text
  • ​​Irrelevant people or animals in the pictures
  • ​​Face taking too little space or not visible

​How to Improve Readability of Your Content (And Retain Visitors for Long)

​​When a visitor reaches your website, they don’t just start reading everything. Instead, they first skim the website, and once they find something relevant, they click on it and then check it out in detail. If they can’t find what they’re looking for, they won’t stay on the website for much longer. So part of your mission is to make content more accessible and visible by way of easy navigation.

​Does that sound difficult? These helpful tips say otherwise:

  • For body text, use at least 16px or 12-point font and if the target audience is older (say 50 and over), consider using an even bigger font for better readability.
  • Keep paragraphs brief (five lines tops) as big chunks of text are hard to read.
  • Don’t just stick with one-liners and try to bring variety in para lengths.
  • Create a visual hierarchy by using the correct headings and subheadings.
  • Clearly distinguish the heading format so readers don’t get confused.
  • Utilize bold, italics, and quotes to emphasize important parts of the text (keywords, products, names, places, etc.)
  • Use bullet points to make things easier, especially for those skimming through the content and getting the gist of it.
  • Use images to avoid visual monotony (break text blocks with relevant photos or videos).

​Make Sure to Make Text in Pictures Readable Too

Header images and blog images often have text on them, which should come under the same scrutiny as regular text.

Here are the common mistakes people make with text on images:

  • ​​Too busy background
  • ​​Insufficient color contrast making the text not pop out as much or barely readable

​​​If you’re editing text on an image, take a step back and ask yourself if that’s necessary? If you must, here’s how you do it:

  • ​​Place text where the photo seems less busy (fewer objects or no objects in the backdrop, for example, the sky)
  • Consider reducing the opacity of the image to make the text the highlight of the whole picture.
  • Use a font and color that stands out from the background image.

​Don’t Treat Your Website Like Your Canvas.

Yes, your website is yours, but don’t turn it into a canvas where you paint your thoughts and nothing is off-limits. Lots of colors. Relentless imagery. Fancy scripts. And too many CTAs are poorly placed!

That’s not a website. That’s a horror show for web designers. When it comes to a professional-looking website, keep in mind: LESS IS MORE!

​Make sure that:

  • ​​It’s easy to see what’s essential on the website
  • ​​There are no distractions
  • ​​Users can mentally filter out elements that are not body text (i.e., those elements that stand out)

​​But, wait a minute, why shouldn’t you use multiple colors, font sizes, and styles?
​​Well, too many differences in the text can create friction, which requires more attention. Not every visitor will be willing to pay that attention. So you want to make things easier for them!
​​Plus, there are psychological effects to using fonts and colors.

Recommendations:

  • Two font families (headings and body)
  • ​​Four font sizes (heading, sub-heading, body text, and CTA)
  • ​​Two colors (heading/CTA and body text)

Pro Tip: If you’re brave and confident, go ahead and use a third font, perhaps a readable font for a short script.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *