What are the 10 commandments of web design?
-
what are the 10 commandments to follow when designing a website?
-
Thank you for the comprehensive answer.
-
That is right up there with "what is the meaning of life?" Everyone will respond differently.
I will share a few ideas::
1. Ensure your site complies to whatever coding standards you are using. For HTML, use the validator offered at http://validator.w3.org/
2. Ensure your site is optimized for SEO. Use an appropriate title tag, meta description and canonical for every page.
3. Social sharing is a component of web design. Facebook and Twitter authentication, sharing widgets, etc should all be taken into consideration.
4. Web security should be always be considered. Know which parts of your site will be public and private.
5. Know your audience. Who will use your site? A technical site may be designed very differently then a site discussing music or art.
6. Your site must be easy to navigate. Navigation bars, drop down menus, html site map, links, etc. all need to be considered. Buried content might as well not exist. Content should be layered so the most interesting content or best selling products will be on the landing page. Links will be offered so visitors can then move on to other products or content.
7. Stay consistent. I will take consistency over style any day. One example is breadcrumbs. There are some pages where they are helpful, and some where they are not useful. But if you decide to use breadcrumbs on your site, they should be used on every page so you stay consistent.
8. Check your site on every browser your audience might use. Presently IE 8, IE 9, FF 3.6, FF4, along with the current versions of Chrome and Opera needs to all be checked.
9. Go Mobile. Your site needs to consider the viewing screens of your users. Not only do you need to consider users with smaller monitors, but also the many users who will view your site from their cell phone.
10. Content is king. You can develop a perfect site, offer great security, and do everything else right...but if you don't add quality content then the rest doesn't matter much.
Wow. I had no intention of making it to ten when I started typing but the ideas just kept coming.
-
I tend to use these guidelines...
- The KISS method works wonders (Keep It Simple Stupid). Say more with less.
- Keep it Content-Heavy and Code-Light
- Learn proper HTML structure - think of the ease of adjustments down the road.
- Make the site be fast-loading
- Communicate... that's the whole point
- Maintain clear calls-to-action
- The web can be hard to read, especially for older eyes. Design to your audience and have nice contrast.
- Keep an open mind - push yourself to learn and try new things. Ask questions and seek answers when you are unsure.
- Design inspiration can come from anywhere... non-web sources can be great! Architecture, magazines, nature, you name it!
- Web design (including page markup) is both parts creative and technical. There is no single way to lay out a great page. Some ways work better than others though, so strive to be the best you can!!
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Does Designing in Sigma Reduce Coding Costs
A design service is using Figma to create modified form. Once the design is complete, Sigma will export CSS files. If we provide these CSS files to a coder, will this greatly reduce the required time to implement the. design on our website? Our website is designed. with a modified real estate theme. We are using exactly the same fields and functionality of the previous form. We are seeking to reduce coding time and subsequent costs. Thanks,
Web Design | | Kingalan1
Alan0 -
How to command Robots.txt to this:
Hi, So for some reason I have this unexplained issues in webmaster tools. Check them out: http://prntscr.com/7n1nj8 See that iSeeCars.com? How to remove it? Is it just disallow: iseecars.com? Or should I disallow the search to be crawled? Regards,
Web Design | | Kokolo0 -
Is it okay to design different mobile site for different browsers
Hi, Is it okay to design different mobile site for different browsers on same url. The content of the site will also be different on different browsers. Will it be treated as black hat by Google. The mobile site & desktop site has same url across devices & browsers. Regards
Web Design | | vivekrathore0 -
New Website Redesign: Any Design Comments or SEO Suggestions?
Hi! We recently launched our new website after MONTHS of work. Now that it is live, we are looking to fine tune the design and SEO efforts. This is our new website. And for reference, this is our old website. Any and all comments on design and SEO would be greatly appreciated. Thank you for your help! Mike
Web Design | | Mike.Goracke0 -
Comparing the site structure/design of my live site to my new design
Hi SEOmoz team, for the last few months I've been working on a new design for my website, the old, live design can be viewed at http://www.concerthotels.com - it is primarily focused on helping users find hotels close to concert venues throughout North America. The old structure was built in such a way that each concert venue had a number of different pages associated with it (all connected via tabs) - a page with information about the venue, a page with nearby hotels to the venue, a page of upcoming events, a page of venue reviews. An example of these pages can be seen at: http://www.concerthotels.com/venue/madison-square-garden/304484 http://www.concerthotels.com/venue-hotels/madison-square-garden-hotels/304484 http://www.concerthotels.com/venue-events/madison-square-garden-events/304484 http://www.concerthotels.com/venue-reviews/madison-square-garden-reviews/304484 The /venue-hotels/ pages are the most important pages on my website - and there is one of these pages for each concert venue - they are the landing pages for about 90% of the traffic on the website. I decided that having four pages for each venue was probably a poor design, since many of the pages ended up having little or no useful, unique content. So my new design attempts to bring a lot of the venue information together into fewer pages. My new website redesign is temporarily situated at: (not currently launched to the public) http://www.concerthotels.com/frontend The equivalent pages for Madison Square Garden are now: http://www.concerthotels.com/frontend/venue/madison-square-garden/304484 (the page above contains venue information, events and reviews) and http://www.concerthotels.com/frontend/venue-hotels/madison-square-garden-hotels/304484 I would really appreciate any feedback from you guys, based on what you think of the new site design compared to the old design from an SEO point of view. Of course, any feedback on site speed, easy of use etc compared to the old design would also be greatly appreciated. 🙂 My main fear is that when I launch the new design (the new URLs will be identical to the old ones), Google will take a dislike to it - I currently receive a large percentage of my traffic through Google organic search, so I don't want to launch a design that might damage that traffic. My gut instinct tells me that Google should prefer the new design - vastly reduced number of pages, each page now contains more unique content, and it's very much designed for users, so I'm hoping bounce rate, conversion etc will improve too. But my gut has been wrong in the past! 🙂 But I'd love to hear your thoughts, and thanks in advance for any feedback, Cheers Mike
Web Design | | mjk260 -
Seo for design webinar ?
I've got no problem using google webfonts on their own, but what about using them over an image; specifically a clickable image? Its easiest to place text over an image if the image is a background image, but then the image isn't easy to make clickable. Am I missing something - this shouldn't be hard, right. Thanks!
Web Design | | saultie0 -
What is the difference of HTML5 and web 2.0? What is web 2.0 and is this better for seo?
A little bit confused with the new stuff. The web 2.0 webpages are so much better? What changes?
Web Design | | Naghirniac0 -
What are the top web design agencies?
I have a big client who is looking to have some design work done on their websites. Really just redoing them essentially. They were asking me who the top web design companies in the country are. Anyone have any suggestions? Who are the most renown agencies?
Web Design | | DanDeceuster0