I love it when designers I work with ask for tips on how they can up their game and improve their sites from a development perspective, but I sometimes end up feeling bad because I don’t always have very concrete suggestions to give.
This post is an attempt to change that by providing eight specific things designers can pay attention to as they work on the visuals for a website to ensure that it’s optimized in terms of SEO, accessibility, and performance.
Just to note, I’m definitely not an expert in these areas, and I’m not trying to suggest that these tips will get you all the way “there” in any of them. Nothing in web design and development is really that cut and dry. These are just a starting place.
Before I dive in, let’s make sure we’re on more or less the same page about what these terms mean.
SEO: Search engine optimization, or making sure that a website is easily and correctly indexed and displayed by search engines. SEO also involves finessing a website so it appears higher in the results for various terms and search phrases.
Accessibility: The extent to which a website is accessible (usable) by all people. A lot of the time we think of this as meaning “people with various disabilities or challenges to access” but that’s kind of limiting, as you can read about in this great A List Apart article.
Performance: The speed with which a website loads across devices and at various internet connection speeds. Can also tie into how smoothly interactions function, but generally load speed is focused on the most.
1. Content Hierarchy
If you take a website down to the bare bones by removing all the images, styling, and special effects, you’re left with text and links down a page. Remembering that is foundational to strong SEO, performance, and accessibility.
A bare bones website is going to perform really well without any extra work. If a site has a strong outline and clear content hierarchy, that further aids accessibility and SEO.
What happens is that we get a little crazy with design and functionality and code, and/or we don’t have a clear content structure laid out from the outset, and we end up loading a lot of extra stuff (slow!), making it harder to navigate the content via keyboard, and confusing the heck out of search engine crawlers.
One of the best places to start is with that bare-bones content hierarchy. Outline the page and figure out the levels of headings (go back to your school outline days and use multi-level lists), and how the actual content should flow in terms of order, priority, and sequence. Then let that inform your design choices.
- Don’t skip the outline – actually write it out and use indented lists to determine the hierarchy
- Keep your heading styles as consistent with our your outline as possible, as search engines use heading levels (H1-H6) to understand how content is organized
- Try not to mix up the content hierarchy or sequence during design
2. Page Flow
You can think of page flow as the highest level of the content hierarchy – it’s basically the way the content flows across pages. Most often, this shows up in web projects as a sitemap.
Sitemaps and the way pages link back and forth to each other are important for SEO and they also impact how easy it is to navigate across a site (accessibility). This comes into play in navigation structures, and also in overall content organization
- Make sure that high-priority pages or pages that you want to be more easily discoverable are linked early in the site (e.g. header navigation)
- Cross-link between pages, and use clear phrases as the link anchors (the clickable text) so that it’s clear to search engines where the links go and what the linked pages are about
- Work with the client to figure out which content belongs on separate pages vs. which will actually be easier to find and understand if it’s combined on the same page
3. Image Usage
It’s probably not news to you that the more images you have and the larger the images, the slower the page loads. Remember, though, that that includes both content images (e.g. the images in blog posts) and layout images (e.g. backgrounds and other design elements).
The answer may be “yes” a lot of the time, which is fine as long as you’re making that determination with the tradeoffs in mind.
Keep in mind that many image areas/ layout graphics can be handled in a variety of ways with small adjustments to the design that may lead to big wins in performance. This is a place where it helps to either have a basic understanding of CSS or to have a quick conversation with your developer to check your options.
- Avoid using images to replace text, generally considered a bad practice for both accessibility and SEO
- Where possible, use design treatments that can be done with CSS
- If you need a large background or patterned area, use a repeating graphic where the individual tile is as small as possible (and provide your developer with the tile graphic)
- Keep varying resolutions in mind and use SVGs/ icon fonts for as many graphics as you can (especially icons and logos)
- Consider how layout graphics will work/ appear across various devices (very small screens to very large screens) and how that impacts resolution, scale, and file size
- Edit, edit, edit!
4. Font Usage
Just like images, it’s best to be judicious in your usage so that you’re not loading a ton of files just for one minor design effect.
Remember, you’ll generally need at least four weights for just your body text (normal, italic, bold, and bold italic), so if you add a display font for headers you’re already at five weights. Carefully consider every new font and weight and make sure they have the impact that merits the file size.
- (it’s also helpful to share a list with your developer once you’re done as part of your style guide)
- Old-school “web safe” fonts are still a thing in that you’re not dealing with loading fonts if you use them – while they may not work for all designs, if they work for yours don’t be afraid to use them!
- Common fonts, like those from Google fonts, may already be cached in your visitors’ browsers (if they’ve visited other sites that are loading the same fonts), so they can be a good choice for speed
- Tools like Google fonts and Typekit give you file size data to use in when weighing adding a new font weight against performance
- For accessibility purposes, make sure you’re checking web fonts across browsers for legibility
5. Special Effects
Yes, animations, sliders, carousels, and lightboxes are kind of fun and can be nice for user interaction purposes, but they also add complexity to the page, can be really hard to adjust to smaller devices, and can cause all kinds of accessibility issues.
Don’t add effects and features just to add them or to please the client – make sure they truly serve a purpose based in user experience design and focused on the site goals.
- For every feature you consider adding, think through how it should work across various contexts (desktop, mobile device, keyboard navigation using the tab key, etc.)
- Familiarize yourself with enough research on common features to be able to present intelligent counter-arguments to clients who want sliders just because they like them
- , then add them as a bonus layer for users who are able to use it given their device settings (also known as “progressive enhancement”)
6. Form Structures
A trend in form design (for everything from contact forms to newsletter opt-in forms) has labels being replaced with placeholder text. (Placeholder text is the in-field text that disappears once you click the field.)
There is plenty of research explaining why this is bad, and there are some interesting proposed alternatives.
If it’s something really really obvious (like a single email input field for a newsletter opt-in), it’s going to matter less than if it’s a complex multi-field form.
Here’s an extensive post explaining and showing more on the topic of select/ drop down menus.
- Read this excellent post on label patterns, as well as all the other posts and articles it references
- Use standard select/ drop down menu styling or communicate to the client that on click the select will remain browser standard even if the initial view is customized
- Consider the order of fields in terms of what users will expect when they’re entering their info into a form
7. Icon Usage
Just like placeholders are not really good replacement for form field labels, icons are not necessarily good replacements for buttons with text and clear button styling.
Research shows that icons don’t always increase usability, and that for all but the most recognizable icons it’s a good idea to use text labels alongside each icon.
This comes up a lot with hamburger icons for menus (research on hamburger icons is available), but is also true for other types of icons.
There are also all kinds of issues with icons and accessibility when they’re completely replacing words, which makes for more work for your developer to ensure that screen readers are saying the right things (or anything at all) when they hit those icons.
Finally, icons are another thing to load in the page (and they can actually get pretty heavy depending on how many you use and how you’ve created and implemented them).
- Where possible and logical, pair icons with words
- – use familiar icons, especially for important links
- To maximize display quality and performance, use SVGs and/or icon fonts and provide clear info in your style guide about where your developer can grab those files to implement
- Read this extensive article on accessibility practices for icon fonts
8. Clear Interactions
Last but not least, think about each action your users will want to take with your design and make sure it’s super clear how they can and cannot interact with it.
If something is interactive, it should look interactive – there should be a hover state of some kind, at minimum.
Conversely, if something is not clickable, it shouldn’t be styled like a button, nor should it be created with an element like a link or button that has been disabled (bad for accessibility).
- Be sure to include hover and other interaction states in your designs, clearly indicated for your developer via layer comps or highlighted layer groups and/ or a style guide
- Use your design to focus visitors on the key interaction points and guide them to want to interact
- Keep in mind that some users won’t actually have a real hover state (whether it’s due to keyboard navigation or a touch device), and account for those instances in your design
- Don’t hide vital content behind hover states
Here’s the bottom line:
Everything in your design should be there for a reason, whether it’s an image or a font, and that reason should be weighed against potential performance, accessibility and SEO implications.