In the previous article we talked about 3 main parts of a URL (aka Domain name) and showed you how you can determine if a website was built professionally even before the website has loaded.
In this articles we’re going to talk about the layout & design – from top to bottom – of a website and what to look at to see if a website was built professionally.
What we’ll talk about:
#1. Responsive Web Design
You’ve probably heard term ‘Responsive Web Design’ in the past, but why do we hear it so much today and why is it important? According to research, up to 70% percent of web traffic comes from mobile devices. This is why it’s imperative for the design of your businesses website to be responsive. This means that whether a person is viewing your website on a computer, tablet or phone, your website should look great and be user friendly.
Take for example Yelp. The image on the left was of their website from 2012. As you can see it is not mobile friendly. In order to read all the text you would need to scroll left and right. In 2012 though, viewing the web on a mobile device was a lot less popular and this was okay.
The image on the right is from 2022. As you can see it’s a lot more user friendly for those on a phone. They’re using icons to help you easily find categories, the images scale down and are part of a slide so you can view the Services & Professionals better. In fact they even have an app so a users experience is better on mobile devices.
Having a responsive website is so important to have in fact that if it is not, Google will penalize your website for poor design. Which again means a poor SEO score and less traffic to your website. It also gives a bad impression to those who visit your website and they will most likely leave right away.
After reading this article, take a look at your businesses website and check for yourself on a phone or tablet how it looks. Does it give the impression you want it to? Do you need to scroll from right to left and zoom in, in order to view the content properly? It may be time to consider updating your website.
#2. Using images where Icons should be used
Nowadays, using icons in the design of your website not only looks cool but can be very helpful. However, If you go back about 10 years, icon libraries were almost nonexistent. Thus designers and developers had to use an image instead.
Today however, icon libraries like Font Awesome are free and readably available for everyone to use. The advantage to using icons over images is that they are technically a type of font. Which means that they always look crisp and clear no matter the screen size and can be easily changed in size without having to worry about the icon becoming blurry or skewed.
This again is standard practice today and while it’s a small detail, can be a clear sign of a professionally made website.
Not to pick on NBC, but the image below is what the bottom of their website used to look like. What look like icons on the right hand side are actually tiny images of icons. With new hi-resolution screens on all our devices today, using images of icons is a poor choice because even though they’re very small, they’re still going to be blurry while the rest of the content is crisp and clear.
This is something I still see to this day despite there being many free icon libraries to use. And it’s one of those things that once you notice blurry icons amidst crisp and clear content, you can’t not notice it.
#3. Using Text in Images
Going along with the previous section, another popular way to design and build websites 10+ years ago was to create a combination of text and an image into one image and use that on the website for your content to quickly build web pages.
Today though, while it’s still in use, it should be done sparingly. The reason being goes back to responsive design. While the right designer can create some really awesome images for your website, doing so can make your website not mobile friendly. The other downside is that some visitors may have visual disabilities and require the use of a screen reader. If your text is embedded into an image a screen reader only sees an image, no text, and thus it can’t read the text on the image. This also includes Google’s (and all search engines) indexing bots. Thus if they don’t see any text your SEO will suffer.
Another disadvantage is that the text cannot be easily changed as you will have to edit the entire image using a program such as PhotoShop.
Without going too deep into the complexities of different screen resolution, one issue you would need to deal with is the clarity of the image. As soon as you put text on an image the issue of maintaining a clear image becomes a high priority. If the image is even slightly blurry, it will be difficult for people to read your content.
Lastly, a big issue that is impossible to predict, is if the image doesn’t load at all or only partially loads. This is a possibility even today with high speed internet access at home and on your phone. If your website is built with many images that have important text to your business and it doesn’t load, what do you have left for your visitors to see?
With new web technologies and design tools, it is a lot easier and better to have your text on top of a background image or beside an image when needed. This will give the best user experience and in the case that your images do not load, at least visitors will still be able to read the text. Having your website built this way will show that it was built in a professional manner.
#4. The Footer Credits
So far we’ve talked about what makes a website professional from the URL to the content on the page. So naturally the last part of a website’s content to go over is the footer credits. The footer credits will look something like this.
This is another small detail but it can be helpful when determining if a website was built in a professional manner or not. It can also reveal a lot about your website if you know what to look for.
For example, if it says something to the effect of “Powered By…” generally it means that the owner of the website has the free plan of a website builder like Wix, squarespace or Google. Alternatively you may see “Built By…”, “Designed By…”, or “Theme By…”. These are often left by freelancers or web agencies and can tell you what they used to build the website, who built it and other tools used.
IMPORTANT: Using one of these website builder doesn’t automatically mean the website isn’t professional. And just because the website was built by freelancer or web agency, doesn’t automatically mean the website is professional.
So then what would indicate that the website was professionally built based on the contents of the footer credits? Generally, what you would want for your own website is for it to say your company’s name.
“© 2022 Your Company Name All Rights Reserved.”
NOTE: What you want to watch out for is if the company that built your website goes out of business or changes name. When this happens you’ll be left with a link that goes nowhere. Having broken links is also bad for SEO. So check all links now and again.
Some Concluding Thoughts
If you’ve been following this article series thus far, congratulations! You should now know more about what makes a website professional than you did before. In this article we covered 4 aspects of the layout and design of a website, here’s a quick recap.
With Responsive Web Design, we learned why it is critically important that your website be responsive. Under the heading Using images where Icons should be used, we talked about how using images of icons can negatively impact your website and why it’s best to use proper icons from an icon library.
In our third section, Using Text in Images, we learned 5 reasons why it’s best to avoid text in images when possible on your website. And how you can save yourself a lot of trouble by making sure to have your text on top of a background image or beside an image when needed. Finally in our fourth section, The Footer credits, while this is a small detail it can reveal a lot about your website if you know what to look for.
The last article in this series is going to cover Website Speed, another key aspect that effects all website. What Makes a Website Professional? Part 3.
