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
-
Looking for a new Web Developer and Graphic Designer - Where to look? Job Description in Post
Hi All, I know I can go to Guru.com, etc. but is there a place here that I can look for a web dev that can help with my tasks? I have a good bit of work to offer them and my current web dev who has been a great asset has suffered from health problems and it has affected his output, so I'm sad to say I need to look for someone that can help me get caught back up. If anyone has any suggestions on someone that is a knowledgeable web developer that has access to their own graphic designer (or can do graphic design themselves as well) please let me know. I am not opposed at all to hire a separate graphic designer to send work over to the web developer. SOMEONE WITH SEO EXPERIENCE WOULD BE VERY HELPFUL AS WELL AS MY CURRENT WEB DEVELOPER HAD IT AS WELL. The current projects going on are: Changing the header graphics on the home page to meet compliance. Constantly adding and editing my websites with small tweaks almost daily. Creating PDF's with content we give and uploading them as well as images to the sites. Keeping in mind that editing the site can affect responsiveness and we have to make sure our logo is a certain size compared to other metrics, etc. Creating web banners, tile ads, etc. Creating facebook main photo for biz page. I will be happy to share any info via PM or if anyone can point me in the right direction in finding someone that would be awesome! Thanks!
Web Design | | Veebs1 -
Requirements for mobile menu design have created a duplicated menu in the text/cache view.
Hi, Upon checking the text cache view of our home page, I noticed the main menu has been duplicated. Please see: http://webcache.googleusercontent.com/search?q=cache:http://www.trinitypower.com&strip=1 Our coder tells me he created one version for the desktop and one for the mobile version. Duplicating the menu cannot be good for on page SEO. With that said, I have had no warnings reported back from Moz. Maybe the moz bots are not tuned to looks for such a duplication error. Anyway, the reason the coder created a different menu for mobile in order to support the design requirements. I did not like the look and feel of the responsive version created based on the desktop version. Hi solution to this problem is to convert the Mobile version menu into ajax. what do you guys think? Thanks, Jarrett
Web Design | | TrinityPower0 -
Quality Designer with Photography Skills? Any Firm recommendation?
Looking for freelancer or firm that can do the following? Any recommendation here? Graphic designer needed for a women apparel brand. Our business is mainly online and we are seeking designers to design graphics for each section of our website. (Homepage, category pages etc) I'd love to find someone who's very good not only at the graphic design of websites, but can provide design into the UI / UX of the actual tools & back-end dashboards. Thank you for considering this opportunity. Candidates who possess ALL three experiences are preferred. Graphic Design (Photoshop, Illustrator) Photography Clothing, Shoes, Bags or at the very MINIMUM female products or services experiences You are both a talented graphic designer AND possess female product (Clothing/shoes/bags) or services experiences. Job Description:
Web Design | | WayneRooney
We are looking for a talented Graphic Designer who will be responsible for creating compelling and innovative visual design solutions. We need good design and inspiring photography that looks inviting and signals quality for our website. You do not need to code CSS/HTML, you just need to provide us high end designs that will look as good as the design sample attached.
Here's what you need to know. Your responsibilities: Use bespoke homepage imagery and design to set a positive first impression of the site and convey its brand values. Great product photography is particularly important in visually-driven industries. Understand business and user requirements for each section of our websites (Shoes, Clothing etc) Translate requirements into highly engaging and compelling design concepts Effectively conceptualize, design and create high-quality visuals in a variety of formats Good design and inspiring photography is essential. Your qualifications: -Photoshop & Adobe Illustrator expert with a lot of experience in designing homepages, category pages and other pages of the site. Firm understanding of intelligent UX/UI Design Strong grasp of visual design principles, information design, typography, color, imagery and iconography Compelling portfolio that demonstrates elegant and innovative visual design Site that we think is awesome and example of graphics/photography design of our standard: Crateandbarrel.com Potterybarn.com llbean.com macys.com Anyone knows where to get quality designer which has the skills above? Thanks0 -
Website design chnage and massive traffic drop?
I changed my Drupal theme to "Bootstrap 3" and now my traffic is down 50% gradually in past 5 days, can this be theme related? Answers to checks below : 1). There were no redirects involved, I just flipped a switch and changed theme for my Drupal blog. 2). No issues reported by Google WMT except the fact that impressions fell, see stat images for comparison at - http://imgur.com/a/5PssH#0. 3). site:mysiteurl.com shows healthy "About 201,000 results". 4). Checked slow loading times and browser issue, nothing there. 5). It's not a seasonal drop. Pls. suggest what else should I focus upon to find the reason. @Prateek_Chandra where can I share my analytic report with you privately. I can also enable guest access to my account for you to have a look.
Web Design | | techdna11 -
Web Editing Pricing Quote
Hi all, I cannot seem to get my pagespeed up to the level I want, but I do not have the backend knowledge to fix the following errors listed below. I have played around with this for awhile, and gotten a number of them reduced, but these last ones are beyond me at this time. Any idea how long this would take someone proficient to do? Any idea what the cost would be? I know the ideas are going to be super general, but ball park is what I'm looking for. Thanks! Ruben Remove render-blocking JavaScript: http://code.jquery.com/jquery-latest.min.js http://www.kempruge.com/wp-content/themes/kempruge/scripts/custom.js http://www.kempruge.com/wp-content/themes/kempruge/scripts/rem-text-input.js Optimize CSS Delivery of the following: http://www.kempruge.com/wp-content/themes/kempruge/style.css http://www.kempruge.com/wp-content/themes/kempruge/fonts/stylesheet.css http://www.kempruge.com/wp-content/plugins/sweetcaptcha-revolutionary-free-captcha-service/css/style.css?ver=3.6.1 http://www.kempruge.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_gallery_display/static/nextgen_gallery_related_images.css?ver=3.6.1 http://www.kempruge.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=3.5.3 http://www.kempruge.com/wp-content/plugins/easing-slider/css/slideshow.min.css?ver=2.1.2 http://www.kempruge.com/wp-content/plugins/wp-nivo-slider/nivo-slider.css?ver=3.6.1 http://www.kempruge.com/wp-content/plugins/wp-nivo-slider/themes/default/default.css?ver=3.6.1
Web Design | | KempRugeLawGroup0 -
Responsive design and Google analytics mobile tracking codes?
Hi all, We are currently rebuilding a site using responsive design, however i have just had a thought. On another site where we have a mobile site under a sub-directory we utilise mobile tracking codes as we found that this was far more accurate for recording visits. On a responsive design site evidently all pages, desktop and mobile, will be under the same URL, yet the content will adjust to the screen size of the device. Should we also change the tracking code to be mobile code on the lower resolutions or would the same code be sufficient?
Web Design | | Sarbs0 -
Mobile Web Sites
Hi I have started offering customers a mobile app view of their existing websites using sencha touch which works well. On visiting the website if a user visits via a mobile device they access the mobile app view of the site. I am looking for some best practice please - as many of the customers already have hosting with their existing website so would it be possible to use a subdomain of m.theirdomain.com which will point to the mobile website which will be hosted on our servers in the cloud. Or is the only alternative to use a subdomain for their mobile sites because they are hosted with us in the cloud of businessname.ourdomain.com ? Many Thanks
Web Design | | ocelot0 -
Website design for non-coders
Hi All Anyone any experience with using Headway Themes for wordpress. How does it compare to Artisteer 3 for ease of use for a non-coder. Does "Headway Themes" really allow for the designing of sharp business wordpress websites for people with no coding skills as it claims. Thanks Peter
Web Design | | peterds0