6 Web Development Don’ts for 2017

by May 4, 2017Marketing

6 Web Development Don’ts for 2017

by | May 4, 2017

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.

Resound Newsletter

Get more industry-leading branding and marketing insights like this delivered to you monthly.

Our Book Is Here!

Unlock the power of authentic branding to become a better marketer and business owner.

Latest Posts

Product Branding Versus Organization Branding

Which came first? The product or the organization?  While in many cases, the product stands tall—the splash it made, the awareness it sparked, and the customer loyalty it built. But even in those instances, you can make a good case for the organization. If we extend...

Omissions in Your Writing Process that Cripple Your Leadership

Thought leadership motivates your readers to see you as an expert. It can even give you monopoly power in your area of expertise. But building that leadership through great copy requires a process; a good one at that. Finding good writers is hard enough, but a process...

Turn Your Single Product Brand into an Authentic Corporate Identity

Is your brand imprisoned by a single product?  Don’t worry…we know someone on the inside who can help you escape. Some guy with an insane plan and a blueprint of the prison facility tattooed all over his body.  Once you’re out you’ll be on the run, wanted by the...

The Key to a Smooth Branding Experience

You’ve decided to pull the trigger and invest in your brand, setting aside the budget and time needed to get things rolling. Your workshop is scheduled and you’re getting excited about the future. Or maybe you’re nervous about the investment and the process. Here are...

The Simplest B2B Funnel Strategy to Get Started

In B2B marketing, we're often supporting business development funnels. Basically, we're sending traffic to sales. Those are different from B2C funnels in that we're not trying to get people to buy. Instead, we're trying to get people to get into a conversation that...

Brand Foundations Course

How to Unlock Your Remarkable Brand

Discover Your Brand Values, Brand Personality and Brand Story to get you and your team thinking about what your authentic brand is and how to manifest it.

Brand Webinars

Learn how to develop your brand’s foundation to get a competitive edge.

Unlock Your Remarkable Brand

Want to build unlock your remarkable brand and lasting relationships, but aren’t sure where to start? Set up a call and talk about it with Mike.

Your organization is remarkable – now start acting like it.

Our new book, You Are Remarkable, helps businesses and organizations unlock their authentic, genuine, real brand identities and express them effectively to their customers.