Beneath the Surface: How Web Design Impacts Your Site’s Health

Web design goes much deeper than how your site looks.

A great design poorly implemented can have a negative impact on your site’s ability to deliver on everything from online conversions to SEO.

How do you find and fix these trouble spots? In this webinar, we’ll reveal the invisible layers and hidden corners of your site’s design. We’ll share how to identify and triage the problems you’re likely to find.

You will learn:

  • How your site’s design can impact SEO, social media, accessibility, mobile user experience, site maintenance, and online conversions
  • Tools and techniques for testing web pages to uncover problems and opportunities
  • Which problems are critical to fix today, and which areas you should keep an eye on for the future

Transcript

Welcome to this month’s webinar, Beneath the Surface: How Web Design Impacts Your Site’s Health. I’m David Sturtz. And today I’m really excited to be talking with you about all the ways that design can impact not just the look and feel—that top surface level area of your site—but really thinking about how we get deeper and bring together all of the things that comprise the field of design, and the technology that goes into designing a website to make your site more successful.

So to begin with, I wanted to talk about what we think about as design. We typically focus on that surface level look and feel. What are the colors, the fonts, the branding, the interactions that happen within the site. And that’s a really important part of design, but that’s not what we’re going to be talking about today. Today I want to think about all of those things that are under the surface. Everything from the markup, to the scripting, the CSS, all of these technical terms that live beneath that surface level within your site, and make it successful or not successful from a number of different perspectives. From the users interactions with the site, all the way through SEO and some of the technical performance of the site.

There’s all this, obviously a lot of things going on here, and a lot of different technologies at play, and a lot of complexity happening that we’re not always thinking about as marketers when we’re working with a website. I want to talk a little bit too about who does design? A lot of times we think about this just being the visual designer that is creating that surface level look and feel, and just thinking about how the whole site’s going to come together from a visual layout perspective. But just looking at who’s registered for today’s webinar, we’ve got everybody from those designers, through some fun and developer technology people, we’ve got content administrators, and we’ve got those marketing leaders, those directors and VPs who are thinking about “how is the website part of our overall strategy?”

So huge range of folks that are really invested in the design of the site. And by design I really mean, what is the sum of those…all those decisions that go into the site that results in the end users experience of your website. I like to say the design happens. It’s not something that we necessarily fully create. It’s all of those choices, how they come together at the end of the day, and what an end user experience is. So as an example, I’d like to pick on the iPhone, and I tend to go off on a rant about the iPhone. And we always go back to Apple having great design, but if you look at anybody’s iPhone, probably your own, if you pull it out of your pocket, it’s probably wrapped up in some a case. It’s not just that bare iPhone. We get a little nervous if we see a bare iPhone sitting around.

So to me that design of that device is really that thing that’s wrapped up in the case. And what does that case look like? What is it like to hold the case? Because that’s your experience at the end of the day, is how that thing came together, that it’s too fragile to be out in the world on its own. It needs a wrapper around that. And so that’s a conscious choice that was made at some point, and has some result that affects your experience as an end user. So we have to think about what are the impacts of all the choices we make in design? Are we going to give it a glass screen on the front, are we going to make it super thin? And so it’s maybe a little more flexible than it should be. What are the impacts of these design choices when it comes to your website?

And I want to think about those in two broad categories that we’re going to walk through today. One really big category is around performance. And it’s not just technical performance of the site, but how does it perform from a business standpoint? How does it meet the objectives that you have for your website as an investment of your business to do the marketing for your organization?

And then thinking about maintainability as well. What are all the aspects of these design choices that play into how long your investment, the site is going to last, and what the return on that investment is going to be. Specifically, today, I want to walk through four different aspects of this. We’re gonna talk a little bit about accessibility, mobile user experience, search engine optimization, and the overall maintainability of your site.

Accessibility

So to kick this off let’s dig into accessibility. And I’m going to do not a super deep dive today. If you really want to go deep into this topic, we have a great webinar out there, a recording from last year with Andrea Skeries, our in-house guru on all things accessibility, presented a great session going deep into accessibility. So I’d encourage you to go check that out, if you want to do a deep dive into accessibility. But we’ll hit some of the top level areas of concern, and specifically those things that come up when you’re thinking about design.

First of all, it’s important to call out that almost 20% of Americans have some type of disability. So a lot of times we think, about visually impaired, or we have some specific disability types in mind when we’re thinking about this. This can be anything from people that have difficulty lifting or grasping, that have difficulty with movement, thinking about how they’re interacting with the website, whether they’re using a mouse or a keyboard to access the website.

People with cognitive mental or emotional impairments are people that may not be able to process the information on the website the same way that everybody else can, people with vision impairment or hearing impairment. And just thinking broadly about how are all of these different kinds of people that are more permanently living with these disabilities going to interact with the information on your site. And then also thinking about any number of us, given where we’re at on a particular day, our emotional state of mind. Or, certainly, when you’re interacting with a healthcare organization you may not be in peak physical form. And how are you interacting with that information when you’re seeking care or learning more about a condition you may be dealing with.

So a really important consideration from that standpoint, something that I think really speaks to healthcare brands, and really should be on brand for any healthcare organization to be reaching out to these kinds of audiences, to making it easy to access the information on their sites. Unfortunately, where we typically go, we’re thinking about why we should be doing this, it comes back to some of the legal issues. And those are there too. And so it’s important to remember that accessibility has been encapsulated into the Americans With Disabilities Act. And so that covers needing to make websites accessible.

