Web Do's & Don'ts

Tips and tricks for people who make websites

[webdosanddonts]

Consider applying web accessibility basics

Consider developing using at least the basics of web accessibility. It will make your websites more usable and will be of great help to people with disabilities.

Read more: The web accessibility basics

[webdosanddonts]

Put your UI to a test

To create a good user interface, put it to a test and consider following rules to help you achive your goals. In Designing the User Interface, Ben Shneiderman lists eight golden rules which can be a guide for improving the usability of a UI.

Read more: Shneiderman's "Eight Golden Rules of Interface Design"

[webdosanddonts]

Avoid Using the Color Black

Try avoiding #000 and think about using a more natural color.

We see dark things and assume they are black things. When, in reality, it’s very hard to find something that is pure black. Roads aren’t black. Your office chair isn’t black. The sidebar in Sparrow isn’t black. Words on web pages aren’t black.

Read more: Design Tip: Never Use Black

[webdosanddonts]

Adjust line lengths and margins to improve the reading speed

Line lengths have a significant effect on the reading speed, while margins (whitespace) increase comprehension. Find a good balance between the two to provide a great reading experience.

Read more: How Margins and Line Lengths Affect User Reading

[webdosanddonts]

Test browser performance on parallax sites

Achieving great parallax performance is often not easy, but there are a couple of easy things you can do to get a better parallax scroll. Make sure to try them out and test the browser performance.

Read more: Parallax Done Right

[webdosanddonts]

Love your white space

The empty space between and around elements is often neglected and mistreated. Remember to give the white space extra love to create usable and balanced interfaces. Read more: Myth #28: White space is wasted space

[webdosanddonts]

Make use of user personas

Try to talk to your users, do your research and create useful user personas which you can use at any stage of the project. Remind yourself to stop ignoring these personas once the project is well underway.

Read more: Stop Putting User Personas in Your Desk Drawer

[webdosanddonts]

Consider avoiding the spinner icon

Adding a spinner (loading) icon may seem like your app is loading slowly. Consider using a skeleton screen instead to improve your UX. Luke Wroblewski (Polar):

With the introduction of these progress indicators, we had made people watch the clock. As a result, time went slower and so did our app. We focused on the indicator and not the progress, that is making it clear you are advancing toward your goal not just waiting around.

Read more: Mobile Design Details: Avoid The Spinner

[webdosanddonts]

Remember to make a 404 page

Setting up a custom 404 page does not require a lot of work but provides great benefits. Remember to invest some time in designing a good 404 page, which will ensure that your users have some sort of direction if they follow an old or broken link. Read more: How to design a 404 page that keeps visitors on your site

[webdosanddonts]

Consider optimizing title tags

Title tag optimization not only enhances your website’s SEO but also its usability and conversions. In a search result, the very first thing to meet the eye is the blue line (the title tag) with bolded keywords. Since your title tag is one option among many in search results, you need to put high priority on your title tag content so that it woos your audience to click through to your website.

Read more: 10 tips for title tag optimization

[webdosanddonts]

Think twice before adding a reset button in forms

Think twice before adding a reset button in web forms and figure out user flows and possible pain points. If a user resets the button by mistake, the entered data may be lost and the form has to be filled out all over again. Read more: (Almost) never add a reset button to a form

[webdosanddonts]

Check the weights of your font kits

Choose your type wisely and remember to check the weights of your font kits.

The weight of a font kit is arguably more important to a site’s performance versus other heavy hitters (like images), because fonts are loaded on every single page. And, after all, if a site loads too slowly, users won’t view the typography as you’ve intended!

Read more: 7 alternatives to popular web typefaces for better performance

[webdosanddonts]

Try doing a cognitive walkthrough

Cognitive walkthrough is a method of testing the level of usability of a website. Consider using this method to identify problems that users will have when they first use an interface. Read more: The 4 questions to ask in a cognitive walkthrough

[webdosanddonts]

Consider designing for cognitive difficulties

Designing for cognitive difficulties has to do a lot with web design best practices. By following some simple guidelines, you will be able to make your content available to as wide an audience as possible. Read more: Web accessibility for cognitive disabilities and learning difficulties

[webdosanddonts]

Think twice before forcing new window links

Think twice before forcing links to open in a new window, and not the current one. It might not be what the user expects. Leaving the decision of where the link will open to the user almost always seems like the best option. Read more: Should links open in new windows?

[webdosanddonts]

Consider dropping the waterfall production process

The waterfall process has a linear nature which holds many potential disadvantages. A responsive process is a more modern process which makes room for proper planning, iterating and testing. Adopting it could yield much better results. Read more: Bye, bye waterfall: 5 steps to implement responsive web design

[webdosanddonts]

Try using wireframes before designing visual comps

Try using wireframes before diving into visual comps in your graphic editor. Wireframes allow you to create quick blueprints and plan your project early in the production process. Read more: A beginner’s guide to wireframing