The A-Z List for Web Designers

There are so many technical aspects of web design and development that it can be pretty hard work getting to grips with all the intricacies that have become a part of our ever-growing industry. This A-Z list attempts to assigns each letter of the alphabet to an important aspect of our work as professionals that make websites. In this list, you may come across terms you’re already aware of, or things you might not have ever heard of, but in any case, I recommend that everyone should have at least a basic working knowledge of these particular items.

Some things are more orientated toward design, others are aimed toward front-end development, but all of them provide their own unique benefits to the web pages you build.

A is for Accessibility

Accessibility is one of the most critical aspects of our job, as many individuals browse the web with impairments that require non-traditional means of website access, such as screen readers and input-assistive devices. Accessibility, though, is also about universal design; designs that can be used through various situations such as mobile devices or older browsers.

While there is no clear definition as to how far accessibility extends, a range of best practices to help certain conditions (such as visual, aural, and motor impairments) have been produced. If you’re not already aware of such issues, it’s well worth investigating further. The Web Content Accessibility Guidelines are a great place to begin looking at the subject of accessibility. Laws in many countries influence the need for web-accessible websites as a result of governments seeking to give its citizens equal access to information technology.

Most web designers can implement accessibility standards at a basic level just by following web standards and best practices, and these implementations often improve the quality of the site produced, even for able-bodied site visitors. Web accessibility is quite an intricate subject, and will require time and experience to learn fully, but knowing that your products provide universal access makes it worth the extra effort.

B is for Browsers

Every internet-enabled device has software that makes those lovely pages of yours viewable by users.

The browser is that software, and it is among the most vital elements of the web experience. Most browsers these days render sites uniformly, but old browsers like IE6 may give you issues. If you see a person using Internet Explorer 6, you may as well abandon all hope! While hundreds of browsers exist, there are at least five major browsers that you should be concerned about: Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari and Opera.

A web designer having all of these browsers installed on their work machine for testing purposes is not a bad idea. In addition, testing on mobile devices (using their native browsers) is also recommended.

C is for CSS

CSS is the primary method of styling HTML elements.

It’s what makes a boring page look visually stunning. The Acid tests show CSS-standards-compliance of a browser. Cross-browser compatibility is an issue with CSS — so it’s important that you validate your code, know all of the selectors, properties and values you can work with, and consider the browsers’ needs. If you’re thinking of expanding your knowledge of CSS for future-standards-compliant browsers like Chrome, Safari and Firefox, now is a good time to learn about how you can progressively enhance your web designs with CSS3.

D is for Debugging

Sometimes your code doesn’t work in the way that you intended. The need for debugging has only increased with the range of web languages we now use, the more complex styles of designs we produce, and the chaotic amount of browsers — that now includes the Mobile Web — we need to support. Ensuring that your code works (and works well) has become a skill that all designers should possess.

Firebug is an awesome browser extension for debugging front-end source code. Being able to surgically resolve rendering issues requires a deep and insightful knowledge of the languages you work with, patience, experience, and critical thinking skills.

E is for Ethnography

Let’s face it, your site’s most important component are the visitors who spend their time browsing your pages. The subjects of Ethnography and, to a greater extent, sociology, are based around the need to understand your audience.

It involves collecting meaningful data through studies and research in order to determine the optimal design for a site. Statistics, such as those from W3Counter, help you understand an audience. While you may think people are all relatively the same, the cultural differences within us have effects in the way our designs are perceived. It’s worth learning about sociology, even in just a fundamental level.

F is for Flash

Love it or hate it, Adobe’s Flash is a widely implemented web technology that has been around for years. While HTML5 won’t kill its purpose as a tool for rapidly building rich, responsive and interactive content (e.g. web-based games and animation sequences) anytime soon (if at all), its worth knowing how the technology works if you are considering the use of highly interactive web media in your web designs.

While Flash is well supported, it can be easily disabled or uninstalled. It’s important to ensure that your site works if Flash is not supported by the user’s browser. Many people choose to have Flash disabled, and Apple just recently undid its ban of the technology in its devices. Flash is an excellent web technology when developing with design best practices in mind.

G is for Graphics