We’ve got Section 1557 of that, actually has been tied into the ACA. So there’s a little bit additional attachment to healthcare from that standpoint. And then there is a set of guidelines referred to as Section 508, that are being updated. And the new guidelines around that level of accessibility is going into effect in January of next year. So not that you don’t have to be working towards meeting those now, but just an extra deadline out there.

We’ve got a blog post out on our website around some of the lawsuits that are coming up around accessibility. So HCA was recently the subject of a class action lawsuit. And so this is really making a top of mind for a lot of healthcare organizations to give some more thought to the legal issues around accessibility, and just bringing that front of mind, to make this an important initiative for a lot of organizations. So important to be knowing where you’re at and how to move forward. To think about that, I’d like to highlight some of the common issues that come from the design world that may create some accessibility problems. First among those is probably something you would see right when you land on your home page. Really popular right now for a lot of healthcare organizations to have some sort of a photo slide or a carousel right on those home pages, or landing pages, sits there with images in it, and just slides around.

This creates some accessibility concerns. Just from the constant motion, as well as the access to the content within those sliders. So you need to have a couple of different things going on there. So you need to be able to pause that slider for people that have issues with motion or cognitive impairments that can be too distracting or can actually induce vertigo for some folks. And so being able to pause any of that sliding action, or any background videos within your site is important from the accessibility perspective.

You also want to make sure people can actually access any links that might be within those photo sliders if you’re expecting them to be able to get to that content. Make sure that they’re accessible using a keyboard, and that they can actually tab through and click the links that are within those sliders.

Another area that is similar are these types of accordion controls, menus, any hidden content. Maybe tabs, or you’re moving through content on the screen, some of the things are hidden, and as you interact with them it becomes visible. This example is taken from the Bootstrap library, and they’ve done a good job of making this accessible. You can actually tab through each of those item groupings. If you hit enter it expands that accordion to reveal the content that’s within there. All of the content is available within the markup behind the scenes, so you can actually view the source of the page. You can see the text that’s there from a programmatic standpoint. That’s a good thing for search engines, and for accessibility technology.

But this is the best case example. A lot of times what you see is that, that text is being rendered in by JavaScript, it doesn’t actually exist on the page, that you can’t navigate these using a keyboard without using a mouse. Or that it’s not even obvious that you can get to some of the text that’s hidden within there. So a lot of trouble with different areas of hidden content, something to be thinking about when you’re trying to condense the information on the page and choosing to hide content in order to do that.

Carrying on the topic of using keyboard to access your site. Not having that built in can be a big pitfall. So users should be able to navigate your site using the keyboard alone, and here you can see examples from Tidelands Health as they tab through the top menu items there, you can see, “find a physician” is highlighted, you can tell that by the difference in color. It’s also got the light blue border around that indicating it’s a link. And if you hit enter then you can visit that navigation item. So not really obvious to necessarily every user on the site, but if somebody is using the keyboard to navigate, it’s all built in and ready to do that. You want to be able to do that across any kinds of elements within the page. So not just your main navigation, but making sure that forms on the page, if you tab through them using your keyboard that they’re actually accessible to be done that way, and that they’re moving through in the correct order, so it’s not confusing to the user.

Another thing that helps with keyboard navigation as well as any kind of audio navigation, or using screen readers, is to actually include bypass blocks. And these are just different areas that allow the user to skip through areas of content, but still know where they are on the page, really important for the screen readers. As you can imagine having the main navigation of a site read to you over and over and over again, as you visit different pages. It takes a lot of time and makes it difficult to quickly navigate through the site.

So this is an example from St. Vincent’s Healthcare. As you start to tab through the navigation on the site, this “skip the content” button becomes visible. It’s not visible there for every user unless they start to tab through. But it pops up and allows somebody to jump right down to that main content space. It’s also there for those screen readers to access as well. So it makes it really easy for somebody to move down into that main content of the page, and get to what they want to know.

Here are some tools, if you’re getting started into accessibility, I would encourage you to go out and run just a high level accessibility test on your site. This is a tool called Wave, there are a number of different tools out there that will give you this high level reports. What’s important to know is there is a lot…it’s not a black and white sort of thing. And so even when errors come up, or there’s different warnings, it’s important to understand what they are, how you can get around them. And even though something didn’t prompt an error, you still may have issues on your site that you need to work through from an accessibility standpoint.

This is a great starting point, it’s also great to engage with somebody that really knows the stuff inside and out and can help to identify what are the biggest problems that users would be having on your site using assisted technology today.

Another big area to focus on and probably the biggest thing from everybody’s point of view. So this is not just building this into, the design templates of your site, or the overall navigation. But anybody that’s contributing content to the site tends to fall into having problems with this area, providing text alternatives. So this relates back to any image that you may be uploading to the site, any video, or multimedia kinds of things that are going on, on the site. You want to make sure that you’ve got not just all text for images, but that any videos have captions and transcripts available so that somebody that can’t hear the audio that’s being spoken, can actually read through the text transcript of that information and still get access to that information.

So most people are familiar with alt tags, they’re, not always sure how to use them, so we’ve got a quick guide for you here. So if you’re adding an image onto a page, and you’re not sure, “Should I create small text on this? What should I actually put into that?” Here’s a quick guide for that. You want to think about describing maybe what the image is versus what it does. Does it have a functional purpose, or do I just need to let somebody know what kind of a picture it is.

First of all, you always want to have the “alt” element on your image tag. So even if you’re not going to provide some text there, you really should have that element there as an empty string, as you can see on the top left under “decorative.”  Use that empty alt element if you have a truly decorative image that adds no information to the page whatsoever. You still should have that attribute there on the image tag, but it can just be left empty. A better alternative for those types of images is to use CSS, so they’re not even there in the markup at all. That helps to separate that decorative element from the content of the page. That’s really just a best practice and something that really should be paying attention to in the separation. That way if you want to change that decoration it makes it a lot easier to change that through CSS, rather than having to go through and update content throughout the site.

