Simple fixes for BIG issues on your website
When it comes to website design, there some best practices to follow. There are numerous reasons for these best practices, including:
-
Looking professional
-
Keeping the load times of your website quick (ie not slowing down your site)
-
Keeping website engagement high
I have created a list of some of the issues that can come up when these practices are not followed, the issues are listed below:
1) Some of the writing on the website looks funny
This can be caused by not removing the formatting of your text before adding it to your website.
Like me, you may write your blog posts in a different program then in your website editor. When this is done, there is often styling left on the text that you created. This becomes an issue because the text may not appear correctly on your website. This is often an issue if you need to copy text from another site and paste it into your website. Luckily this is very easy to fix.
For Squarespace users:
After adding a text block into your blog post or website page click to add your text. Do not just paste your text into the block but instead click the clipboard icon. A separate box should pop up for you, all you have to do is paste your text into this box. After you save it the text should be free of all formatting. Alternatively, you can use the keyboard shortcut of Shift+Comand+V to paste the text as plain text (This also works in Gmail and other similar text editors as well).
For Non-Squarespace users, if you have large amounts of text, you'd like to remove the formatting from:
On your computer, there should be some form of Basic text editor. On my Mac the program that is used for this is called Text Edit. Paste text into here. Go to the menu at the top of your screen under format, go to the item called "Make Plain Text." Any text that is added in now will have no styling to it. You can now paste this plain text into whatever platform you are using it for.
Before
Pinterest bio is pasted with H1 format effecting it.
After
Pinterest bio now has no formatting effecting it.
2) My photos don't look good on my website
When you begin working on your website yourself, it becomes clear up pretty quickly if you're saving photos too small for the size they'll be displayed at they will appear stretched or pixilated (when it looks like the entire photo only contains 12 pixels, i.e. blurry and block-like). To compensate for this issue, many people often upload pictures that are way too big for the website. The main problem that comes from this is slow website load times. This includes uploading a huge photo to Squarespace and then using the editors to make it smaller.
For everyone:
Make sure the photo you want to use is big enough. You should not try to display an image on your website larger than the photo is. You will have the same issues as mentioned previously. To ensure the photos large enough use one of the following methods:
If using a Stock Photo (or free stock photo) look at the dimensions on the website you're downloading it from.
Have you read my blog post on 25 free Stock Photo websites for your Creative Business?
If the website does not have the dimensions or it is your own photo:
Many computers will show you the photo size right beside or underneath the photo in your downloads folder, however, if you are unable to see the size, right-click on the photo and select "Get Info". In the box that opens under "More Info," you can see the dimensions of the photo listed.
Open your photo in Photoshop and go to "Image" > Image Size and there you will be able to see the image size of your photo. Side note: if your image is displaying in a different format change the settings to pixels.
Image that is not properly sized.
Image that is properly sized.
3) I'm not getting the website engagement I was hoping for
This problem may be caused for multiple reasons. I suppose the solution to getting better engagement on your website my not be a simple one. However, seeing how people are currently using your website and engaging with it should give you an indication of what some of the roadblocks on your site are. The solution is a program is called Hotjar.
Using Hotjar allows you to watch users interact with your website. This can tell you a lot about how your website works (Or doesn't work) for the user.
The free version of hot jar allows you to monitor up to 2,000 page views/day. I have to admit it's kind of creepy but awesome been able to creep and watch people interact with my website. My favorite tools are the Heat Maps (see where the most clicks are on your website), Scroll Maps (see how far the average user scrolls on your pages) and Visitor Recordings (see an actual recording of users on your website and watch how they use it).
An example of a Hotjar Heat Map.
An example of a Hotjar Visitor Recording.
Sign up for your own Hotjar account
4) I don't know how fast (Or slowly) My website loads.
Pingdom website speed test checks how quickly your website loads from different locations. Just a note. If your website consistently takes over 2 seconds to load, you will want to look into optimizing your website to speed it up.
There is a lot of insight that can be gained from looking through your free Pingdom results. If you feel a little overwhelmed by the results start by looking at your Performance grade, Page size, and Load time.
An example of some of the results from a website speed test on Pingdom
Test your website speed on Pingdom
5) My website doesn't have a mobile option.
Switch to squarespace. That's my answer for almost everything. I'm just kidding, but not really. When you decide to choose a new CMS I highly suggest finding out it's the one you're considering is responsive. Having a mobile and desktop version of your website is alright, having a responsive website is significantly better. A responsive website displays the content of your website in any size from mobile, to tablet, to large desktop. My website is a Squarespace website so it is automatically responsive. It's one of the thousand reasons I love Squarespace.
Want to better understand how a responsive website works? Grab the bottom right-hand corner of the window with your cursor (assuming your reading this on a laptop or desktop) and drag it smaller and larger horizontally. See how the content shifts as the screen size gets smaller? That's because the website is responsive.
Did you know Google gives more love to mobile-friendly/responsive websites? It's about the best experience for your user!
Originally I was going to link to a mobile website builder to supplement a website that doesn’t have a mobile option. However, with how affordable Squarespace and other responsive website builders are I think building a new website is the best option.
Build your new website on Squarespace
6) Website spelling and grammar are atrocious!
Outside of just using spell check, Grammarly is the tool for you! The Free version will check your spelling and grammar for you. While the upgraded paid version will help you with advanced issues. My favourite part of Grammarly is receiving the weekly emailed reports. These give you stats on vocabulary, typing accuracy and more. Let's be honest, there's nothing better than knowing how you stack up compared to other users!
Here is my weekly update from Grammarly Premium from last week. I believe you get notifications about all the same stats in the free version as well. If you take a look, you can see that this week I was very productive on Grammarly and that I have a pretty good vocabulary. However, my accuracey wasn't great. This means that Grammarly helped me correct a lot of typos and misspelt words, which is excellent, that's what I use it for! (I guess I'm getting a lot of bang for my buck.)
7) Issues with legibility
Legibility refers to the ability of users to be able to easily read all the content on your website. The first thing to take a look at is font size and set up. Make sure you choose a legible and font and make sure the letters are not too squished together, and there is enough spacing between each line of text.
Typically serif fonts have been used in print and sans-serif used in website design. However, as time has went on it has become more widely accepted to use either type of font on websites. Feel free to use either type and focus on a legible layout.
The paragraph is hard to read due to lack of space between the lines of text and the letter spacing.
This paragraph is much easier to read because of the layout of the font.
That is my complete list of simple fixes you can make to solve some key issues on your website. If you check out any of the tools mentioned please comment about your experience with them below. I’d love to hear from you.