Websites without images and graphics would be boring, and knowing how to create useful and captivating images is an imperative skill to have as a web designer. Images are a huge part of the web. Since the early days of the web, the ability to embed images in an HTML document has enhanced the level of visual aesthetic that can be applied to a page layout. Graphics are often used for things that can best be presented in visual form rather than text form.

For example, charts and graphs can enhance the reader’s ability to understand data being presented to them.

H is for HTML

If you build websites, you need to know HTML. It’s pretty much as simple as that!

The structural language has been around since the web came into being. HTML is meant for marking up your content in such a way that it emphasizes the semantic meaning of it. Validating your code using services such as W3C’s Markup Validation Service is a good idea. While cross-browser compatibility isn’t so much of an issue with HTML (unless you’re branching out into HTML5 or using the proper MIME-type for XHTML), it’s still important to validate your code and use the right HTML elements for the right job.

HTML is often the starting point for web designers and developers alike and is the most fundamental component of our websites.

I is for Interaction Design

Back in the early days of the internet, web pages were static. We have evolved past that boring era, and now we have pages filled with stuff that moves, responds to user actions, and provides rich components for our visitors that improve their experience (e.g.

web forms and real-time information widgets). Interaction design focuses on the philosophy that websites should be utilitarian. Getting visitors to interact with your site requires an engaging and useful experience. Whether you use polls, have contact forms, or host a forum — knowing solid interaction design principles is a worthwhile pursuit.

J is for JavaScript

JavaScript tends to scare beginning web designers off due to it being more complex than the simple markup language they’re likely more familiar with (HTML). However, JavaScript does play an instrumental part in making modern websites, and especially web applications. JavaScript enhances the user experience through asynchronous, real-time updating of web pages when an event is triggered (such as a click) through a technique collectively known as Ajax.

JavaScript also provides slick interactivity and smooth effects that, by design, is aimed to improve interaction tasks. JS frameworks like jQuery aid agile development. JavaScript does have its limits (and for a good reason, as it could be used to exploit vulnerabilities in a user’s computer) and it may not always be available on a user’s browser because it can be disabled. Just like Flash, the best practice for JavaScript is that a web page should be usable and accessible without JavaScript.

K is for Keywords

OK, so this one is stretching our web design A-Z list a bit. However, keywords do play their part in search engine optimization and web marketing, which relates to web design. Marketing has an unbelievable level of influence on the success of the website projects you build.

Marketing your website can be done on-page, off-page and even totally offline. While marketing may appear like child’s play, there’s a lot more to it than meets the eye. Advertising, SEO, conferences, meet-ups, sponsorship, social networking, viral promotions, PPC, optimizing your site’s markup, distributing freebies that provide a link back to your site, and many other methods exist. Knowing about keywords, and about SEO and marketing, gives you a leg up.

These things, though, are intrinsically going to be a part of the sites you build if you follow web design and web development best practices.

L is for Limitations

Though web technologies quickly evolve in a relatively short period of time, web designers will always have limitations in the things they can do on a web page. Limiting factors can also be non-technology-related, such as a person’s skill and a project’s budget.

While the web is evolving, it’s still relatively young and can’t do everything we’d like it to (even when we push the boundaries quite often). It’s important to make sure everything degrades gracefully, with no exceptions. Dealing with limitations, of how to overcome constraints, is an essential part of being a web designer. Education, experimentation, and experience play a vital role to the advancement of your career.

Even the most established professionals require an open mind and the seed of doubt in what they already know so that they can keep pushing forward and stay ahead of the curve.

M is for Metadata

One of the most underestimated elements of web design (which few people give much thought to) is the notion of metadata. Essentially, the concept behind the subject is to provide materials that describe the information’s content (data about data).

Within the constructs of the web, some of the most well known uses for metadata are Meta tags, RDF data and purpose-built microformats. There is more to life than HTML, you can play around with microformats too. By including metadata in your documents, you can not only describe your pages in such a way that they can be better indexed by web spiders (like how libraries have indexes to find the book you’re looking for) but you can also markup the information on a page in a way that gives them added meaning and utility. An example of this is how a vCard can be coded for browsers, apps (such as an email client) and services that are set to recognize the convention.

N is for Navigation