Most images though, have some sort of informative value to them. And so the reason that we use so many images from a marketing perspective is as branding elements. What is that feel that you want when people land on that page? What was the story we’re trying to tell? And so even though we think about, “Oh, that’s a image of a patient and a physician together, might be a little bit decorative.” Really there’s some sort of information that you want that to convey, and that’s why that’s there. So for plain pictures using some sort of a short description of what’s going on there, are a great way to incorporate some of the feel that you want people to get from that, what kind of interaction are those people having? What does the scene look like? What does that feel?

If there is any text in the image at all, the best practice is really to not have text in your images, seems pretty unavoidable in some cases. So if there is text in the image, you want to repeat that text word for word. You need to provide all of that text to somebody that may be using assistive technology. If there’s complex data in the image, so if you’ve got a chart or a graph, or something where it is difficult to spell out all of the information within there, providing an overview using the Alt text. If you’ve got a symbol, or a functional image, something like an icon, maybe, coming up with what the essence of that image is, or the action or the purpose of that link, and conveying that through the Alt text.

So a lot of different options there, but hopefully that gives you some tips to work off of as you’re entering that, alt text for each of your images.

One of the things that gets overlooked sometimes during the design process is thinking about color contrast. And so there’s an example here on the right side of the screen. There’s too much contrast if you’ve got pure black text on a white background. That’s the most contrast you can have, but it’s a little bit too much for general reading. Your eyes can get a little bit tired doing that. That’s why a lot of eBook readers have that mode that will go to a beige background, and brown, or light gray, or dark gray text on top of that beige background. It’s a little bit less strain on the eye to have a middle level of contrast. So that’s something more like that middle example, a more comfortable level of contrast.

On the other end of the spectrum down at the bottom you have lighter gray text on a light gray background, not enough contrast for somebody that may be having low vision, or dealing with color blindness, or other vision issues. And so we want to be thinking about this as you’re creating your overall design, but any time you have different elements interacting, color-wise, as something to key into and think about, is there enough contrast for somebody to be able to read this text against the background that it’s sitting on top of? Or to distinguish elements in a chart, or a graph, or a table against the background.

So there are a number of different tools online to check this as well. This is one where you can see it’s looking at the foreground color, a dark gray against a light gray background color, and then in the results just as the brightness difference should be above 125, it’s only 116, so we’re going to have to make a little bit more difference in those elements. There’s a lot of different sliders you can use within this tool to adjust those colors and start to hit some of the contrast ratios that you need to have within the site. So a great way to just test those and play around with that to see if there might be some problem areas on the site.

Another great test to run is available right within Photoshop. So if you’re a designer and you’re working within Photoshop, you may have missed this because there are so many different items within the menus. But within the Proof Setup there is actually some color blindness previewing, and proofing set up within there. So you can actually go through even just take a screenshot of a site, or of an image that you’re working with, paste it in there, and run that Proof Setup color blindness test on top of that to see what it might look like to somebody with these different types of color blindness.

As it happens, while only 1 in 10,000 people have blue-yellow color blindness, actually 1 in 12 guys, and about 1 in 200 women have red-green color blindness. So in total about 8% of Americans have some kind of color blindness going on, something to think about. Especially, as you can see in the example, the charts and graphs where, without having any kind of either differentiation, just that color not enough for somebody to understand the difference between those different items within the chart.

So I can really change the interpretation of some of the elements of your website, and pretty easy test here within Photoshop to do that. So to sum up a couple quick tips for designers, just think about this, incorporating some of these tools and checkpoints into your workflow, as you’re creating a design or you’re adding elements into a page, just making sure that you’re thinking through exactly how somebody is going to use this from some assistive technologies.

For everyone, I would encourage you to consider doing an accessibility audit. Really find out where you’re at today, what are some steps, and what’s a road map that you can put in place to move forward and make sure that you’re working towards improving the overall accessibility. We typically recommend that initial audit, understanding where you’re at, and then coming up with some kind of a work plan, to make sure that you are taking steps to improve the overall experience for users on your site.

Mobile User Experience

Shifting now to the mobile user experience, another area that design has a huge impact on that may or may not be thought of as part of the overall design process, and definitely we’re still struggling to think about not just responsive design, our recent industry survey indicated that pretty much every healthcare organization, the remaining, 20% or so that have not gone responsive are planning to go responsive in the next 12 months or so. So that’s huge, but you’ve got a lot of folks that were early adopters, went responsive several years ago. And there’s a lot that’s changed in the way that it’s implemented from just a few years ago, even to today. And we will really want to shift that thinking from not just responsive, but thinking Mobile First, and what does that experience look like, and that, that is the go-to experience for a lot of your site users.

Just to back that up, here’s some numbers from comScore on the amount of time that people are spending on digital media on different devices. So you can see, looking back to 2013 when a lot of sites first started going to responsive to today. We’ve got huge growth across smartphones, especially, and tablet devices as well, but a drop, overall, in desktop time. So huge number of minutes increase there within the smartphone. So really thinking about how much time people are spending with those devices. And how they’re accessing your content and interacting with your organization on their smartphone devices, really represents 7 to 10 minutes that they’re spending with digital media right now. So huge, huge amount of time that people are spending on that.

