Difference between revisions of "Good v. Bad Web Design"
m |
|||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
==Preface== | ==Preface== | ||
Web design is the "UI" (User Interface) part of a website, and deals almost exclusively with the page structure, graphics, test and other elements. Good design practices follow a set of routines that improve usability and stability of a website. This article will outline good practices of what to do and what not to do. | Web design is the "UI" (User Interface) part of a website, and deals almost exclusively with the page structure, graphics, test and other elements. Good design practices follow a set of routines that improve usability and stability of a website. This article will outline good practices of what to do and what not to do. | ||
| + | |||
| + | ==Document Width== | ||
| + | <html> | ||
| + | <div style='text-align: center;' align='center'> | ||
| + | <div style='padding: 20px; background-color: #555555; color: white; border-left: 2px solid red; border-right: 2px solid red; width: 900px'> | ||
| + | Don't do this... | ||
| + | </div> | ||
| + | <br> | ||
| + | <div style='padding: 20px; background-color: #555555; color: white; border-left: 2px solid red; border-right: 2px solid red; width: 80%'> | ||
| + | Do this... | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </html> | ||
| + | |||
| + | It is strongly frowned upon to use static widths of pages as it means the user's own display resolution and browser size isn't taken into account. Assume the above examples are the total width of a page with all content within them, resize your browser window and see how one example moves in width and the other doesn't. Not all users use the same resolution or consumes content on the same sort of computing platform (phone or tablet versus laptop or desktop, for instance). Having part of the page slid off to the right of the browser and requiring horizontal scrolling is poor design. | ||
| + | |||
| + | The same principles should apply for individual content boxes on your pages. | ||
==Link Buttons== | ==Link Buttons== | ||
| Line 39: | Line 57: | ||
</div> | </div> | ||
</html> | </html> | ||
| + | |||
| + | ==Infinite Scrolling== | ||
| + | <html> | ||
| + | <div style='text-align: center;' align='center'> | ||
| + | <i>(no example)</i> | ||
| + | </div> | ||
| + | </html> | ||
| + | |||
| + | Infinite scrolling is a concept where a user may scroll through a page without selecting any additional links, buttons or so forth to proceed forth in the pagination of the content. This is a very hazardous concept and should not be done as in most implementations it results in: | ||
| + | |||
| + | * pages that can't be linked directly to or bookmarked; | ||
| + | * browser slow-down/lag as a result of keeping the scrolled off document in the browsers' memory; | ||
| + | * users not being able to jump directly ahead to a specific part of the content; | ||
| + | |||
| + | While it is often argued that there are "ways" to do it "correctly", it is advised not to do it at all as in most cases, it's done wrong or in ways that may not work with certain browsers. | ||
| + | |||
| + | ==URL Shorteners/Redirectors== | ||
| + | <html> | ||
| + | <div style='text-align: center;' align='center'> | ||
| + | <a href='http://is.gd/Y8RYyq'>Don't do this</a><br /><br /> | ||
| + | <a href='http://kb.digibase.ca/index.php?title=Good_v._Bad_Web_Design'>Do this</a> | ||
| + | </div> | ||
| + | </html> | ||
| + | |||
| + | While often times it may be novel or desirable to shorten links for tracking reasons or ease of use, it obscures the real destination of the link and makes it harder for users to determine securely if they really want to go to the specified site. Instead, be sure to use the full URL for web pages. Hover over the above examples and see what your browser shows at the bottom. Both lead to the same page, but the shortened one induces more overhead and is less trustworthy and less descriptive. | ||
| + | |||
| + | ==Graphic Text== | ||
| + | <html> | ||
| + | <div style='text-align: center;' align='center'> | ||
| + | <img src='http://binaries.crs.digibase.ca/0/05/Webdes-dontdothis.png'> ... <span style='font-size: 19pt; font-family: Arial'>Do this</span> | ||
| + | </div> | ||
| + | </html> | ||
| + | |||
| + | Unless your text is specifically styled as part of a banner or so forth, do not use graphics for text regardless of your content source. It makes your content so it cannot be accessible by search engines and further makes it harder for the blind to access your site even with screen reader technology as such technology depends on content being delivered as plain text. Even if your text is indeed a part of a banner, include alt text if it contains text to describe it. This also applies to websites designed in Flash. | ||
| + | |||
| + | ==OnMouseOver/OnMouseOut== | ||
| + | <html> | ||
| + | <div style='text-align: center;' align='center'> | ||
| + | <i>(no example)</i> | ||
| + | </div> | ||
| + | </html> | ||
| + | |||
| + | OnMouseOver and OnMouseOut (the javascript events) are a significant target of abuse since they have many applications like automatic dropdown menus and other things. If at all possible, avoid using them because they lead to things like menus being clumsy (not staying rolled down or being jumpy when the javascript thinks the pointer is no longer over the menu), or staying down too long. It further has the effect of making your site hard to use as users who don't want to deal with the menus have to move around them. | ||
| + | |||
| + | Instead have your users click on menus to roll them down and then again or outside of the menu to hide it again just like menus in programs. | ||
Latest revision as of 12:52, 29 January 2014
Contents
Preface
Web design is the "UI" (User Interface) part of a website, and deals almost exclusively with the page structure, graphics, test and other elements. Good design practices follow a set of routines that improve usability and stability of a website. This article will outline good practices of what to do and what not to do.
Document Width
It is strongly frowned upon to use static widths of pages as it means the user's own display resolution and browser size isn't taken into account. Assume the above examples are the total width of a page with all content within them, resize your browser window and see how one example moves in width and the other doesn't. Not all users use the same resolution or consumes content on the same sort of computing platform (phone or tablet versus laptop or desktop, for instance). Having part of the page slid off to the right of the browser and requiring horizontal scrolling is poor design.
The same principles should apply for individual content boxes on your pages.
Link Buttons
If you are designing a page with links that appear to be buttons, be sure to always allow the whole button to be clickable, not just the text caption on the button. This is an important usability element as people expect buttons to be clickable anywhere. Try hovering over the above two buttons to see how they differ, focusing on the outer edges.
Coloured Input Boxes
It may not seem apparent immediately if you're using a fairly stock operating system but if you give your inputs, textareas, etc a background, always be sure to colour the foreground. Otherwise on high contrast white (text) on black (background) themed computers, your textboxes will look like this:
As seen, it is completely unreadable without highlighting the contained text. The same principle applies if you colour your foreground but not your background, again, your textboxes may result in:
Infinite Scrolling
Infinite scrolling is a concept where a user may scroll through a page without selecting any additional links, buttons or so forth to proceed forth in the pagination of the content. This is a very hazardous concept and should not be done as in most implementations it results in:
- pages that can't be linked directly to or bookmarked;
- browser slow-down/lag as a result of keeping the scrolled off document in the browsers' memory;
- users not being able to jump directly ahead to a specific part of the content;
While it is often argued that there are "ways" to do it "correctly", it is advised not to do it at all as in most cases, it's done wrong or in ways that may not work with certain browsers.
URL Shorteners/Redirectors
While often times it may be novel or desirable to shorten links for tracking reasons or ease of use, it obscures the real destination of the link and makes it harder for users to determine securely if they really want to go to the specified site. Instead, be sure to use the full URL for web pages. Hover over the above examples and see what your browser shows at the bottom. Both lead to the same page, but the shortened one induces more overhead and is less trustworthy and less descriptive.
Graphic Text
... Do this
Unless your text is specifically styled as part of a banner or so forth, do not use graphics for text regardless of your content source. It makes your content so it cannot be accessible by search engines and further makes it harder for the blind to access your site even with screen reader technology as such technology depends on content being delivered as plain text. Even if your text is indeed a part of a banner, include alt text if it contains text to describe it. This also applies to websites designed in Flash.
OnMouseOver/OnMouseOut
OnMouseOver and OnMouseOut (the javascript events) are a significant target of abuse since they have many applications like automatic dropdown menus and other things. If at all possible, avoid using them because they lead to things like menus being clumsy (not staying rolled down or being jumpy when the javascript thinks the pointer is no longer over the menu), or staying down too long. It further has the effect of making your site hard to use as users who don't want to deal with the menus have to move around them.
Instead have your users click on menus to roll them down and then again or outside of the menu to hide it again just like menus in programs.
