Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Substance151 Best Web Practices


Published on

Successful web design combines intelligent planning, effective design and technical expertise – all seamlessly integrated to deliver your company’s brand message and value proposition directly to your customers. This presentation offers best practices for web design and development process.

Published in: Design, Technology
  • Be the first to comment

Substance151 Best Web Practices

  1. 1. Website Best Practices 07.24.08 Ida Cheinman
  2. 2. WEBSITE PLANNING <ul><li>GOALS </li></ul><ul><li>AUDIENCES (USERS) </li></ul><ul><li>TEAM </li></ul><ul><li>INFORMATION ARCHITECTURE </li></ul><ul><li>NAVIGATION </li></ul><ul><li>DESIGN </li></ul><ul><li>CONTENT </li></ul><ul><li>Search Engine Optimization and Marketing </li></ul>
  3. 3. GOALS Website Strategy, Vision and Goals – what do you want your website to do: <ul><li>Inform, educate </li></ul><ul><li>Establish credibility </li></ul><ul><li>Build brand awareness </li></ul><ul><li>Grow your mailing list </li></ul><ul><li>Convert leads </li></ul><ul><li>Generate traffic </li></ul><ul><li>Minimize phone calls </li></ul><ul><li>Sell products </li></ul><ul><li>Etc. </li></ul>
  4. 4. GOALS What problems does it solve for your audiences and how? <ul><li>Corporate Goals </li></ul><ul><li>Marketing </li></ul><ul><li>Business </li></ul><ul><li>Operations </li></ul><ul><li>Sales </li></ul><ul><li>Etc. </li></ul><ul><li>User Goals </li></ul><ul><li>What do you want them to do, learn, buy, etc. – desired action and outcome </li></ul>
  5. 5. USERS Effective websites are those that are user-centric – your website’s structure/navigation, look & feel, and functionality should address the needs of the users. <ul><li>Audiences: one, two, multiple, internal, external – prioritize </li></ul><ul><li>What is each of the user categories looking for? </li></ul><ul><li>What is their level of expertise in your subject matter? </li></ul><ul><li>Demographic, online experience, internet & computer technology available to them </li></ul>
  6. 6. WEBSITE GOALS ASSESSMENT <ul><li>Assess overall vision for project </li></ul><ul><li>Identify and define all tangible & intangible objectives </li></ul><ul><li>Establish major project milestones and deadlines for key deliverables </li></ul><ul><li>Assemble a team </li></ul><ul><li>Define overall feasibility and budgetary requirements </li></ul>
  7. 7. TEAM EXPERTISE The following disciplines are critical in the web design and development process. Whether hiring an agency/consultants, pulling internal resources, or combining the two, make sure to cover the following capabilities: <ul><li>Strategy (brand, marketing, web, technology) </li></ul><ul><li>Information Architecture, User Experience </li></ul><ul><li>Design </li></ul><ul><li>Technology </li></ul><ul><li>Content Development </li></ul><ul><li>Project Management </li></ul><ul><li>SEO/E-marketing </li></ul>
  8. 8. TYPICAL PROJECT PHASES <ul><li>Pre-build: </li></ul><ul><li>Strategy, Technical Requirements, Information Architecture, Usability Testing, Prototyping, Content Checklist </li></ul><ul><li>Build: </li></ul><ul><li>Design, Copywriting, Development, Testing, Launch </li></ul>
  9. 9. INFORMATION ARCHITECTURE A well thought-out structure and meaningful, consistent navigation is one of the main paths to happy users. Site Architecture is a blueprint that is used to develop a website’s content, visual design and functionality. <ul><ul><li>Site Map </li></ul></ul><ul><ul><li>Page Wireframes </li></ul></ul><ul><ul><li>Content Checklist </li></ul></ul><ul><ul><li>Usability Testing & Prototyping </li></ul></ul>
  12. 12. NAVIGATION BEST PRACTICES <ul><li>How many main links? </li></ul><ul><ul><li>Too many – overwhelming, no clear path </li></ul></ul><ul><ul><li>Too few – make sure it doesn’t take too many clicks for your users to get to all critical information </li></ul></ul><ul><ul><li>Just right…generally 5-10 is a good number </li></ul></ul><ul><li>What are they? Think like your users, try to predict what they want to see and where they want to go. </li></ul><ul><li>Naming: Use short, precise and self-explanatory link names. </li></ul><ul><li>External Links: For links going outside of your website make the destination website open in a new browser window. </li></ul>
  13. 13. NAVIGATION BEST PRACTICES <ul><li>Navigation Design: Make sure it’s always clear where you are on the site and how to get back to the other sections. </li></ul><ul><ul><li>Use breadcrumb navigation </li></ul></ul><ul><ul><li>Differentiate rollover and ”on” states, mark links to PDF & Word documents as such </li></ul></ul><ul><li>Visual Hierarchy : </li></ul><ul><ul><li>Primary Navigation (main sections) </li></ul></ul><ul><ul><li>Utility Navigation (legal, about, sitemap, etc.) </li></ul></ul><ul><li>Allow for user interaction: Make it very easy to contact you – you can’t overdo this one! </li></ul>
  14. 14. DESIGN Your website is the online expression of your brand. The same rules of branding and good design apply to your online communications. Web Design Myths: <ul><li>On-screen design quality standards are lower </li></ul><ul><li>72 dpi/web resolution = poor quality design </li></ul><ul><li>Web imposes design limitations </li></ul><ul><li>Technology imposes design limitations </li></ul>
  15. 15. DESIGN – HOME PAGE Home page is your only chance to make an impression and compel your visitors to dig deeper. <ul><li>Use the valuable space wisely </li></ul><ul><li>Remember that you have just a few seconds to convince your visitors to stay </li></ul><ul><li>Don’t overload with information – consider having lead-ins to places within the site that you want your users to visit </li></ul>
  16. 16. DESIGN BEST PRACTICES <ul><li>NO SKIP INTRO’s!!! No browser size requirements either! </li></ul><ul><li>Avoid using graphics where the same result can be achieved through CSS/HTML (use CSS/HTML to style color areas and type). </li></ul><ul><li>Avoid pop-ups unless there’s a very good reason for it – many users have them turned off, and for those who don’t, it’s generally annoying. </li></ul><ul><li>The site should not scroll horizontally AND vertically – a vertical scroll is more common, make sure that the navigation stays within a single screenshot. </li></ul>
  17. 17. DESIGN – FLASH CONTENT <ul><li>Flash (or not)  depends on your users and goals: </li></ul><ul><ul><li>Great marketing tool to communicate multiple messages, or tell a story </li></ul></ul><ul><ul><li>Adds visual interest and interaction </li></ul></ul><ul><ul><li>Allows to build on-screen applications and interactive demos </li></ul></ul><ul><ul><li>Easy to overdo and make it be a distraction </li></ul></ul><ul><ul><li>Not as SEO friendly </li></ul></ul><ul><ul><li>Generally, more difficult to edit/maintain </li></ul></ul><ul><li>Use Flash to do what HTML can’t, such as applications and interactive content </li></ul><ul><li>Don’t make it load forever </li></ul><ul><li>Make sure to have a “m u sic off” function </li></ul>
  18. 18. CONTENT <ul><li>It’s hard to read on computer screens – chunk it up, be concise, use lead-in copy and links, use enough contrast. </li></ul><ul><li>Make it a dialogue – invite users to start a conversation; make it easy to contact you; include acknowledgement pages for all sign-ups. </li></ul><ul><li>Avoid forms, unless you can offer a benefit to the user; don’t make all fields required – get only the info you absolutely need in order to go to the next step. </li></ul><ul><li>Achieve a balance between </li></ul><ul><ul><li>not enough substance / way too much copy </li></ul></ul><ul><ul><li>too many clicks / a lot of scrolling </li></ul></ul>
  19. 19. TESTING <ul><li>Test, test, TEST!! Windows and Mac, IE, Safari, Firefox – at the very least </li></ul><ul><li>Use software virtualization solutions that allows to run multiple operating systems simultaneously on one workstation </li></ul><ul><li>Web-based BROWSERCAM provides cross browser compatibility testing tool – </li></ul>
  20. 20. CASE STUDIES How it all translates into an actual website
  21. 21. DELTA CARBONA RE-DESIGN: before <ul><li>Site Goals </li></ul><ul><li>Brand revitalization </li></ul><ul><li>Connect to the audience – busy women, younger generation </li></ul><ul><li>Stain removal education </li></ul><ul><li>Repeat business </li></ul><ul><li>Encourage to buy in stores </li></ul><ul><li>Sell more to small businesses </li></ul>
  22. 22. DELTA CARBONA RE-DESIGN: after <ul><li>Communicates brand personality, appeals to the target audience </li></ul><ul><li>Added Stain Removal Tips section </li></ul><ul><li>Added Frequent Buyer Program </li></ul><ul><li>Prominent “Where to Buy” directory </li></ul><ul><li>Prominent Business Account </li></ul><ul><li>Overall streamlined site structure, navigation and visual hierarchy allows for quick and easy access to all key areas of the site – saves time, reduces frustration, and creates superior user experience </li></ul>
  23. 23. ECO-COACH RE-DESIGN: before <ul><li>Site Goals </li></ul><ul><li>Establish credibility and expertise </li></ul><ul><li>Look professional, established company, do not look like a start-up </li></ul><ul><li>Appeal to larger corporate clients </li></ul><ul><li>Education </li></ul><ul><li>Fresh, relevant content </li></ul>
  24. 24. ECO-COACH RE-DESIGN: after <ul><li>Education: What is/Did you know? </li></ul><ul><li>Expertise: news section/feature, speaking engagements, blog </li></ul><ul><li>Business Services: separate section and a home page feature </li></ul><ul><li>Design: fresh, clean – looks like an established professional company, communicates the idea of “green” and “indoor air quality” </li></ul><ul><li>The site allows for frequent updates by the in-house staff to keep it fresh and relevant </li></ul>
  25. 25. ARISAPH PHARMACEUTICALS RE-DESIGN: before <ul><li>Site Goals </li></ul><ul><li>Look professional, established, credible, bigger than they are </li></ul><ul><li>Attract investors & large pharma </li></ul><ul><li>Help Recruitment </li></ul><ul><li>Communicate Arisaph’s expertise and their advanced technology </li></ul>
  26. 26. ARISAPH PHARMACEUTICALS RE-DESIGN: after <ul><li>Design conveys a sense of “professional” & “established” positioning Arisaph as a major player that would be an attractive investment or a great partner </li></ul><ul><li>A new large Careers section and a prominent Hiring feature on the Home Page </li></ul><ul><li>In addition to the R&D main link, a Pipeline lead-in on the Home Page, giving interested parties a quick overview of Arisaph’s expertise. </li></ul>
  27. 27. Website Best Practices 07.24.08 Ida Cheinman [email_address]