What do people want when they’re on those mobile devices? We used to talk about, them wanting maps and directions, and they’re out and about. Of course, we know now that everybody is using these all the time. Even if you’re sitting on your couch in your living room, you’re probably reaching first for your smartphone to go answer a question. But the thing that is true, especially for mobile users, I think this is true for all users. They’re very goal-oriented. They want to be able to get what they need immediately and to do it the way they want. And this is a quote from a Google research study backing this up.

One of the first ways to step into understanding what’s going on with your mobile users is really to dig into your web analytics, and figure out, how are those users behaving on your site? And maybe bench-marking that back against your desktop users, and seeing what are the differences of how they’re interacting with the site, and some other behaviors within the pages.

Some of the things that you may find as you do that, are really some indicators of poor mobile user experience. So if you’ve got a higher than average bounce rates compared to desktop on some pages, you may want to think about what’s going on with that. That may be a good thing that people are finding the information they need, they found that phone number they were looking for, or they found the directions to that location, and they got out of there. So that may be fine for some pages. For other pages where there is more information and you see more engagement from desktop users, that may indicate that there’s actually interaction problems within the page for those mobile users. They’re not continuing to browse through the site the same way that desktop users are. And there may be some changes you want to make.

Same thing around average time on page. So if you’ve got a low time on page on mobile devices versus desktop, especially on some of those content pages, you may want to look at exactly what’s going on there. And are there things that are preventing users from sticking around and really engaging with the content? What I think is really interesting is when you see an increased use of lifelines. And this is what I call a variety of different behaviors, things like users going to your contact desk form, clicking on phone numbers, going to the site search and searching for things, or Pogo-sticking back and forth from the search engine.

So that’s where they land on your sites from a search engine, and they don’t find what they need so they go back to the search engine, search for something new and come back to your site again. You can see this MGA through some of the behavioral analytics, and some of the user flow diagrams that are available within there to see that back and forth movement over time, across sessions. It can indicate that people are not able to navigate your site and find what they want on that mobile device. And so they’re turning to alternative ways of getting there. And, really what we want to look at, “Okay, how can we improve that overall user experience to help them to find the information that they need?”

One of the ways we can do that is really looking at that mobile layout and thinking about how we can use design to improve the clarity and to focus on action. So, first off, is simplifying navigation and menus. This is something we pretty commonly do on mobile. So you can see in these examples in the Gundersen Health System, some example you’ve got that hamburger style menu, the three lines that drops down with that full menu. You’ve also got the “in the section” green box there that highlights some of the local navigation options near that page. You want to make sure you’ve got clickable phone numbers throughout, and any forms within the page are kept as short as possible, simple, integrated with any mobile technology as well. And that’s something you want to think about across: forms, phone numbers, maps, anything like that, that it’s really playing well with the technology that’s built into the phone.

So rather than trying to put the map within the page for the user, it’s much easier for somebody to jump out to that Google Maps app or the Apple Maps app, and navigate that way and get the spoken driving directions to the location. So make sure that your site plays well with those different apps that somebody has on their phone. Of course, we want to make the language on the site simple and clear as always. That’s true for basically every user, and we want to think about moving those calls to action above the fold. So within the first screen on a mobile device that you can actually see, what are some of the key actions that you can take?

I would advise you to go take a look at what are the page types that mobile devices are most frequently interacting with, where are they landing on your site? And when I say page types I mean categories of pages as far as, is it a provider profile? Is it that location landing page? And it tells us about a particular facility. Not necessarily looking at individual pages but what are the collections or the similarly shaped pieces of content that somebody is interacting with. That can give you some starting places to look at, as far as where you might want to be improving the design of that mobile user experience.

Thinking in particular about calls to action and going back to the point I’m making about, responsive design and how far we’ve come. When we first started working with responsive design, most sites just collapsed down to that mobile width, and whatever order things happen to be in on the page, they just showed up in some order on the mobile device. And there wasn’t a lot we could do to control the order of that information and to shape that differently than how it was on the desktop. That has changed dramatically. And so you can see in this example from Gundersen Health System, the order of the elements on the desktop version of the site, and the order of the elements on the mobile view of the site, same page, it’s just a responsive design that collapses down. But the order of the elements is controlled, so that we can really choose what things look like on that mobile view, and so that it provides the best experience and access to information for the user.

So just walking through it quickly on the left-hand side, on that desktop view, you’ve got several columns to work with to spread things out which really helps, but you can see that navigation to other pages in that section as item one. You’ve got the actual headline, item two. Over number three there is the “contact us,” that call to action, does show up in a little bit different order, a different shape within the responsive you. We’re pulling that headline up above some of the calls to action, but the calls to action appear above the main content of the page so that a user that’s landing there knows exactly what types of actions they can take as they’re interacting with that content.

But then the content itself appears down there at number four, really quickly. And then if you were to continue scrolling that mobile page you’d actually see that related information to find allergen, immunology, locations of providers shows up below the content, and then that’s followed by the related health information. So, a little bit of degree of relevance as you go down that page extending from there. So this is something to think about if you’re already responsive but things are just not showing up on mobile the way that you would really like them to or in an ideal way from a user perspective. There’s a lot of control we have now over how all of that comes together.

Some of this begs the question, should we have shorter content on mobile? And this is something I’ve heard asked in the past, and I just ran across this study from the Pew Research Center, where they analyzed traffic to a lot of different news articles looking at long form news content versus short form, and whether people were engaging with it differently across smartphone devices. And they found that long form articles got about twice as much engagement as short form articles. I’m sure they’re defining short form as anything up to 1,000 words, long form as more than 1,000 words. So you’d expect people would actually spend more time reading those long form articles than the short form.

