These “rules” are not written in stone, but following them will lead to better and more professional web design practices. If your website breaks any of these rules, it’s more likely to annoy people, turn people away, or be inaccessible.
Do NOT use Flash
You may think it looks cool, but just don’t do it. Flash is kind of “so ten years ago” in the web design world. But more importantly than that, it will make your website impossible to view on iPhones and iPads. Those devices do not support Flash period. These days, the most ‘professional’ kind of website is that which is accessible across as many different devices as possible. If you really want some kind of cool animation, use HTML5. It uses less resources, it’s much more modern, and it’s more accessible on mobile devices.
Do NOT use Music
There might be music that you like, but it’s almost always a bad decision. Other people coming to your website might not like that music. If I happen across a website with music guess what the first thing I do is. Mute. I bet most people will be right there with me. It’s either that or leave the website entirely!
Do NOT try to reinvent the website
I suppose ultimately this comes down to personal preference and what the purpose of your website is. For the sake of this article, I’m assuming that you’re creating a professional website for a business or a portfolio. That means, you’re trying to get clients. You need people to come to your website, like it, therefore like you, and just be drawn in.
In my experience, ‘overly artistic’ websites can be really hit or miss. It’s usually better to stick to something sleek, modern, and professional, rather than trying to pull the ‘unique’ card. Examples of bad ‘artistic’ websites include sites that utilize horizontal scroll instead of vertical and other kinds of weird navigation. Use a cool design, but don’t change the functionality of the site to make it weird. As an example, I’m not a big fan of Greg Martin’s navigation. I love his work, hate his navigation. And yes, it also uses Flash (no-no). Maybe it looks cool but it’s not really feasible. Think about accessibility. I feel like I’m getting lost in his navigation. It almost even gives me a headache. If I find a piece I like, I don’t feel like I’ll even remember where it is. It’s too much of a maze.
Do use a Responsive Design
As mentioned in the point about Flash, the most professional kind of website is that which is accessible across as many different devices as possible. Here’s where a responsive website design will help. Forget having to design an entirely different mobile website. A responsive design allows the layout of your website to change and adapt to any screen resolution. Normally if you just make your website for desktops and then view it on a smartphone it will load completely zoomed out to fill the whole site on the screen. You’re then required to zoom in and scroll in both directions.. huge annoyance. With responsive design your design elements will actually collapse and change to accommodate the new resolution.
As an example, I use the Foundation framework for my responsive designs. View that page or some of the sites using Foundation, then try resizing your browser screen. Start at full view and take it down to phone size. Watch the website change and adapt! No horizontal scroll bars. Ever.
Read my post on responsive website design for more details!
Do make your site easy to navigate through
This is really an expansion on the “Do NOT try to reinvent the website” point. You’re seeking clients. People need to find your site, find their way around your site, and easily be able to figure out who you are, what you do, and what you offer. Don’t make things difficult.
Always have a navigation menu in the “obvious” place (usually at the top). Incorporate a second navigation at the bottom of the page. On something like a portfolio, make it very easy to navigate through your items, images, or subpages. Have next/previous/index buttons. Avoid forcing people to use the back button on their browser. This can be done by having a “breadcrumb” navigation that shows all the steps the user went through to get to that page (complete with links). And when linking to larger versions of images, don’t just link directly to the image. If you do that and the user wants to go back, they’re forced to use the “back” button on their browser. Instead, try using Lightbox to open a full version of the image inside the current page.
Do validate your website
Validating your website to comply with the W3C Standards is good practice. It ensures that your website will render correctly across all browsers and devices, checks the functionality of your site, makes you look more professional, and will just improve your coding and design skills. It’s always good to learn the best practices and get into the habit of conforming to the W3C standards.
That being said, there are times when you will run into trouble with validation. The most common problem I come across is getting social media buttons (such as the Facebook “like” button) to validate in HTML5. There are ways you can jump through hoops to solve these issues, but these are what we’d consider “acceptable validation errors.”
For further reading on these two points, be sure to check out The Horrors of HTML Validation and 6 HTML5 Validation Errors and How to Fix Them.
Really good advice. I am amazed at all the good things you have to say!