Content on your website is made for people, of course. But assigning the correct structure to the information (using the headings available for web content) ensure that people with disabilities are able to navigate effectively and provides detail for search engines, seeking out answers to all the questions they get. Here’s an overview and some best practices on applying heading tags to your site’s content.
Heading tags (<h1> – <h6>) help define a page’s content structure and document outline. They have a small effect on SEO and play a large role in ADA compliance.
Use headings whenever there is a new section or sub-section of content. This will allow visual users to skim over the entire document to find what they’re looking over. It also allows users with visual impairments to navigate through a page using assistive technologies.
Common errors with heading tags
The most common errors I see when using headings are:
Using the incorrect heading level
When using more than one heading on a page it is important to use the correct hierarchy. Using the incorrect hierarchy level can affect SEO and could make using assistive technology, such as a screenreader, very cumbersome. Be sure to never skip heading levels. For example, the heading after an <h2> should never be an <h4>, <h5>, or <h6> when starting a new section or sub-section of content.
Using headings to style text
This is often the #1 reason for using an incorrect heading level. While different heading levels can have a unique appearance, remember that heading tags are not there to make text look different. We have other ways of making any heading tag level look the same or different from any other.
Styling text to look like a heading but not using a heading tag
Rule of thumb: if it looks like a heading, it should be using a heading tag. While this might not affect visual users, it means assistive technologies will likely ignore this text when navigating through the document.
Heading tags in practice
Let’s look at an example page of the Portland Timber’s roster and some strengths and weaknesses at each position category.
If you take that page and break it down into sections and sub-sections you’ll see that the headings (bolded text) make this relatively easy.
If we go one step further and designate which headings designate sub-sections of previous headings, we now have a hierarchy and can establish which heading level to assign to each heading.
Since the page title, Portland Timbers, is the top-level heading, it will use a level 1 heading element (<h1>). In this example, the different position categories will use a level 2 heading element (<h2>) since they are sub-sections of the page title. Then the Strengths and Weaknesses sections, being sub-sections of the position categories, will use a level 3 heading element (<h3>).
Note that there can only be one <h1> element per page. This means when creating content, you should never use the <h1> element since it is already on the page title.
So we’ve covered when and where. In WordPress, there are two ways to apply the appropriate header: inside a WYSIWYG editor (as part of a section block or in the main content area of a post) or in a section block’s drop-down menu in the page builder. We’ll go over the specifics of how to do so in another post.
Last year I wrote an article discussing all the coming web design trends for 2014. Everything was set this month to produce a sequel article discussing all the brand new trends for 2015. But during my research, it became clear that the majority of the trends that were to be focused on were all a part of a larger trend; a movement, even.
That movement? Mobile first design, and it’s trying to turn your PC into a mobile device.
Mobile First Design
With the dawning of mobile web the need to make websites accessible to mobile users brought about the era of graceful degradation, more commonly known as responsive design. This concept is built on the foundation that larger screens got all the goodies while smaller screens had them stripped away, making many mobile sites merely a shell of their computer counterparts.
Mobile web traffic continues to increase and a revision to the web design process is needed. Mobile users can no longer be an afterthought. Smartphones and tablets are being chosen for web consumption over computers more and more frequently, which means mobile websites can no longer play second fiddle to their larger desktop versions.
Enter Mobile first design, waving the banner of progressive enhancement. The concept is nearly the exact opposite of responsive design: a site is initially designed for smaller screens and then grown to accommodate larger viewports. This could mean adding additional features as the device size increases or merely modifying the size and layout of the same elements that are seen on the smaller version.
Consider this: what is a mobile device? We can’t use size as the defining factor as we now have tablets the size of small laptops. Touch-screen, you say? Go ahead and toss that one off a cliff as well because we now have touch-screens on devices ranging from phones to large-screen televisions!
Mobile first design ensures that even the most limited device will still provide a great user experience. Smartphones hold that title for websites, although the technological advancements in recent years put their processing power on par with some laptops and leaving screen size as their main limitation. No longer do designers have to decide which elements and features are headed to the chopping block as with graceful degradation; instead they are allowed to add to their creation as needed when working on a platform with fewer restraints.
Enough about the why. Let’s check out how designers are using the mobile first movement to turn computers into tablets.
Scalable Content To Fit Any Space
A typical website will have some sort of identifiable bounding box that keeps the content within a certain area of the page, but we can expect to see fewer of these in the future. Content is starting to be designed to utilize however much space is allowed so that it covers the entire browser.
The concept of changing based on screen size might be old news, but what is interesting about how mobile first designs are handling the larger screens is that we are not seeing the drastic layout changes that typically are accustomed to graceful degradation. Images and text are scaling up for larger screens, so when the same site is viewed on a tablet they are almost identical.
The elements at Drury Buildings scale based on the user’s viewport.
Navigation Through Scrolling
Get your mouse wheels greased up as the prohibition on scrolling has been lifted. Scrolling is a necessity on mobile devices which has helped make users more accustomed to the idea that what they’re looking for might be a few swipes away. This is especially true for home pages as users are more likely to scroll through a page to find content rather than try multiple links.
The freedom to scroll is sure to have brought much joy to designers everywhere as they are no longer bound by the requirement to stuff as much as possible above the fold. This allows for more unique and outside-the-box designs to be utilized and could mean the end for certain methods of displaying groups of content such as slideshows.
Apple’s product view for the iPhone 6 heavily utilizes scrolling to display product information.
App-like Menus
Simplicity has been a trend for quite some time, and one of the most common practices for achieving this is to remove all of the non-essential elements from the user’s view. Even though the navigation menu certainly cannot fit into this category designers are beginning apply mobile practices to it across all devices and screen sizes to achieve simplicity nirvana.
Whether referred to as the 3-bars, the navicon, or the pancakes, anyone who has browsed the web on their smartphone knows how to find the navigation menu. This icon has been a great asset for the web on touchscreen devices. By allowing the menu visibility to be toggled on and off, valuable screen space can be made available for other elements without sacrificing site usability.
Thanks to user familiarity with this navicon we have began to see its use outside of smaller screens. Rather than displaying the menu at all times, the once mobile-only icon resides in its place and toggles a slide-out menu akin to mobile and web apps.
24 Ways has an app-like feel thanks in part to its slide-out navigation
Over the short life of the World Wide Web we have seen standard practices change and evolve as technology advances and its audience changes. As the line between computers and mobile continues to grey mobile first design is set to be the next big standard, rising out of necessity on the back of responsive design. This brings about change both for the users and how they interact with the web, but also with designers and developers as their thought process must change to achieve their goals.
Has your design team adopted a mobile first approach to your web projects? Have you found clients open or resistant to this approach? Leave a reply below. I’d love to hear your thoughts.
More helpful articles on web design by Edge’s resident code whisperer, Gavin Heslop:
Walking into a room full of people you barely know can be extremely daunting. You ask yourself, “How could I possibly stand out or be heard?” You may feel that you don’t have anything to contribute, or worse, that there is nothing you have to say that would be of value to these people. Let these two words stand out above the chatter going on in your mind – Stop It!
Put your fear aside and consider it an opportunity. The truth is, with the right strategy and focus, networking can be an opportunity to stand out among the competition. Adjust your approach using these five tips for better networking.
These are easy to apply and will help you go from discouraged and overwhelmed, to clear, focused and highly effective at building relationships.
1. Have a Plan
Having a plan is key before engaging in any networking opportunity. Plan out what you want to say. Focus on communicating your strengths and abilities and avoid discussing your shortcomings. Also, make sure you know and communicate your value proposition. Your value proposition is a clear and concise statement that sums up what you bring to the table. Worthy repeating…keep it clear and concise. If you relay this proposition to a potential contact, and they don’t find it useful, they may be able to connect you with others who would.
2. Networking is a Two Way Street
A large majority of people approach networking only seeking out people who can do something for them. Networking also involves listening and helping others not just trying to achieve your own goals. Be known as someone who is willing to give and be useful with no ulterior motives. Do not keep track of favors. There is no room for that in successful networking. In the end, successful networkers do more for others than they for themselves. Find joy in helping others succeed!
3. Treat All People With Respect
This one might be a no brainer, but it is worth mentioning. When entering a large room full of people with whom you want to network, refuse the urge to search out titles. Networking happens when everyone in the room feels equal. This great C.S. Lewis quote sums it up thusly:
Friendship is born at that moment when one person says to another, What! You Too? I thought I was the only one!
Strive to discover the value of everyone. Learn about them. Genuinely listen. Hear their story. See how you can connect them to others you may know that would help achieve their goals and enrich their journey.
4. Follow Up & Follow Through
Following up and following through are instrumental in successful networking.
Everyone is busy. Don’t use that as an excuse for not following up or following through. Keep in mind basic relationship building principles and touch base with your network outside of those times you need something. After all, networking is more than tapping into other’s resources — it’s still about building relationships and all relationships fail if there is no effort to keep them up.
Tip: If you are going to an event where you know you are likely to be networking, or expected to be, schedule 20-30 minutes for the following morning to follow up with the folks you might meet at the event. This helps remove the excuse of not having time to follow up.
5. Be Authentic
Authenticity is one of the most powerful attributes of networking. In my opinion, it’s more important than your experience, education, or skills. To be authentic is to stay true to one’s self. Deviating from your true self will only expose you as desperate and disingenuous. People can sense inauthenticity and it is incredibly off-putting. It is important to show your connections exactly who you are so they can clearly understand exactly what you are offering them.
Authenticity is one of the most powerful attributes of networking…it’s more important than your experience, education, or skills.
In the end, networking does not need to cost you a lot of time, money or expertise, but rather focused effort. And if done right, the returns and benefits from networking will easily outweigh the means required.
When designing a website, the most important element is the navigation menu. It is responsible for guiding users to each part of the website and is the most interacted with part of the user experience. The navigation’s ease of use will have a great effect on conversion rates, as users who become frustrated with the navigation will quickly begin to look elsewhere, often avoiding a hard to traverse website altogether in the future. Poor navigation can seep into brand perception.
So a quick way to ruin a user’s experience and send them fleeing from your site to a competitor’s is to welcome them with an overwhelming navigation menu. Users become perplexed when their path becomes convoluted by copious amounts of links, confusing verbiage and positioning, or over-extravagant animations. Improving user experience by offering simplified navigation that provides clarity to the user experience can go a long way in avoiding user frustration. In other words, the goal should be to make it easy for them to find the information they came looking for.
To help avoid a bad user experience, we’ve put together a list of some of the best practices in navigation design that can help build navigation that provides a clear path for users to travel to get where they want to go. Most of these can be implemented fairly quickly, and while it is best to consider these when beginning the design process, the majority can be utilized on active websites as well.
If you want to improve user experience then your goal should be to make it as easy as possible for them to find the information they came looking for in the first place.
Consider the Content
Before beginning to think of what links to include the content must first be organized, creating logical groupings of all pages into categories and subcategories. If need be, create a site map diagram to visualize the hierarchy of the content. Be sure to keep the users in mind when doing this, recognizing that how they would structure the content might be different than what someone inside the profession would.
Once the content is organized it can be arranged into categories in order of importance. Categories deemed most crucial would be those that are important to all users, followed by those that are important to some, but not all, users. The last tier of categories will include content that does not get a lot of hits but is still a necessary piece of the puzzle. If an active website is using analytics it can act as a guide as to what categories should fall under what tiers of importance.
Content Flow Diagram: Arrange content into prioritized categories. Take the perspective of your user/audience when creating a Content Flow Diagram.
Universal Navigation
Probably the most important factor in proper navigation design is positioning the menu in the same location on all pages. By keeping the location consistent users are given a spot where they know they can go to if they need to go somewhere else on the site. Most websites will have a bar at or near the top of their pages, while the majority of those that do not place them on the left. While exact position is not the same, what will be found on any good navigation menu is that the position stays the same and that they contain links to the important categories of the site.
Rule of Seven
Another way to make navigation easier for the user is limit the options to select from. With a smaller selection, the user has less of a chance of skipping over important items as they scan over the list of links. Psychology experiments have come to show that the average human mind can store an average of seven items at a time, so that should be the maximum number of items in navigation. More often than not this is more than substantial, and if an even smaller number can be used then all the better!
If there are issues dropping the number of navigation items down, try moving some of the ones of lesser importance to other areas. For example, as it is fairly standard for a website’s logo to link to the home page it should not be a problem to remove a similar link from the navigation. Another option would be to move utility links, such as Contact Us or Login, to an area above the primary navigation.
Drop-down Menus: Do Them Right or Not at All
Many designers (myself included) have utilized drop-down menus for their ability to make more links accessible from the navigation menu without over-crowding. However, the hard truth is that drop-down menus are not perfect; there’s no if, ands, or buts about it. They are not the SEO faux-paux that they once were when they were heavily dependent upon Javascript and Flash, but there are still a handful of drawbacks when it comes to using drop-downs.
The first and greatest shortcoming of drop-downs is that they hide relevant links from the user’s initial view. A typical user does not stick around for more than a few seconds before they establish whether a site has what they’re looking for. By hiding important links users are forced to dig deeper to see if they are where they need to be, and unless they intentionally came to a site they aren’t likely to be willing to poke around for long. Drop-downs also discourage users from viewing important pages, as they tend to head directly to the links in the submenu.
Another issue with drop-downs is that if not properly developed they can be nearly impossible to use. If submenus appear or disappear too quickly, the user is required to use precise mouse movements to view and select the link they want, which can be extremely frustrating.
All that being said, the use of drop-downs is fairly common throughout the web, with most users having learned how to deal with them. There are also some instances where users find them to be more beneficial. If a website is deemed worthy to benefit from drop-downs it would best be served following these rules:
Indicate a submenu – The best drop-down menus have some sort of visual hint (typically a small arrow) that a submenu is present. Without these a user may never realize that there are more options available to them, or may waste valuable time testing each link to see if a menu appears.
Make them usable – When developing drop-downs, be sure that the submenu remains visible for a fraction of a second after the user leaves it, as this allows them a grace period in case they overshoot the area with their cursor. The same should be done for when they initially hover over the top-level link. This ensures that they intend on displaying a submenu, rather than having them display on accident. That being said, submenus should be hidden immediately when another one is being displayed.
Leave no user behind – Drop-down menus can be borderline impossible to use with touch-screen devices since the majority of them rely on a hover event that can be very finicky to implement. There can even be issues on desktop browsers, as users who have disabled Javascript will find that drop-downs that rely on it to be inoperative. To avoid these situations be sure that top-level links are able to be clicked, thus removing the need for a hover state to be triggered. In some cases, a unique menu experience developed for mobile devices is the best choice.
Don’t over-crowd – The same principle applies to submenus as it does to main navigation. Be sure that only a handful of links are listed in each submenu to limit the options the user needs to choose from.
Limit to a single sub-level – Working with two levels of navigation can be a nuisance on its own. It is very seldom, if ever, that a third tier provides a beneficial user experience.
Apple’s site is a great example of quality navigation. The combination of conventional layout and positioning, only seven choices, and the use of product names as labels allows users to quickly find what they’re looking for. You will also notice that in lieu of drop-downs a relevant secondary menu is provided only when on internal pages.
Succinct Link Labels
It can be a daunting task when deciding on labels for navigation links. First off they need to be relatively short in length in order to accommodate all of the other labels, but also so that they are easily read as users skim over them. In addition to this, the labels need to be descriptive so that the user has a clear idea of where they will be going if they select it.
Because of this, labels such as “Products”, “Services”, and “What We Do” do not do much for telling the user anything about where they’re going. While they know what sort of information they are about to view these labels are still somewhat vague. In addition to being only marginally helpful to users, these sorts of generic labels are almost useless when it comes to SEO. Valuable link juice is being used up on generic terms that are not going to be helpful to rankings.
If the site’s main products or services can be listed in the navigation, the user will be able to quickly determine more specifically what sort of information they will find than they would with generic labels. Be careful not to use words or acronyms that are only understood in the company or industry, as they may be foreign to the average user and/or your target audience. Using tools such as the Google Keyword Planner to determine commonly searched keywords and keyphrases can help in selecting succinct labels for navigation.
For innovation to succeed it must solve a pain point or create a better overall user experience.
Convention is Key
When designing website navigation it is best not to stray from standard conventions. Part of building a product that people will enjoy using is creating something that doesn’t make them think. When outside-the-box concepts are implemented it can have a negative impact on the user’s experience.
Think about if a new car was for sale that replaced the steering wheel with two levers on either side of the driver’s seat. Who would buy that car? People would have to re-learn how to avoid other drivers and stay on the road! This might be an extreme example, but the principle behind it is clear. Your website must be intuitive enough so that any user can ‘steer’ it.
Remember that just because navigation is conventional doesn’t mean it has to be mundane. Innovation has its place, but when it comes to areas that tend to follow a standard convention across the board it should be limited to aesthetics and steer clear of functionality. Consider our steering wheel example. Not all vehicles have identical steering wheels. There are, in fact, a wide array of options with different colors, shapes, materials, contours, and embedded accessories on each one. However, they all share key similarities with regards to form and function: located in front of the driver, rotate left to turn left, right to go right, push the center to honk the horn.
No one would argue against the benefits of innovation. Without original ideas we would still be hunting our food with rocks and this article would have been written by hand, contained in a book that weighs 30 lbs that is chained to a shelf. Hardly mobile-friendly. For innovation to succeed it must solve a pain point or create a better overall user experience. So when straying from convention the question that must be asked is, “Does this add value to the product?” When applied to navigation, it could be put this way, “Will the user have an easier time finding what they’re looking for?”
In the end, the helpful points are of far greater value than the style points.
Does your site’s navigation need streamlining? Are you seeing high bounce rates off your pages? The people at Edge have the know-how to help improve user experience on your website. Succeed with well-organized content and well-structured, helpful navigation. Check out our Next Step Tool to get the ball rolling or get in touch with us and we can help you create a successful website.
Effective use of video content in your digital marketing shows off the Who, Where, What, Why and How of your brand.
Get Your Content Strategy Streaming with Explainer, Showcase & How To Videos
While copy is still the reigning champion in the content world, video content is steadily gaining ground. There may never be a full takeover, but Explainer Videos, Showcase Videos and How To Videos are certainly proving that they have their place. The use of video in online marketing is quickly increasing with the numbers to back it up. 90% of consumers in an online retail setting claimed that video content played a key role in their purchasing decision. 64% of consumers were more likely to make a purchase after watching a video on the retail site.
One of the great elements of the Portland tech community is not only its diversity but also how frequently events are organized to encourage networking between like-minded individuals. On the 13th of August, members of the Edge production team had the opportunity to attend two such events covering two of the leading web marketing trends: mobile and SEO.
We could all take a page from Esmée’s book when assessing our content, asking more than “can they see it?” but also “can they use it?”
The first event was sponsored by AMA PDX and was held at Bridgeport Brewery. Esmée Williams of allrecipes.com, the world’s largest digital food brand, discussed their marketing strategies as they saw mobile views increasing on ther sites. She discussed how their plan of action extended beyond making their content more viewable on mobile devices, but also more usable. While these two ideas are often one and the same, the latter seems to be a topic that is often overlooked while responsive design, m-dots, and mobile apps take up the bulk of the conversation. We could all take a page from Esmée’s book when assessing our content, asking more than “can they see it?” but also “can they use it?”
The day ended on the roof of the Embassy Suites for the fifth annual SEMpdx Rooftop Networking Party. From an avid snowboarder from Spain to a soon-to-be father from North Carolina, the upper deck was filled with marketing professionals, each one adorning sunglasses and with business cards burning holes in their pockets. With a wide variety of stories and strategies this was a great event for anyone who is either interested in SEO or just enjoys hanging out on a roof top downtown.
Panorama of the Portland’s Pearl District taken by Gavin Heslop at the annual SEMpdx 2013 Rooftop Party.