They got about the same amount of traffic across those two different article types. So it indicates that even though we’re on our mobile devices, that doesn’t necessarily mean we want less information. If the information you’re providing really can benefit from a longer form article, more words about it, and there are indications that search engines really value some of that longer form content. Don’t shy away from that just because you’re trying to optimize for mobile. Certainly make it clear and give it a strong structure so that somebody knows what information they can gather from reading that long article. But don’t shy away from the longer article if that can provide useful information to your visitor.

A couple quick testing tools, thinking about mobile user experience. The first is, Google’s mobile-friendly test. This is part of the search console tools, if you’re familiar with, it used to be called Google Webmaster Tools. You can go in there and just put in any URL, and it’ll come back with whether Google thinks that, that is friendly for mobile users. It’s a pretty high-level test, it’s really looking at a lot of the elements on the page as far as their button size: Is it clickable with a finger? And can you access all the information? Is it responding down? And is this the text size okay? Things like that.

This should be, for most sites, a pretty easy pass. So if your site is not passing this test that’s a pretty big red flag. Even if it is passing this test, this is obviously a computer-generated score. It’s not a user actually using this, and so there still may be some issues that you want to look at within the site, but at least you have the groundwork covered as far as Google is concerned. There are also some great tools within your browser that you may not know about especially if you’re not a day-to-day designer or a web developer. This is called the Inspector within Chrome, it’s the Chrome DevTools. Firefox also has developer tools inside of it as well. Both browsers work pretty similarly. It looks just a little bit different. But the process to launch this in each browser is Ctrl+Shift+I to launch that Inspector. You can also right click anywhere on a web page and choose inspect in Chrome, or inspect element in Firefox. And it’ll launch some tools to examine the page that you’re looking up.

From a mobile perspective, the tool that’s really useful is the mobile toolbar inside of this inspector. And so you can click on that little blue icon there that looks like a tablet and a phone next to each other. Or you can also hit Ctrl+Shift+M in either Chrome or Firefox once you have the developer tools open. And it’ll give you a view that looks like this. That gives you the page that you’re looking at inside of a mobile dimensions. And within Chrome you can choose from a variety of different devices, there’s that whole list there, right now we’re looking at the iPhone 6, but you can choose any of those different devices, and it’ll plug in the right pixel dimensions for you, or you can choose your own pixel dimensions where it has that 375 by 667, to get an idea of how your site is responding down to that particular size.

This is really useful because as you’re sitting at work, even my own tendency is to just pull up the site in your desktop browser take a look at it there. So this is a great way to still do that, but look at it in that mobile dimension and try to understand how somebody may be interacting with this content on a device. So I really encourage people to use this tool, use your phone as you’re sitting at your desk, and make sure that you’re looking at things, changing that default to think about looking at this first on a mobile browser.

Another great aspect of this tool within Chrome is you can actually choose what the network speed is. So this is the box over on the right that says, “No throttling” down to a bunch of different, kind of techie looking terms there. It’s got a number of different presets that will pretend to be different types of mobile networks. So you’ve got a highlight in blue there, a regular 3G network. And so it’ll throttle down your bandwidth, sitting at your desktop where you have, hopefully, really great internet at your desk. It’ll make it as though you are on a wireless network somewhere just like somebody that’s walking around and searching.

And so you can see how that page comes together, how it loads, how long it takes to load, one then the network connection isn’t as great as what we have when we’re sitting at our desks. So this can be a great reality check if you have a lot of mobile traffic, great as well if you happen to have a lot of folks still on slower connections. Some of the slower dial-up connections even in some areas that people are relying on, to try to understand what is the experience they’re having when they’re on your site over their less than ideal network connection. So we’ll touch on some more developer tools types of things in some of the other sections as well.

If you’re a designer, definitely spend more time with the non-desktop versions of the sites. Get in there with the mobile devices, make sure that you’re really thinking about what does that experience look like? What do people need to know and do from each screen? How are we presenting that to them in the clearest, most concise way possible? And just looking for some different ways that you could improve especially those page types that are top of the visits on mobile devices, just looking for some small areas that can be used to improve the clarity and focus of those screens. Can we remove some different navigation elements that are being used just to get better clarity? Can we move things around in the order on the page or highlight them in a different way, changing the size of elements for the information hierarchy, just to present it a little bit better?

For everyone, it’s important, to change your default behavior. If somebody wants you to take a look at something on the website, pull out your phone rather than going on your desktop and see what it looks like for those mobile users. Become aware of what your role contributes to that mobile user experience. So whether you’re that person that is editing content and updating information on the website, or whether you’re that person that is making, the strategic decisions about where we’re headed with our digital efforts, you have some kind of impact on that mobile user experience. And really thinking through, what is it I can bring to the table to improve that as I’m working on making these decisions? Are we considering what the mobile experience is as we start this new initiative? Have I thought about how this page is going to look on a mobile device as I’m editing that content? And, again, just looking for any small opportunity to make improvement, can really only help the overall experience.

Search Engine Optimization

Shifting to search engine optimization, I’m going to call out here as well. We’ve got a great webinar just from last month where Joanna Basile, our SEO expert gave an update on SEO for healthcare. If you want to deep dive into that topic, definitely go look for that on our site. All of our webinars are at geonetric.com/webinars and you can find any of those in our archives. But I would definitely encourage anybody that’s looking for more coverage of SEO to dig in there. We’re going to give a top level coverage to some issues that are particularly geared into the design process.

