Skip to main content
Building the main navigation for a website

Building the main navigation for a website

web.devweb.dev3 weeks ago in#Web Design Love57

Home All articles This tutorial describes how to build an accessible main navigation of a website. You learn about semantic HTML, accessibility, and how using ARIA attributes can sometimes do more harm than good.Sep 7, 2022 There are many different ways of building the main navigation of a website, in terms of styling, functionality, and the underlying markup and semantic information. If the implementation is too minimalist, it works for most people, but the user experience (UX) might not be great. If it’s over-engineered, it might confuse users or even hinder them from being able to access it at all.For most websites, you want to build something that’s neither too simple, nor too complicated.Building layer by layer #In this tutorial you start with a basic setup and add features layer by layer up to a point where you provide just enough information, styling, and functionality to please most users. To achieve that you make use of the progressive enhancement principle, which states that you start with the most fundamental and robust solution and progressively add layers of functionality. If one layer fails to work for some reason, the navigation will still work because it gracefully falls back to the underlying layer.Basic structure #For a basic navigation you need two things: &LTaelements and a few lines of CSS to improve the default styling and layout of your links.Home&LT/aAbout us&LT/aPricing&LT/aContact&LT/a/* Define variables for your colors */:root { –color-shades-dark: rgb(25, 25, 25);}/* Use the alternative box modelDetails: &LThttps://web.dev/learn/css/box-model/*/*{ box-sizing: border-box;}/* Basic font styling */body { font-family: Segoe UI, system-ui, -apple-system, sans-serif; font-size: 1.6rem;}/* Link styling */a { –text-color: var(–color-shades-dark); border-block-end: 3px solid var(–border-color, transparent); color: var(–text-color); display: inline-block; margin-block-end: 0.5rem; /* See note at the bottom of this chapter */ margin-inline-end: 0.5rem; padding: 0.1rem; text-decoration: none;}/* Change the border-color on :hover and :focus */a:where(:hover, :focus) { –border-color: var(–text-color);} View Step 1: Basic HTML and CSS” on CodePen.This works well for most users, no matter how they’re accessing the site. The navigation is accessible with a mouse, a keyboard, a touch device, or a screen reader, but there’s room for improvement. You can enhance the experience by extending this basic pattern with additional functionality and information.Here’s what you can do:Highlight the active page.Announce the number of items to screen reader users.Add a landmark and allow screen reader users to access the navigation directly using a shortcut.Hide the navigation on narrow viewports.Improve focus styling.Highlight the active page #To highlight the active page, you can add a class to the corresponding link.About us&LT/aThe issue with this approach is that it conveys the information which link is active purely visually. A blind screen reader user couldn’t tell the difference between the active page and other pages.  » Read More

Like to keep reading?

This article first appeared on web.dev. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.