We’ve come to the last of the installments of our 2017 website tips. We’ve been through design. We’ve been through content. Let’s talk through the final piece of the trifecta: web development. This is where the rubber meets the road. All your strategy, design, and writing will pay off…if you build it correctly.
Even though websites are designed for people…they’re built on code. If you don’t do that right, you’ll have slower page loads, tougher indexing (which kills your SEO rankings), or wonky mobile experiences.
So obviously, have someone dev your website who knows what they’re doing.
But beyond that…here are some ways to NOT dev your site:
1. Put way too much hope in slideshows.
These get used all the time at the top of home pages and landing pages to feature different marketing messages. The problem? No one clicks on any slides other than the first one. There’s lots of good data out there proving this.
Rather than using a slideshow, consider the priority of the content you put in the slideshow and spread it out down the page. If it’s well written and well designed, people will scroll, engage, and even click through on the calls-to-action they find compelling.
2. Assume that every user is on the same size device…
Just because you think you never research products from your smartphone doesn’t mean that’s the case for all your customers. In fact, more and more customer research is being done from a phone (60% of online searches are initiated from a mobile device according to Hitwise).
This makes a huge impact on your design process.
Your website must be equally functional on phones/tablets/TVs/laptops/giant desktop monitors. Pro tip: check your analytics on your current site. If you’re running something like Google Analytics, you should get a pretty good sense for the types of devices, operating systems, and web browsers your customers are using.
3. …or using a specific browser.
While you’re checking out what devices your customers use, pay attention to the browsers (i.e. Google Chrome, Firefox, Internet Explorer, Safari). Not all are created equal, especially when we’re talking about older ones, like previous versions of Internet Explorer (which, by the way, should be retired).
Each web browser has a slightly (or not so slightly) different rendering engine that takes the website’s code and turns it into a visual interface. Ignore even one of these web browsers in your development process and you could end up with a horrible experience for some of your website’s visitors – which could cost you valuable leads and sales. We recommend continually testing your website in various browsers to ensure you have the best possible experience for every user – no matter what web browser they choose to use.
Pro tip: sign up for an account with BrowserStack. This application will allow you to test your website in numerous different web browsers and devices, all from your one computer.
4. Using jpgs/pngs when scalable vectors would work.
One critical goal for you new website should be to make it faster for your users. This is especially important as more and more people use smartphones to visit your website. These wonderful, pocket-sized devices do have less bandwidth and processing ability than a desktop or laptop, so minimizing the size and complexity of the load for your website can provide a much better experience for mobile visitors.
One simple way to increase the speed of your website: use vector images instead of bitmap (JPG or PNG) images, wherever possible. These vector images are typically smaller and allow your images to load at multiple sizes and resolutions. This means you only need to have one image on your website rather than creating different versions for users on different resolution and size screens.
Plus, pieces within vector images (like their color) can be manipulated directly from the code on your website. This means that instead of a having to store color separate versions of the same icon on your website, you can use one single image and apply different colors in the code. This decreases load times and also makes it easier to create or edit versions in the future.
If you want to get into more detail on the technicalities of vector images, I recommend this outstanding resource from Jake Giltsoff: https://svgontheweb.com/.
Added bonus to using vector images: not only are they scalable for different resolutions, but you can do some pretty nifty animations with them to bring some personality to your website.
5. Make every headline an H1.
Just like with those essays you wrote in college, there’s only one title per document. This goes the same for websites. Each page should have a title. And this title should be the most important headline on the page. All other headlines should be contextually lower in the hierarchy of titles, yeah? Makes sense.
But all too often (and often with the excuse of, “it’ll help our SEO”) people create multiple, H1-level (or ‘most-important-headline-level) titles on a single page. This is not helpful to your website visitors (or to the Google bots we all love).
Instead, consider each page as a single document. The main title of the page should be most important (your H1 headline). Any other headlines on the page should be secondary (or tertiary). Contextually they should flow from that main title and help define the sections of content you’ve written to support your title.
For example, let’s say we’re reading your ‘About’ page. Typically the title of this page for many website is…wait for it…’About’ or maybe ‘About Us’. If so, that’s the H1-level title for that page. Then maybe there’s an intro paragraph followed by a section about the company’s values. And maybe you want to have a title for that section called…’Values’. Great! That’s an H2-level headline. It still falls under the main idea of ‘About’ that this page is all…about (heh).
Why is this important? Making every headline on a page the same level creates confusion. It makes every headline seem like it’s of the same importance as the others. This doesn’t help people to navigate and understand the hierarchy of the content you’ve written.
And don’t think those search engine bots won’t be confused…. Google only gives you credit for the first H1 they find on each page. So you’re not really getting any extra ‘ranking juice’ by making every headline an H1. Just make sure every page has one and that it really is the main title of your page.
Let everything else flow from there.
6. Skip QA.
I don’t know why we even have to say this…but I must. I’ve seen it way too many times: don’t skip out on testing your website before you launch it. Even if there’s an urgent need to launch, don’t skip the critical step of quality assurance (QA) beforehand.
This doesn’t mean that every single thing on your website has to be absolutely perfect before you launch. But not testing or considering issues before you launch = shooting yourself in the foot.
One way to tackle some basic QA: grab a few of your team members, block out a couple hours, spin up a Browserstack account, and get to testing. Try to accomplish different tasks on your new website like ‘contact us’ or ‘purchase a product’ or ‘find the blog post titled _____ and leave a comment’. Assign different people on your team these these tasks to complete in different web browsers (this is where Browserstack comes in handy).
As you each discover bugs, typos, and navigation flows that don’t make sense, record them on a spreadsheet. Afterward, run through each one as a team and discuss the priority: How critical is this for our users? How much time will it take to fix? Does this need to get fixed before launch or can it wait until after?
Then you can get to fixing.
Testing and running through these steps will give you a functional, quality website to offer to your visitors. And that means a better experience for everyone.
BONUS FAIL: Forget that retina screens exist.
Your phone, your laptop, your tablet, your TV, maybe even your refrigerator…seems like all screens are super duper high definition now. But what does this mean for your website? Well, now you can’t just have images that are high enough resolution for a traditional screen (like 72 pixels per inch). They have to be high squared resolution.
But then you sacrifice speed…so you can’t just load your website pages up with massive +4mb images. So you’ll probably need to load different images of different resolutions for different screens. As you’re building out your website, keep this in mind with your content management system and make sure you have the ability to load the right number of images for each post (or page, or article) you publish. A solid web developer will be your life-saver on this one and if you’re running WordPress or another content management system, there’s plenty of plugins to help you out.
Bonus tip: check tip #4 – use vector images (like an SVG) whenever you can to alleviate having to use multiple image sizes.
And with that, we wrap our series of Website Design No-No’s. If you missed the other two:
Chapter 1: Design
Chapter 2: Content
What did you think? What big faux pas (or even small ones) did we leave out? Drop us a line in the comments or contact us directly.