And rather than starting off with a stat about how many people use search to find health information, we’ve all seen that before, not really useful. We know it’s pretty much everybody at this point. This is, I think, a shocking stat from Kissmetrics. Don’t 100% know if I believe this or not, but they claim that 40% of people will abandon a website that takes longer than three seconds to load. So we certainly know some people are going to abandon that website whether it’s exactly three seconds or not. Not sure especially if they’re looking for some critical health information. But something to keep in mind, people easily get frustrated with slow loading sites, and every interaction they have with that slow loading site just gets a little bit worse until they’re going to abandon it not go somewhere else to find that information, whether that’s back to Google or over to a competitor site that happens to load a little bit more quickly.

We find that this page speed is really affecting SEO. And it does that in a number of different ways. The first is that this is a explicit ranking feature. Google uses PageSpeed, and some speed measures in how they rank the site. So that’s pretty straight forward. Another way that it can impact your SEO is by increasing your bounce rates, and inducing some Pogo-sticking behavior. So there’s some indication that Google actually watches as people bounce back off your site onto that search results page. That it can be an indicator to Google that they didn’t find what they were looking for on the page, and maybe that page shouldn’t rank so highly for that topic. One of the reasons they may be doing that is because it takes so long for that page to load, that they actually hit the back button and go back to search results, and maybe go on to something else. So that can have a negative impact as well.

The crawlability of your site also can have some impact on how well Google indexes your site, and how you rank. And so that’s something that can actually be seen, again, through those search console tools, that Google Webmaster Tools will show you the response times that it’s seeing as its crawler goes out on your site. And so that’s a pretty deep technical level of that, but that can influence how frequently Google decides to crawl your site. And that helps to get your content indexed if they’re out there a little bit more frequently.

The more subtle way that page speed can affect your SEO is by reducing shares, back links, and things like that. If people aren’t engaging with your content, they’re probably not going to be sharing it, they’re not going to be linking to it. And that, of course, can lower your overall rank. You want to keep in mind as well that a slow page speed is going to really hurt overall site experience and site performance. So it’s obviously going to reduce conversions if people are bouncing off the page. And it can potentially even increase your hosting and bandwidth cost. So if there are a lot of things going on, on the page, typically loading a lot of large files and making a lot of requests back to the server can slow down the sites, that can also impact some of your hosting situation.

So, just to give a little historical perspective, overall site speed, which I would define as the perceived performance of your site. So this is what is the user’s experience of interacting with the site? How fast does that interaction happen? Is something that’s been a ranking factor for a really long time. So this goes back to our Google blog post from 2010, almost exactly seven years ago, where they announced that they’re including site speed as part of their overall search ranking. So not necessarily a new thing, but what is new is Google has really started to shift towards using their mobile index as that first primary index that is going to rank the sites. So, right now, we don’t know the firm date on when this is going to happen, but they are currently still using their desktop index to rank sites across all experiences.

They’re planning to switch that so that their index and mobile sites, and the mobile experience will actually drive and be the primary source of site rankings. It’s problematic for a lot of site because they tend to score a little bit lower on the mobile speed test than they do on desktop. So this is both a negative thing, but also an opportunity if you start paying attention to that mobile speed and the page speed on mobile devices. There’s a big opportunity to move your rank up a little bit further versus competitors, just by paying attention to that mobile speed as Google makes the shift into mobile first indexing.

Just to show this isn’t just Google, Facebook has also been indicating that they’re going to consider website performance as people are viewing ads and visiting sites from Facebook, they’re paying attention to the speed that those sites are loading with. And that is something that they want to start to incorporate into their ad auction, so that if you are advertising a site that is going to be slower to load in a mobile browser, you may have to pay more for those ads, may not get as much access to ad inventory as somebody with a more performant website. So, a lot of different organizations out there, a lot of different effects coming from having slow site speed.

To get a sense of where your site stacks up today? The Google PageSpeed insights testing tool is a great way to go out and just plug in some URLs. Each page, from your home page, to any deeper page within the site, is going to have a slightly different score depending on what elements it’s pulling together. But this tool will give you a score for both mobile and for desktop. This is where you may see that your mobile score might be just a little bit lower than your desktop score. And then this is going to give you a set of items to maybe go out and fix to help improve that score. So we’ll go through what some of those elements are, and who may be responsible for fixing those.

You can also access a similar set of things within those DevTools within Chrome or Firefox. There are some different auditing tools within there. Again, this is Ctrl+Shift+I. And then if you click on that audits tab you can actually run an audit of the page that you’re on. I like to choose that option to reload the page and audit on load, that way it’s actually pulling all of the different pieces of the page together, all the images and JavaScript files, and everything. It’s pulling all those together as it runs that audit, gives you a little bit better picture of what’s going on. But you can see in this example, it’s coming back with some different recommendations to combine JavaScript files together to use a different compression to leverage the browser caching. A lot of different recommendations about what’s going on there.

When you get those recommendations back, it’s hard to understand what needs to be done with those if you’re not very technical. There’s a whole range of different issues that could be happening, and obviously, everybody has some slice of a role within what that overall page speed is for a given page on the site. So if you’re the author, or editor, or somebody entering content on the page, or maybe a designer that is working on a page, the number one thing that you can focus on is optimizing images. That is something that pops up quite frequently in running this page speed test, is that images have not been resized appropriately for how they’re going to be viewed within the page, so you’ve got a much, much larger…in terms of pixel dimensions image, than it appears on the page. So it’s using a lot more file size than it needs to for how it’s showing up.

And images haven’t been adequately compressed. So there’s a number of different tools out there. Things like PNGCRUSH or Kraken, that can take image files and continue to compress them down. Obviously there’s tools within Photoshop and other image editors to get those file sizes down lower. Something just to always be paying attention to how big is that file when you’re adding it into the page. If you have access as an author editor to JavaScript tags, or to add widgets into the page, that’s something to be really careful about. Accessing all those additional JavaScript files exactly where those references get put into the page, and how it’s loading those files across and interacting with the page can delay the page from actually rendering for the user. And so, even though you have access to do that, it takes a little bit of checking and know-how to figure out exactly where should those tags be placed in order to not impact the overall user experience.

