The First 3 Things I Do to Your Website

As a web designer, I sometimes get so caught up in the strategies, processes and …tricks we use to make the web a better place, I forget that the average website visitor does not do what we instinctively do.

This became clear to me the other day when my wife was beside me while we were examining the websites of a few companies. Everything began well, but soon she began to ask me strange (for me, at least) questions such as, “Why are you shrinking the window size?” and “Why are you looking at the same website in 4 different browsers?”

I realized then that web designers just don’t “visit” websites — we “examine” them. And in realizing that the common, everyday web user does not look at a website the same as I do, it also came to me that website owners (and their designers, if they are not the same person) should also view their website differently than their visitors.

So, that being said, these are the first 3 things I will do to your website when I visit it for the first time. I will not (express) judgement. (verbally or in written form…where you can hear/see it…)

1. Change the Browser Size

Being a responsive/adaptive screen size “junkie,” I just can’t resist. The first thing I will do to your website is change my browser size. I will stretch it to make a skinny vertical rectangle. I will then re-stretch it to make it a skinny horizontal rectangle. I will make it a square. I will start clicking on menu and sub-menu buttons within Google Chrome, Mozilla Firefox, Opera, Internet Explorer (Edge) and other browsers you probably have never heard about before. Why? To demonstrate to you that I am an almighty web designer wielding technomagic, to be feared and respected? Nah. It’s because, as a web designer, I want to see what your mobile navigation structure looks like!

I want to know if your web developer was lazy and simply used a select field (the kind you see in a contact form) or if they took the time to code and design something. I want to see if it slides in from the left (like many sites do) or if it slides in from the right (maybe not a conscious thought from your designer, but perhaps they were thinking that about 90% of the world is right-handed, and that is where their thumb might be?). I begin to feel intrigued when I suddenly see the off-canvas navigation button at the bottom of the screen — was your designer thinking that my fat thumb might reach it more easily from there? Or perhaps they didn’t even bother to hide the navigation off-screen, because they did such a great job of organizing your website that there are only a few navigation elements and, as such, can be displayed in a sticky footer navigation? I am looking at all of this on my computer, because I want to see if I will bother to look at it later on a phone.

Q: When your web designer designed your website for you, did they put some good, hard thought into your website navigation? And when you wrote off on your website’s navigation, did you do so because it was what you wanted, or what your customers wanted? (or what you *think* your customers wanted?)

2. Right Click + View Page Source

I imagine that all web designers are curious folk. We like what we do, and want to see how other designers do what they do. So, whenever I go to a new website, it’s inevitable that I right-click and select “View Source”. Since I am a nerdy designer-type, I want to see how you are loading your favicons, what is in the header of your website, how (and if) you are serving a “one-size-fits-all” image on your website, or if you are loading different versions based on different devices.

If your web code is clean and nicely organized, I can learn a lot very quickly. On the other hand, if your website code appears as one block, all smashed together, (or even on one line) I can deduce that your web designer at least took a few minutes to try to compress your website assets (assets being images, code, scripts, etc.) in an attempt to speed up your website. (good for your designer!)

I want to see if you have a “static” website (usually this means no dynamic parts, no CMS, such as WordPress, Drupal, etc) or if you are using a Content Management System such as WordPress, Drupal, Joomla, etc. I also note what version of the CMS you are currently using. And, if you are using a web solution such as WordPress, I can also likely see what theme you are using, and what plugin you are using. (it appears in the code, and don’t think I am the only one looking — anyone can see your website’s code, and if your CMS/plugins are out-of-date, people with bad intentions may come a-knockin’…)

Q: When your web designer created your website, were you informed of these details? Did he/she explain them to you clearly, so that you understood their importance? If somebody asked you if your website uses a CMS or is static, would you know how to respond? Would you understand why you should know?

3. Feel the Need for Speed

While I am poking around at your website’s code and potential suitability for use on my mobile devices, I am forming a general idea of how fast/slowyour website feels. Note that how fast it feels is not necessarily the same as how fast it is. I don’t mind taking time to take a few sips of coffee while I wait; I do not, however, want to plant, harvest, roast, grind and serve coffee while I wait.

There are many factors that you (or at least your web designer) should consider, and not all of them are under your control. For example, all of the following are things that can be done to increase your website’s loading time — and overall “feel”:

• Compress images.
• Serve correct image sizes to uses based on their anticipated screen size.
• Compress code. (CSS, HTML, JavaScript, etc)
• Use a Content Delivery Network (CDN). This allows you to deliver your website’s contents to the visitor from the CDN’s closest geographical point. (for people who like “free” and have time/patience to tinker around, I recommend Cloudflare.
• Upgrade your hosting provider. (more expensive doesn’t necessarily mean good service, but really really cheap hosting usually indicates ….cheap service.

One thing that you can not necessarily control (though you might anticipate) is how fast my internet might be. Assuming that you are targeting a certain audience with your website, you might be able to anticipate what types/speeds of internet are prevalent there. (for example: Is your target audience in a developing nation, where 4G internet might not exist? Is your typical site visitor likely to be living in a rural area, where internet connectivity might be slow/non-existent? Is your ideal visitor someone likely to view your website on a mobile device? And, if so, have you/your web designer thought about issues such as bandwidth/data usage, roaming and associated charges? Your internet connection isn’t the standard in the world — test your site’s loading time using a number of internet speeds.

Once I am sure that my mobile data plan will not evaporate while trying to load your website’s home page, and that I will not spend an eternity waiting for an image to load, I will check it out on my phone. Or my tablet. (if it isn’t currently being used….)

You can (as your web design should have done) check out how your website ranks on many factors, such as speed, compression, loading time, and more using a variety of websites. Two that I recommend for their ease of use (again, I receive nothing for my recommendations) are: GT Metrix and Pingdom.

Q: Have you considered that the time it takes to load your website on your computer and using your internet connection will likely not be the same as that of other people? Have you taken into account the extra data charges that your visitors might incur simply attempting to view your website? (and that the money they waste on additional mb is money they won’t be paying you, in the form of services, salary or purchased products)

Us web designers are a curious (and sometimes obsessive bunch) who often interact with your website in unexpected ways. I just wanted to let you in on our little obsessive-compulsive secrets, so you can perhaps reconsider the state of your current web project. (and perhaps contact your web designer…)

Until the next set of words!

Photo Used: negativespace.co