Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.
You don't have to agree upon everything. As a professional web developer you are the advocate of your visitors' interests and needs; you have to protect your understanding of good user experience and make sure the visitors will find their way through (possibly) complex site architecture. And this means that you need to be able to protect your position and communicate your ideas effectively — in discussions with your clients and colleagues. In fact, it's your job to compromise wrong ideas and misleading concepts instead of following them blindly.
In this context nothing can support you more than the profound knowledge of fundamental issues related to your work. But even if you know most of them it's important to know how to name these concepts and how to refer to them once they appear in the conversation. Furthermore, it's always useful to have some precise terms ready to hand once you might need them as an argument in your discussions.
In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. What is the difference between readability and legibility? What exactly does 80/20 or Pareto principle mean? What is meant with minesweeping and satisficing? And what is Progressive Enhancement and Graceful Degradation? OK, it's time to dive in.
You never really know who is going to visit your website next. You have no idea which configuration will be used, what browser will be installed, which screen resolution will be in use. However, since you'd like to comfort most of your web users, you need to know their habits and the profile of your average visitor — to adapt the design and layout to your users' needs.
Nothing is more valuable than the statistics you've collected with an analytics tool installed on your website; however particularly in the beginning of a new project it's nice to have some good idea of what kind of configuration your visitors will probably use.
In this post we'd like to present the results from recent studies of browser market share, used OS and preferred screen resolution worldwide. Please notice that this data is only an approximation; we've used a number of different sources to get the average numbers we present below. Besides, statistics always depends on the readership and the topic of your project.
Cross-browser compatibility is still one of the most complex issues when it comes to web-development. Web standards usually guarantee a (relatively) high degree of consistency, however no browser is perfect and particularly older browsers have always been quite good at surprising web-developers with their creative understanding of (X)HTML/CSS-code. Still you need to make sure that (at least) most visitors of your web-site can use it, navigate through it and find what they're looking for as quickly as possible.
Browsers Tests Are Necessary The truth is that a) you never know who might type in your url in his/her navigation toolbar and b) the browser-environment is still very quirky and the risk of inconsistent presentation is simply too high to ignore it. For instance, different browsers and operating systems use different techniques for rendering fonts (Win vs. Mac on handling fonts). The font size isn't identical on different platforms and some fonts might not be installed on the user's system.
Firefox on Linux doesn't display web-sites as Firefox on Windows does. As bonus web-developers have to cope with dozens of versions and, of course, Internet Explorer 6 — 46% of browser usage share, which is a true godsend for hardcoders and hackers. It's almost impossible to keep all possible problems in mind — a detailed test helps you to identify the critical issues — also and particularly if these are the smallest details of your layout.
Sometimes you just want to get the information you're after, save it and move along. And you can't. Usability nightmares — which are rather the daily routine than an exception — appear every now and again; usually almost every time you type your search keywords in Google. In his article "Why award-winning websites are so awful" Gerry McGovern points out that "the shiny surface wins awards, real substance wins customers" and that is absolutely true.
Nevermind what design you have, and nevermind which functionality you have to offer — if your visitors don't understand how they can get from point A to point B they won't use your site.
In almost every professional design (except from special design showcases such as, e.g., portfolios) you need to offer your visitors
a clear, self-explanatory navigation,
search functionality and
visible and thought-out site structure.
And that means that you simply have to folow the basic rules of usability and common sense. You want to communicate with your visitors, don't drive them away, right?
In this article we take a look at some of the usability nightmares you should avoid designing functional and usable web-sites. At the end of the article you'll also find 8 usability check-points you should probably be aware of.
If you can't live without a nice wallpaper on your desktop you might need to invest many hours in the search for the perfect one - that fits to your resolution and has an appealing theme. The quality of the desktop images is often not the one you'd praise over and over again looking at your desktop. The best wallpapers aren't cheap photos, but are works of art in their own right.
In the third part of our collection you'll find many different types of background images - beautiful wallpapers, devkits, Flickr pools, Widescreen and HD-monsters and even wallpapers-related social communites and wallpapers for gamers.
You might want to take a look at the previous collections of wallpapers we've already put together:
Data charts and diagrams are used when statistical data has to be presented in the most convenient and usable way. Visual charts are clear, visually appealing and easier to perceive than some simple enumerations or tables - mainly because users don't have to analyze the meaning of presented facts, but can perceive main tendencies through the visual weight of the facts — directly.
You can create charts in graphic editors or use special applications (software or web-apps) which can help you to create your charts in few minutes. However, once you'd like to update an old chart, or create a new one, you have to run the application and create new images over and over again. That's not flexible. Or maybe you just want to offer your visitors not a simple image, but a powerful dynamic chart.
To gain a greater level of flexibility you need to take a closer look at further approaches.
Sometimes web design is just about beautiful typography. Used with a profound understanding of white space, basic typographic principles and usability heuristics, it can sufficiently highlight the main sections of the site and its key-elements. Font size of headers, body copy and navigation is important. Leading is important. Line length is important. And the visibility of links is important. Basically, that's it - really, you don't need more.
There are literally thousands of professional typefaces you can use, you might use dozens of them; however there is also a plenty of high-quality freefonts which can serve as reasonable and feasible alternatives and fulfill your requirements just as well. We collect all of them regularly, so you don't have to.
Over the last month we've found six high-quality free fonts you can use for both private and commercial projects. Please check out the license agreements before using these typefaces - disclaimers can change from time to time.
Few days ago we've published the first part of our survey "50 Designers x 6 Questions". We've presented the first three questions which we've asked and 175 professional suggestions, tips and ideas from some of the renowned web-developers all around the world we've received.
Today we'd like to present you the second part of the article, which covers the rest of the survey and also presents an overview of the most important ideas and suggestions you should be aware of if you'd like to become or remain a professional.
Three More Questions
What is one thing to do before starting a new project?
What is one common mistake you should always avoid developing web-sites?
What is one device/tool or/and service you can't imagine your life without?
Even More Expert Ideas!
You can find even more expert ideas, solutions and tips in our articles
35 Designers x 5 Questions
175 professional suggestions, tips and ideas from some of the best web-developers all around the world.
You can also win one of 40+ books for professional design and development as well as one of 53 presents.
First a brief summary of all 300+ suggestions, ideas and tips we've received from the world's leading web developers and experts out there. Under the summary you'll find a detailed review of all answers we've received. Read more...
Professionalism is built upon knowledge and experience. To become or remain professional, you permanently need to improve your design and programming skills, be aware of new approaches and now how other designers and developers achieve both beautiful and effective designs. And to improve your design and programming skills all the time you need bulletproof sources to learn properly and to learn from masters who have a profound understanding of the field they're working in. Renowned books from well-known designers, developers, artists and authors might be just the right thing - serving as the inspiration or helping you to stay in touch with popular techniques in your field.
Over the last weeks we've selected over 40 expert books in the fields of typography, color, graphic design, brand identity, inspiration, web design and programming, Web 2.0, usability, data visualization and simplicity.
We've ordered most of them (some books were unavailable). And we'd like to give them all away - to you and for free - as the appreciation of your trust, your interest and your support of Smashing Magazine over the last year.
How can I participate?
To participate, you have to
answer the question "What is the best thing to start a perfect day with?" in the comments to this post (one word is enough),
choose one book in the table (not in the list!) you like most and post the number right after the answer (on the next line).
We've all been there: a typical task web-developers permanently have to deal with: how to communicate with clients in an effective and convenient way? How to make sure that the best compromise between designers' professional decisions and clients' personal interests is indeed found? The more organized and convenient you handle the communication issue, the more conflicts and additional work you can avoid.
The answer is actually quite simple: you need to listen to your clients, although you shouldn't follow their wishes blindly. Clients don't always know what they really want and even more often they don't know, whether the changes they'd like to introduce are effective in some way. You also need to make sure that your clients are listening to you, which is why you also have to build up the trust and respect for your professionalism and your work.
To achieve both goals, you need to discuss your concepts, ideas and sketches in a simple, descriptive and convenient way. You also need to receive a precise feedback on what details your clients would like to change or improve, and - more importantly - why they'd like to do that. Sending screenshots via e-mail often causes conflicts and misunderstandings, particularly because clients can't articulate directly and have to describe with words what they actually mean.
Good news: there is an effective all-in-one-solution which can make the communication process much easier. ConceptShare is an optimal web-based idea and design sharing and collaboration tool you can use for virtual workgroups with clients, customers and colleagues.