A lot of times if you can avoid using those kinds of things, that’s probably the best thing. So rather than putting a lot of extra JavaScript, social sharing kinds of tags into the page, maybe better to either bake that into the design in a way that loads much more quickly, or avoid using them at all. There’s quite a number of page speed issues that fall into that design of and front-end developer area. So this is everything from prioritizing visible content. What the tool is looking for is making sure that the screen shows up, and is usable for that end user as quickly as possible.

So not everything has to have loaded, not all the files have to have made it from the server down to the user’s browser. But the user has to be able to interact with that page as quickly as possible. So it’s really looking for a number of different benchmarks, how the CSS files are coming across, what things are there from a JavaScript perspective, and how all those things are loading and allowing the page to actually lender. At a little bit deeper level you may need to get your IT team, or your software vendor into the mix to think about things like server response time, using compression. So making sure that files that are moving from the server are actually compressed to be a little bit smaller before they hit the user’s browser, and setting some of the server variables that can encourage browsers to actually cache elements so that they’re not reloading JavaScript files every time a new page on your site loads.

So just to give you a little bit of idea, where you might need to go with some of those different things. And really, I think it highlights that, what we think of as the design, think of as that experience of the site involves everybody on your team at some level. Another great tab just while we’re talking about some of the things in the Chrome DevTools, also in the Firefox developer tools, is the Network tab. This is a great way to go in and see, what are all of the files that this page is causing to be loaded into my browser? And you can see it’s quite a list. And for most websites it’ll be a huge list.

One of the most useful things I find within this is to sort this by size. And so you can see I’ve sorted it by size, and the largest file that was loaded is that banner image there of the woman kissing the baby. And so that came in at 102 kilobytes, not bad for a banner image there, they’ve done a good job of keeping their file sizes pretty small. But that is where you would see if somebody had actually uploaded a uncompressed, un-resized banner image, and it was several megabytes in size, that would be definitely a red flag that you need to focus a little bit more on getting the images down to size.

Another thing from a search engine perspective, is thinking about the actual markup that we’re using within the page. And this seems like something that we shouldn’t have to talk about at this point in time. We’ve been using HTML for years and years, but we’ve still got folks that are not necessarily using it in a semantic way. And what that means is they’re not embracing the meaning that those tags are supposed to have within the page and the order that they’re supposed to appear. And so what we end up doing is, we don’t like the way the H2 look, so we use an H4 instead, when we’re putting our headers together.

So this is something to consider both from the designer’s perspective as well as that content editor. If there’s a problem with how that particular header looks within the page, and the way that it needs to be used, that’s a great opportunity to have a conversation with the designer and say, “Hey, here’s an example of how we would like this style a little bit differently on this page, it just doesn’t seem to give the right hierarchy to the information. Let’s make it, less bold, or a little bit smaller, or create a CSS class that can adjust the appearance of that.” But you still want to, behind the scenes, have the right order of elements. So you still want to start out with an H1 on the page. The next header should be an H2. That could be followed by an H3 or another H2. You want to make sure that they’re nested appropriately.

The reason this is important from an SEO perspective as it’s also important for everything else we’re talking about. So it’s important from accessibility and a lot of different viewpoints. But it’s important for SEO because the search engines are looking to those headers to help understand what that content is about. It’s a great place to incorporate keywords into your content, and a lot of that user-oriented search language into the content. So you really want to make sure that you’re doing it in the correct way, and that you’re actually using those H tags on there.

We’ve seen sites as well that just have some sort of other added tags, something like a Div or a span that gets a certain CSS class or a certain appearance. It looks like a header if you look at it visually on a page, but it doesn’t act like a header to the search engine. So you really want to make sure that the markup that you’re using matches with its meaning, and really understand how those things are interacting. And if those things aren’t lining up, it’s a great conversation to have with the designer about improving that alignment.

I wanted to take a second here as well and talk about JavaScript, and how that interacts with SEO. We’re seeing some interesting things happen, both from the search engine perspective, search engines are getting much, much better at indexing content that is generated by JavaScript. It used to be that if you put something into the page using JavaScript, that would not show up at all in the search engine. That it wouldn’t even render that. It wouldn’t find that content. And so we really said, “don’t do that.” Now search engines are much better about actually running some of the JavaScript on the page, and generating that content and seeing what’s going on there. We have ways to encourage search engines to actually access pages that are generated dynamically on the user’s browser using JavaScript.

There’s a lot of things we can do from an SEO perspective, for those more dynamic pages. But on the other end of the spectrum, we’re also seeing more folks engage with even deeper levels of using JavaScript to run a site. So a lot of this falls into the area of JavaScript and VC frameworks. Things like AngularJS, Ember.js, React. If you’re hearing terms like that being thrown around, what a lot of sites are playing around with, and especially as they’re doing more mobile interactions, and having more of an interactive experience, is actually using JavaScript to pull content across, dynamically into the page. Giving a much more of an app feel. But it can be a little bit of a challenge from an SEO perspective. You want to make sure that there are URLs to access each screen of that app, or that end experience. There’s a lot we can do but it’s something that you want to think of up front, and really ask that question, “Have we considered SEO as we’re doing that?” So, it’s not, again, a black and white issue of, you know, “Don’t do that,” or, “It’s totally okay to do that?” You just want to make sure you’re considering the SEO as you’re launching that out there.

