The A-Z List for Web Designers

Oct 19 2010 by Alexander Dawson | 36 Comments

A-Z List for Web Design

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.

A is for AccessibilityThe 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.

B is for BrowsersIf 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.

C is for CSSThe 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.

D is for DebuggingFirebug 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.

E is for EthnographyStatistics, 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.

F is for FlashWhile 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.

G is for GraphicsImages 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.

H is for HTMLValidating 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.

I is for Interaction DesignGetting 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.

J is for JavaScriptJS 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.

K is for KeywordsMarketing 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).

L is for LimitationsIt’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.

M is for MetadataThere 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.

N is for NavigationInformation 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.

O is for ObjectivityYour 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.

P is for PsychologyThe 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.

Q is for QualityWhy 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.

R is for ReadabilityContent 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.

S is for Server-SideThere 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.

T is for TypographyPeople 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.

U is for UsabilityGiving 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).

V is for VisitorsA 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.

W is for Web StandardsFollowing 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.

X is for XMLRSS 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.

Y is for "Yes!"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.

Z is for ZippingCaching 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

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

36 Comments

Luis Suarez

October 19th, 2010

great article Alex. Definitely a must read. thnx for sharing

cheers!

Luis S.

Rupnarayan Bhattacharya

October 19th, 2010

Very well thought out article. The list is really useful.

Manuel Ignacio López Quintero

October 19th, 2010

Awesome article Alex!

I loved the part where you say it is also a page must be accessible without JavaScript. Although we must also recognize that the future of the web evolves through the standards and EcmaScript it is.

dreb

October 19th, 2010

I kinda like the Alphabet Soup for Web Developers. maybe i could print this out and hang it somewhere in my room. And, unintentionally, it inspires me even more :) More to go !!

Ryan

October 19th, 2010

Very clever, thanks for sharing.

Thorsten

October 19th, 2010

Haha great list. :)

Dan

October 19th, 2010

Absolutely amazing article mate. Well done.

Thoroughly resourcefull and very precise. Read this twice just to be sure. You have done Six Revisions proud.

dev

October 19th, 2010

great tutor, nice to be read this article, especialy about K’ for keywords, you have google sitelink

burak

October 19th, 2010

Brilliant and really creative article! Nice job Alexander

Linda

October 19th, 2010

Thanks for this amazing list Alexander. I can’t wait to study it on my lunch break.

This is sure to help a Luddite like me ;).

Thanks for sharing your expertise.
~Linda

James

October 19th, 2010

Very handy list. Thanks

Jay Philips

October 19th, 2010

Awesome post, very creative and intuitive.

Idraki M.

October 19th, 2010

I wonder how long you take to figure out what each alphabet stands for. :) A very very good round and sum up. A quality post

Carl

October 20th, 2010

P is for Psychology = brilliant! I really do like this shift to understanding users to such a level of looking the psychological reasoning behind both design choices and information architecture.

M.Nasir

October 20th, 2010

Greet Example, nice and very thanx

vinay

October 20th, 2010

wow really nice list of Web designers.. webAlphabetics..

Arafat Ashraf

October 20th, 2010

Alex, you have reminded my school days. I am in love with this post, thanks for sharing.

elinix

October 20th, 2010

great article, thanks.

everlearner

October 20th, 2010

Thank you very much Alex.

Your articles are always awesome and full of knowledge.
It will be nice to teach these all, A-to-Z in Web Development courses. :)

Louis Simoneau

October 20th, 2010

I was very disappointed when I got to the end and Z wasn’t for Zeldman …

Alexander Dawson

October 20th, 2010

Thanks for the comments everyone, I’m glad that it’s been well received!

@Louis: I didn’t know Zeldman was a consideration in web design (at least as a technology), if there’s a sequel I’ll be sure to put forward KrugML! ;)

Jacob Gube

October 20th, 2010

@Alexander Dawson: I’d put my vote in (for web design/web development), Krug for K, Nielsen for N (or Newton for JS, an unsung hero), Souders for S, Meyer for M.

ptamaro

October 20th, 2010

Great post… creative.

Ahmad

October 20th, 2010

Very nice well done arrange this info thanks for the nice article

iconshock

October 20th, 2010

i is for icons :) jejeje… very nice article, good job friends !

Sachin

October 21st, 2010

this is a new kind of ABC I have learned and its much better & useful than kids ABC…thanks a lot..just bookmarked…..

Carlos Martins

October 21st, 2010

Great article! Thanks. :)

Curtis Scott

October 21st, 2010

This has some great tips and pointers in here. It’s definitely a good read for beginners and pros. I really like the P section… never though of that. Thanks!

Federico Capoano

October 24th, 2010

Wow, really original article. You’re a genius man.
I loves me kitty is brilliant.

George Columbow

October 26th, 2010

Great article, Alexander!
I was so ispired by your way of thinking, that composed my own article, extending your thoughts? adapting them for Russian auditory and including my own PM-experience into. The final result is here: http://www.lentaprowebdesign.ru/2010/10/z.html
I like this ‘sight from above’. It really helps keep your hand on modern development pulse.
Thank you again!

sonny

October 27th, 2010

great idea to cover full range of web design related aspects with just simple Alphabet soup as mnemonic. these are really good things to consider and it would help a lot on improving the web design process on a wholistic approach. thumbs up!

Deepindera

November 11th, 2010

This is an amazing way to sum up important aspects of a web design. I have to say some aspects are funny though, looks like its done for the sake up making up this article like Y for Yes (LOL) and I for Interaction Design.

John Monte

November 11th, 2010

This is great! Thanks for sharing.

Ronald Redito

November 25th, 2010

Thanks for these pointers. I will take note of these in my next projects.

N V A Mahesh Kumar

January 21st, 2011

Nice article Alex..! Thank for sharing.

Hooma

February 28th, 2011

Very great article … thanks alot

Leave a Comment

Subscribe to the comments on this article.