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
-
Core Web Vitals hit Mobile Rankings
Hey all, Ever since Google announced "Core Web Vitals" are mobile rankings have nose-dived. At first, I thought it was optimisation changes to the page titles we had made which might still be part of the issue. However, Desktop rankings actuallyy increased for the same pages where mobile decreased. There is the plan to introduce a new ranking signal into the Google algorithm called the "core web vitals: and this was discussed around late May. even though it's supposed to get fully indexed into a ranking signal later this year or early next; I think Google continuously test and release this items before any official release. If you weren't aware, there is a section in Google Webmaster Tools related to "core web visits", which looks at:1. Loading2. Interactivity3. Visual StabilityThis overlays some of the other basic requirements of a good website and mobile experience. Taking a look at our Google Search Console, it appears to be the following:1. Mobile- 1,006 poor URLs, 100URLs need improvement and 475 good URLs.2. desktop- 0 poor URLs, 379 need improvements and 1,200 good URLsSOURCE: https://search.google.com/search-console/core-web-vitals?resource_id=https%3A%2F%2Fwww.griffith.ie%2FIn the report, we can see two distinct issues with the mobile pages:CLS Issue: more than 0.25 (mobile)- 1,006 casesLCP issue: longer than 4secs (mobile) - 348 case_CLS (Cumulative Layout Shift)This is a developer issue, and needs fixing. It's basically when a mobile screen jumps for the user. It is explained in this article: https://web.dev/cls/Seems to be an issue with all pages. **LCP (Largest Contentful Paint)_**Again, another developer fix that needs to be implemented. It's connected to page speed, and can be viewed here: https://web.dev/lcp/Looking at GCS, it looks like the blog content is mostly to blame.It's worth fixing these issues and again looking at the other items on page speed score tests:1. Leverage browser caching- https://gtmetrix.com/reports/griffith.ie/rBtvUC0F2. https://developers.google.com/speed/pagespeed/insights/?url=griffith.ie- mobile score for home page is 16/100, https://www.griffith.ie/people/thamil-venthan-ananthavinayagan is 15/100I think here is the biggest indicator of the issue at hand. Has anybody else noticed their mobile rankings go down and desktop stay the same of increase.Kind regards,
Web Design | | robhough909
Rob0 -
Having a Subfolder/Subdirectory With a Different Design Than the Root Domain
Hi Everyone, I was wondering what Google thinks about having a subfolder/subdirectory with a different design than the root domain. So let's say we have MacroCorp Inc. which has been around for decades. MacroCorp has tens of thousands of backlinks and a couple thousand referring domains from quality sites in its industry and news sites. MacroCorp Inc. spins off one of its products into a new company called MicroCorp Inc., which makes CoolProduct. The new website for this company is CoolProduct.MacroCorp.com (a subdomain) which has very few backlinks and referring domains. To help MicroCorp rank better, both companies agree to place the MicroCorp content at MacroCorp.com/CoolProduct/. The root domain (MacroCorp.com) links to the subfolder from its navigation and MicroCorp does the same, but the MacroCorp.com/CoolProduct/ subfolder has an entirely different design than the root domain. Will MacroCorp.com/CoolProduct/ be crawled, indexed, and rank better as both companies think it would? Or would Google still treat the subfolder like a subdomain or even a separate root domain in this case? Are there any studies, documentation, or links to good or bad examples of this practice? When LinkedIn purchased Lynda.com, for instance, what if they kept the https://www.lynda.com/ design as is and placed it at https://www.linkedin.com/learning/. Would the pre-purchase (yellow/black design) https://www.linkedin.com/learning/ rank any worse than it does now with the root domain (LinkedIn) aligned design? Thanks! Andy
Web Design | | AndyRCWRCM1 -
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 -
AMP vs Responsive Design? Mobile SEO
Hello !! We are developing a new website with responsive design. As is recommended, the idea would be to have a unique site for mobile and desktop, with same content and same url for both devices, using responsive design to adapt the layout depending on the device. My doubt in here is about the AMP pages? If my website has responsive design, perfectly optimized for mobile do I need somehow AMP pages? As far as I understand, these amp pages would be useful if I had different pages for mobile, but this is not the case. Am I correct or am I missing something? Thanks for your help :
Web Design | | AutoEurope1 -
Can the design still be considered adaptive if the URL is different?
I was under the impression our site had a mobile dedicated design, but my developers are telling me we have an adaptive design. The mobile site is set up different and has different content and the url is as follows: www.site.com/MobileView/MobileHome.aspx Can it still be considered adaptive if the URL is not the exact same? Hopefully this make sense and I appreciate anyone's input!
Web Design | | AliMac260 -
Should i not use hyphens in web page titles? Google Penalty for hyphens?
all the page titles in my site have hyphens between the words like this: http://texas.com/texas-plumbers.html I have seen tests where hyphenated domain names ranked lower than non hyphenated domain names. Does this mean my pages are being penalized for hyphens or is this only in the domain that it is penalized? If I create new pages should I not use hyphens in the page titles when there are two or more words in the title? If I changed all my page titles to eliminate the hyphens, I would lose all my rankings correct? My site is 12 years old and if I changed all these titles I'm guessing that each page would be thrown in the google sandbox for several months, is this true? Thanks mozzers!
Web Design | | Ron100 -
Web Designer Needed
So I feel like I've almost convinced my boss to hire out a re-design for our website (which is SORELY needed.) I'm at the step where I need to start finding quotes and site builders. I want a responsive design site built modern and professional... Love the moz site but not responsive enough. My current favorite example is at www.hasoffers.com Does anybody have any suggestions of where to go? And as a bonus, if anybody is brave enough to ballpark what a site like this would cost that would be awesome. Doesn't have to be exact or even that close... Thanks for any advice given.
Web Design | | jesse-landry0 -
Question about web site structure
Is there an SEO advantage for individual pages to be in sub folders vs not being in a folder? Of course site managemnt is easier with folders if you have 100;s of pages...clearly a shorter URL is easier for humans to naviagte. store.com/gadgets store.com/lasers vs. store.com/gadgets/lasers
Web Design | | johnshearer0