So to sum up what to do if you’re a designer, go take a look at that page speed test. Take a look at a variety of page types and see what’s going on. And really try to understand what are all of those elements that are coming together to make that score happen. As I was just saying, think about SEO if you’re implementing any JavaScript features, whether that’s just a little bit of script on a single page, or whether that’s a full on, headless browser, Angular type of site, you definitely want to think about how that’s going to impact the SEO of that content. You want to make sure that the HTML that you’re using is, first of all, meets standards, that it is standards compliant, and validates, and that it is semantic as well, so that you’re using the tags the way that they’re intended to be from a meaningful perspective.

Everybody has a role inside of becoming familiar with how their work impacts SEO. Whether that’s the overall page speed, whether that’s the way that they’re using markup, and just thinking about maybe doing an audit on the site to find out where some of those problems are happening, and what are some of the best practices that you should be weaving into your day-to-day work flows to make sure that SEO is top of mind.

Maintainability

The last piece that I wanted to talk about is maintainability. And this is something that we don’t often think about especially if you’re thinking about doing a redesign: you know your site has become un-maintainable, but you’re not necessarily thinking about, “Okay, how are we going to make sure that this doesn’t happen again? How are we going to change what we’re doing to make sure that this investment is going to last for the long term?” The reason that this has become so important from a design perspective, comes back to this whole soup of different acronyms here at the bottom of the screen. Thinking about how all of this technology is coming together to make up the site and realizing that this is a lot of code. This is a lot of scripting, this is a lot of markup, a lot of text files out there, with a lot of information in them that need to be maintained over time.

And it’s much more like developing software than ever before. And so what you want to avoid is getting into this kind of situation. You want to avoid spaghetti code. And that’s just a term for where you have so much code mashed together, that to you pull on any piece of it and you’re not sure what’s going to happen. You’re not sure how to untangle it or what other things are going to move when you make changes to a piece of code. Some things that you may be experiencing if you’re in that situation, number one, you’re probably scared to death of making any changes to your site. You just aren’t sure what’s going to happen. You don’t know, “If I change this script over here, what else is it going to break? If I change these CSS files, is it going to change the appearance of things elsewhere on the site that I’m not anticipating?”

You probably feel burdened by this, or locked into the current state. And part of the reason that you got here is you might not have really good coding practices. You might even not know what these things are, doing code reviews, or having automated testing using source control for your code. So if those things are missing, that’s probably an indicator that you could use some improvement on how you’re maintaining that code base. A lot of times you have just that one person that knows what’s going to happen, and so you have to go ask that person, “Hey, can we make this change? What’s gonna happen if we do that?”

You also notice on some of those page speed tests, or if you’re looking at that network tab within the developer tools in Chrome, that you’re seeing just a ton of JavaScript files and other code in there. There’s a lot of code within the pages across the entire site, just maybe more than you need to. And that comes from duplicating code. So if you’re having to make changes in multiple different places, and you’re not even sure that you found all of them as you’re updating the site. If you’re pulling in multiple versions of the same code libraries, so if you’ve got JQuery on the page twice because different things need different versions, that’s a big sign that things have gone wrong.

And so what can you do about that? Really it’s about finding a place to start. It may be a scenario that you need to overhaul the whole site to get it back to a place that you can move forward from, but as you’re doing that you really want to make sure that you have also begun to improve the coding practices. Are you sharing things internally? Are you having other people look at the code or the design that’s going into the sites? Looking for different ways, if you’re not going to do a full overhaul of the site, even if you have a few projects going on, there are probably ways to weave some improvements into those projects. Can we refactor some code? Can we rework some code as we’re doing this smaller project that will help benefit the overall project and get us to a better place?

And it’s important for everyone to realize all of the code that does go into that frontend experience of a website, and recognize that as something that requires an ongoing investment. Just because you launched the site three years ago, it doesn’t mean you don’t need to go back to some of that code, and to continue to improve it and make it better, and make it more capable of doing the things that you want it to do today. So that’s an ongoing investment and something to acknowledge, both from a design standpoint as well as that front-end development standpoint.

Key Takeaways

I wanted to go back and talk through some of the key takeaways. And the first is that concept that design happens. Everybody has a hand in design, and what design is the design of your site is really the sum of all of those decisions you’ve made, that affect the end user experience. That design really is that end user experience at the end of the day. Some of the biggest areas that we impact through all of those choices, are the overall performance of the site, whether that’s from a mobile user experience perspective, from the speed of the pages as they’re loading, from the SEO, the accessibility. Thinking about the analytics and the sustainability of that site.

And I want to leave you with some questions to ask as you’re thinking about the next project you’re working with online. That starts with how is this going to work for mobile users? So thinking mobile first, thinking about how people are going to interact with the site on their devices, making sure that, that is considered from the get-go in any project that you’re doing. Same thing for accessibility, how will this initiative meet our accessibility standards? How is this content we’re creating going to be accessible to all users?

Thinking about SEO in the same way, what is the SEO impact of this decision? If we’re going to design things a certain way, or create this kind of interaction. Does that have an impact on our search standing? And, always, I would encourage you to ask, “Is there a simpler way?” A lot of times we really want to have this big fancy experience that is going to look really great when we demo it, but for an end user using those assistive technologies, using a mobile device, or for that search engine. Somebody coming in from the search engine they just simply get an answer maybe just more than we need. Is there a simpler way we can approach this?

So with that, I want to say thank you for attending today. Thanks for hanging with us through all of this information. It’s a lot to take in. If you have any questions, I encourage you to reach out. We love to answer questions. And I look forward to seeing you for next month’s webinar.

Beneath the Surface: How Web Design Impacts Your Site’s Health