Another essential component of web design is the concept of navigation and information architecture. A website may contain hundreds, if not thousands, of pages and this presents a challenge of how to ensure that people can find what they are looking for. Knowing how to organize and structure information is a critical skill to learn.

Information architecture is useful in aiding the ability of users to find what they want. Evaluating the value of (and using) things like breadcrumbs, search features, and content categorization is a significant part of the web design process.

O is for Objectivity

Often, web designers make the mistake of creating experiences that reflect their preferences rather than the users’. Who can blame us?

It’s hard to be empathic toward your audience if you’re not one of them. Remaining objective and dealing with the jobs you undertake professionally is a skill that doesn’t come with a manual, but nonetheless needs to be learnt. Your design isn’t based on what you think is pretty (or else things could get ugly)! Before you begin producing a website, you need to know what you’re producing, why you’re producing it, and who’s going to use it.

Research, designing by numbers, knowing general usability guidelines and understanding how to collaborate effectively are but a few things that are involved in creating web designs objectively. Not letting your own biases take control of a project will often allow you to make logical considerations that empathize with the greater needs of your clients and users.

P is for Psychology

Of all the areas related to user experience design, psychology is probably amongst the most interesting and useful.

Everything a person does on the web relates to the way they behave and think. Knowing how to engage with that behavior will allow you to maximize the success of your web designs. The study of human behavior can help you identify emotional attachment to color. If you haven’t really thought much about psychology and you’re designing sites for a living, it’s really worth learning about psychology, at least at a basic level and in ways that relate to Design.

For example, you could learn about how Gestalt psychology can be applied to Web Design. Most aspects of design and what we define as beauty is depicted through psychology, as are the ways we can “train” visitors to become accustomed to a particular interface.

Q is for Quality

An important part of any business is the concept of quality control.

Being a successful designer means that you need to be passionate and caring of your craft. In such a highly competitive market, the need to maintain a set of standards, do what’s in the users’ best interests and ensure what you produce meets requirements is vital. Whether you are a designer or coder, the ability to not just follow specifications, but also to set your own ideals, is worthy of attention.

Why would anyone release substandard work? Make sure you set high standards for your projects. Whenever I produce a web design, I have a whole compendium of checklists and requirements that it needs to meet before the project is given the final “all clear.” It takes a bit of time to develop some decent standards for your own work — and it has to be a personal initiative.

However, once you have, you can continue to evolve and refine your processes, not only saving time, but also ensuring that you build a solid reputation for yourself as someone who cares about their work’s quality.

R is for Readability

If there’s one thing that is repeated to you Buzz-Lightyear-style (i.e. “To infinity and beyond!”), it’s the notion that “Content is King.” Without content, your website is worthless.

And content isn’t just text and articles such as the one you’re reading now. It’s a web app’s marketing copy, it’s a call-to-action button’s choice of words, it’s the perfectly placed video demo, or that awesome infographic that takes advantage of visual learning. As such, ensuring that you make your content as interesting, readable and as user-friendly as possible is a sure way to encourage regular visits.

Content is king and ensuring it’s easy to understand and visible is part of your job. Part of readability is the subject of information design, laying out your content in a manner that will appeal to your visitors. Being able to design and code a website are important, but so is usable content.

S is for Server-Side

JavaScript’s a great client-side language, but server-side scripting is also essential to modern websites. It does everything else that client-side scripting can’t (or shouldn’t) do. Saving user input, retrieving and processing database data, and page templating are but a few fundamental examples of how much server-side scripting is a part of our products.

There are plenty of languages and server-side frameworks, such as Rails, to choose from. Obviously most people will be aware of server-side scripting in some form, but for beginners to the whole backend business-logic arena, it’s valuable knowing even just the basics of what server-side scripting can do in order to know the possibilities and limitations.

T is for Typography

With @font-face gaining more widespread support, and standards for web fonts such as WOFF being drawn up, the past restraints on web typography are slowly fading away. But as Peter Parker’s uncle warned, “with great power comes great responsibility.” With the increasing number of ways we can design type on a web page, the need to understand typography has become a much more significant part of a web designer’s job.

People use many fonts on the web, but no one should be using Comic Sans! If you don’t already have a working knowledge of fonts and typography, now is the time to begin. Not only does it have important implications in design and how content is portrayed visually, but also it will ultimately give you added levels of control over page aesthetics.

U is for Usability

Ensuring that your web designs are user-centered and user-friendly is quite a challenge, especially when designing for a diverse spectrum of web users.

Usability focuses around the notion that your users don’t want more problems, they want solutions — and it’s your job to give them what they want as effortlessly as possible. Giving your visitors a smooth experience is part of the package of a successful site. With ties to interaction design, accessibility, information architecture, user experience, human factors and more, the expansiveness and significance of usability in modern web design needs not be underscored further.

V is for Visitors

Without site visitors, what’s the point of a website?

You can have the most awesome website in the universe with mind-blowing content that unravels the secrets of time traveling, but if there’s no one reading it, your site may as well not exist. While not to detract from the importance of content, a critical skill of design is to get eyeballs on your site (and keep them there). A social community will encourage people to continue visiting a site. Many aspects of user-centered design focus on encouraging community involvement as it identifies the need to emotionally tie people to a site.

However, beyond the social aspects, it’s also useful to identify your visitors and work with them to make a website better. This ties in quite nicely with the subject of sociology, ethnography and empathy.

W is for Web Standards

The letter “W” could stand for so many things on the World Wide Web that it became a hard choice to decide which item to discuss.

However, the idea of web standards underlines a core principle that many in our industry hold dear. Knowing the various languages and standards (and how they work) is something that everyone in the field professionally should be familiar with. Following specs strictly can be time-consuming. Every language used on the web, from HTML to Python, has its own set of specifications that outlines recommendations and best practices as to how the language should be used (and in what context).

Following these standards can be tricky because it requires a lot of reading, patience, and motivation, but if you want to master a language like HTML, CSS, or Ruby (on Rails), you’ll need get used to following standards and keeping your knowledge current.

X is for XML

A language that has so many purposes, yet gets pushed to the wayside regularly in our industry, is XML. Being more flexible than HTML in syntax, it’s almost like a Swiss Army knife in its unique and multi-functional purpose.

Used in so many aspects of the web — from software UI settings, non-SQL local databases, public APIs of third-party services like Twitter’s, Sitemaps, and syndication formats like RSS — it’s become a mainstay of web development. RSS is a content syndication language written with XML. Oddly enough, while XML is so durable, it’s not generally considered a core requirement to know. However, remember that with the web constantly evolving, the need for XML is only likely to increase to cope with our diversifying data needs.

Y is for “Yes!”

Web design and development is often made up of a series of choices. Knowing how to say “no” is quite an important ability to gain. Knowing when to say “yes” is, too.

While this may seem a rather woolly inclusion on our list, if you think about when you produce a website, you constantly deal with micro-decisions, and thus, your ability as a web designer is largely based on how you make judgments and decisions. Knowing when to say “yes” and “no” is critical. While it remains an important part of our job — Do we take that client? Should I use PHP?

Does it degrade gracefully? — learning about decision-making techniques and incorporating a sound judgment process with your projects is as critical of a skill to learn as code, content, design or theory. Bad decisions lead to a poorly built sites and good decisions save you time, money and stress.

Z is for Zipping

Finally, we come to the last letter of the alphabet and what other choice would fit into this section except zipping (or file compression). The ability to reduce bandwidth consumption has many benefits, including reduced data transfer costs, faster page loads for the visitor and, when combined with caching, reductions in HTTP requests. Caching is another useful method of reducing the amount of bandwidth used. Knowing how to optimize your content and code is one thing, but being able to squeeze every last unnecessary byte from your images and knowing how to carefully balance the quality and file weight is critical as well.

Learning to optimize website assets is an essential skill which no budding web designer wants to be without.

Alphabet Soup

The web is an ever-evolving platform, and new techniques, technologies and paradigms seem to appear quite regularly. But luckily, we can pick our battles carefully and learn only what’s really important to us and to our projects.

So now that you know your ABC’s, it’s time to get out there and perhaps delve deeper into subjects that you feel will be of benefit to you as a web designer.

Related Content

• The Difference Between Good Design and Great Design
• Craftsmanship in Designing Websites