Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)


Published on

This is a presentation that I have prepared for the DMA (Direct Marketing Association) twice. This updated version was presented as a webinar for Blueliner Marketing. I demonstrate best practices in web design by giving screencast tours of websites.

Published in: Business, Technology
  • Hi Arman R.
    I am participating in a contest and your slide I liked very much,because in my company we work with web design and SEO, so I invited, to visit my slide and if it likes, please addme to your favorites, thank you very much

    Check out this SlideShare


    Please Addme to your favorite ’♥’ bye bye
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice blueliner slideshare portfolio. I appreciate this.

    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Agenda: Common SEO Pitfalls Common SEM Pitfalls Common Social Media Pitfalls Tech & Tools (recommendations for 7 Pillars Survival Toolkit) – data is good, but need insights and experience to make solid recommendations based on the data SEO budgets – why they vary. How to pay for Social Media expertise. Setting ROI Benchmarks in all 3 Pillars / show some (not overwhelming) details of ROI Plan. Simple 5-15 word, big blocks of content. Images, graphical charts, basic data to demonstrate points. Onguria – ‘the next big thing’
  • Web Design Trends & Best Practices (by Blueliner Marketing CEO, Arman Rousta)

    1. 1. 7 Pillars Digital Marketing Academy Webinar Presented by: Arman Rousta Digital Strategist & CEO of Blueliner January 2011 2:00 – 3:00pm EST TM Web Design Trends 2011
    2. 2. Overview – Table of Contents <ul><li>Introduction to Blueliner Marketing </li></ul><ul><li>Web Design Trends & Tools </li></ul><ul><li>Best Practices Website Tour </li></ul><ul><li>Questions & Answers </li></ul><ul><li>Upcoming Webinars </li></ul>
    3. 3. Interactive Marketing Clients California Closets (Lifestyle) Completely Bare (Beauty) IZOD Men’s Fragrance (Beauty) Bogner (Fashion) Allied Home Mortgage (Real Estate) New York Video School (Education) 401kid (Finance) CMS Forex (Finance) Guardian Water & Power (Energy) Morningside Translations (Translations) Blueliner is a reputable digital marketing agency based in New York , with presence in Asia, Latin America and Europe . We have built successful social, mobile and search campaigns for hundreds of clients, including: Medical Hair Restoration (Medical) Manhattan Orthopaedic Care (Medical) Russia Today (Media) SogoTrade (Finance) Icebreaker (Fashion) Lufthansa (Travel) Chaa Creek Resort (Travel) Celect.org (Social Media) Bid on the City (Real Estate) Red Clay Media (Marketing)
    4. 4. pillar 1. Content (Copy, Video, Photography, Audio) pillar 2. design UX (Branding, Web Development) pillar 3. SEO (Organic Search, Organic CSE, Onsite Search) pillar 4. digital Media (Paid Search, CPM, Affiliate, Retargeting) pillar 5. CRM (Customer Service, Email Marketing, Web Analytics) pillar 6. Social media (SMM, Online PR, Networks, Blogs, Games) pillar 7. Mobile The 7 Pillars of Digital Marketing
    5. 5. What Makes A Good Website? <ul><li>Usability (clarity, simplicity, speed) </li></ul><ul><ul><li>Satisfying User Experience (UX) </li></ul></ul><ul><ul><li>Organized Site Navigation </li></ul></ul><ul><li>Great Branding & Design Elements </li></ul><ul><li>Quality Content and Offerings </li></ul><ul><li>Interactivity – User Engagement </li></ul>
    6. 6. 13 Trends & Best Practices <ul><li>Increasing Use of Video </li></ul><ul><li>Built on CMS (Content Management Systems) platforms, like Wordpress, Drupal, Diem and Joomla </li></ul><ul><li>Bigger Fonts and Powerful Header Images </li></ul><ul><li>Heavy Social Media integration </li></ul><ul><li>Use of Engagement Tools, like Chat, Music, Forums, Blogs, Polls, and other user-contribution features </li></ul><ul><li>Mobile Versions </li></ul><ul><li>Multi-lingual / IP-targeting to show local content </li></ul><ul><li>Detailed Borders as Backgrounds </li></ul><ul><li>Useful Footer Bar Design </li></ul><ul><li>Bread Crumb Navigation </li></ul><ul><li>SEO Considerations – proper meta data tagging </li></ul><ul><li>Intelligent Incorporation of Ads </li></ul><ul><li>Pre-loaders & Favicons </li></ul>
    7. 7. Poll # 1 <ul><ul><li>Does your website operate off of a CMS or blog, where you can dynamically update content? </li></ul></ul><ul><ul><li>Yes – whole site is on a CMS </li></ul></ul><ul><ul><li>Yes – some pages are on CMS </li></ul></ul><ul><ul><li>No </li></ul></ul><ul><ul><li>Unsure </li></ul></ul>
    8. 8. <ul><li>Nearly 10% of website traffic is now coming from mobile; we expect that to be over 20% within two years. </li></ul><ul><li>The canvas is smaller; KISS principle </li></ul><ul><li>Test your mobile site on all popular devices and browsers </li></ul><ul><li>Mobile Apps vs. (Mobile) “M Sites” </li></ul>The Rise of Everything Mobile
    9. 9. Building a Good Website <ul><li>Project Planning & Execution </li></ul><ul><ul><li>Defining the website’s purpose and vision </li></ul></ul><ul><ul><li>Establishing a reasonable budget (build + maintain) </li></ul></ul><ul><ul><li>Hiring the right team </li></ul></ul><ul><ul><li>QA process (Use Jing or similar service) </li></ul></ul><ul><li>Adding Interactive Elements (Social, Blogs, Polls) </li></ul><ul><li>Marketing Basics : Analytics, SEO, CRM (Email) </li></ul><ul><li>Personalize the Experience </li></ul>Key Questions: Web Analytics & CRM How long do people stay on your site? How often do they return? What do they do on the site (transact, interact)?
    10. 10. Poll # 2 <ul><ul><li>How often does someone in your organization check Web Analytics? </li></ul></ul><ul><ul><li>Every day </li></ul></ul><ul><ul><li>1-2 times/week </li></ul></ul><ul><ul><li>1-2 times/months </li></ul></ul><ul><ul><li>Less than once/month </li></ul></ul><ul><ul><li>We don’t have Analytics </li></ul></ul>
    11. 11. Channels (example: Travel/Tourism) Travel sites, blogs and discussion boards Micro-blogging service Twitter Biggest social network Facebook Photo sharing network Flickr Video sharing website YouTube
    12. 12. Poll # 3 <ul><ul><li>Do you offer sharing and social bookmarking tools, such as “Email to Friend” or “Upload to Facebook” for some of your web content? </li></ul></ul><ul><ul><li>Yes </li></ul></ul><ul><ul><li>No </li></ul></ul><ul><ul><li>Unsure </li></ul></ul>
    13. 13. Web Analytics Case Study – An A/B Test <ul><li>OPTION 1: /home </li></ul>Flash Banner: YES Form on Home Pg: YES
    14. 14. Web Analytics Case Study – An A/B Test <ul><li>OPTION 2: /home2 </li></ul>Flash Banner: NO Form on Home Pg: YES
    15. 15. Web Analytics Case Study – An A/B Test <ul><li>OPTION 3: /index </li></ul>Flash Banner: NO Form on Home Pg: NO
    16. 16. Web Analytics Case Study – An A/B Test <ul><li>OPTION 4: /index2 </li></ul>Flash Banner: YES Form on Home Pg: NO
    17. 17. Web Analytics Case Study – An A/B Test <ul><li>Results </li></ul>Tip: Use Google Web Optimizer to Run A/B Tests!
    18. 18. Poll # 4 <ul><ul><li>Has your company ever run a multivariate test using Google Website Optimizer, Optimost or some other A/B Testing analytics tool? </li></ul></ul><ul><ul><li>Yes </li></ul></ul><ul><ul><li>No </li></ul></ul><ul><ul><li>Unsure </li></ul></ul>
    19. 19. Best Practices Website Tour [Top Sites & Why We Like Them]
    20. 20. www.restorationhardware.com
    21. 21. www.restorationhardware.com <ul><li>What we like about it: </li></ul><ul><ul><ul><ul><li>Design Gallery – shop while you’re in the experience of visualizing a room </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Clear and concise messaging </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Design/Graphics are top-notch </li></ul></ul></ul></ul>
    22. 22. www.tripadvisor.com
    23. 23. www.tripadvisor.com <ul><li>What we like about it: </li></ul><ul><ul><ul><ul><li>Intelligent Facebook Integration </li></ul></ul></ul></ul><ul><ul><ul><ul><li>User engagement (reviews) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Special offers widgets (flight deals) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Promotion of other family of sites </li></ul></ul></ul></ul>
    24. 24. www.shopflick.com
    25. 25. www.shopflick.com <ul><li>What we like about it: </li></ul><ul><ul><ul><ul><li>Use of Video during shopping experience </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Meet the Designers, Personalizes the Sale </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Use of Tags (for SEO, User Experience) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Great layout, graphics, special effects </li></ul></ul></ul></ul>
    26. 26. www.tumi.com
    27. 27. www.tumi.com <ul><li>What we like about it: </li></ul><ul><ul><ul><ul><li>Recently Viewed Widget </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Subscription Options </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Compare Products Widget </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Search Functionality </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Shop by Country </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Overall Navigation </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Lifestyle Imagery + Product Images </li></ul></ul></ul></ul>
    28. 28. www.1800lighting.com
    29. 29. www.1800lighting.com <ul><li>What we like about it: </li></ul><ul><ul><ul><ul><li>Domain Name strategy </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Ability to Buy straight from Videos </li></ul></ul></ul></ul><ul><ul><ul><ul><li>In Stock Updated real-time & Store Availability </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Home Page Calls to Action (Ads) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>User Friendly Shopping Experience </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Green Add to Cart with + Sign </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Shop Accessories upsell </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>Brands get featured sections </li></ul></ul></ul></ul>
    30. 30. Best Practices Website Tour [Browse Sites]
    31. 31. Questions & Answers
    32. 32. Thank you for your participation! For questions or comments about this presentation, contact: Arman Rousta Chief Executive Officer [email_address] 212.904.1240 office 55 Broad Street, 17 th Floor New York, NY 10004 www.bluelinerny.com
    33. 33. Bonus Material: Website Tour Continued [More Sites we Like (some of which we also built!)]
    34. 34. www.nyvideoschool.com
    35. 35. www.nyvideoschool.com <ul><li>What we like about it: </li></ul><ul><ul><ul><ul><li>Incorporation of video throughout site </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Use of AJAX for user-friendliness </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Good branding, clear messaging and CTAs </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Different levels of membership and access </li></ul></ul></ul></ul>
    36. 36. www.mint.com
    37. 37. www.mint.com <ul><li>What we like about it: </li></ul><ul><ul><ul><ul><li>Web 2.0 defined </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Clear and concise messaging </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Design/Graphics are top-notch </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Usability of web-software is second to none </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Account setup really does take 5 minutes </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Functionality is impressive – ability to split transactions, create own categories, tags, etc. </li></ul></ul></ul></ul>
    38. 38. www.tigweb.org
    39. 39. www.tigweb.org <ul><li>What we like about it: </li></ul><ul><ul><ul><li>Great Calls to Action </li></ul></ul></ul><ul><ul><ul><li>Clear Promotion of User Generated Content </li></ul></ul></ul><ul><ul><ul><li>Color-coding of Top Navigation and Sections </li></ul></ul></ul>
    40. 40. www.skittles.com
    41. 41. www.skittles.com <ul><li>What we like about it: </li></ul><ul><ul><ul><li>Complete Innovation – new type of website </li></ul></ul></ul><ul><ul><ul><li>Immersion with Social Networks </li></ul></ul></ul><ul><ul><ul><li>Creative and fun </li></ul></ul></ul>
    42. 42. www.chaacreek.com/belize-travel-blog
    43. 43. www.chaacreek.com/belize-travel-blog <ul><li>What we like about it: </li></ul><ul><ul><ul><ul><li>Full-CMS Site (using Wordpress) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Excellent Branding, gives feel for resort </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Big Header Graphics </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Border Graphics </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Effective use of Flash in SEO-friendly site </li></ul></ul></ul></ul>
    44. 44. www.snooth.com
    45. 45. www.snooth.com <ul><li>What we like about it: </li></ul><ul><ul><ul><ul><li>It’s just a great idea – perfect social network </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Web 2.0 widgets everywhere </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Sharing, Friending, RSS Feeds, etc. </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>Geo-targeting site visitors based on IP Address </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Mobile version and promotion of it </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Simple and creative navigation </li></ul></ul></ul></ul>
    46. 46. www.visuallease.com
    47. 47. www.visuallease.com <ul><li>What we like about it: </li></ul><ul><ul><ul><ul><li>Big Header Graphics </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Full-CMS Site (using Wordpress) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Effective use of Flash in SEO-friendly site </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Javascript Top Navigation </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Good CTAs </li></ul></ul></ul></ul>
    48. 48. www.barackobama.com/tv
    49. 49. www.barackobama.com/tv <ul><li>What we like about it: </li></ul><ul><ul><ul><li>Full suite of Web 2.0 tools </li></ul></ul></ul><ul><ul><ul><li>Excellent use of video as medium </li></ul></ul></ul><ul><ul><ul><li>User participation via functional tools/programs </li></ul></ul></ul><ul><ul><ul><li>Depth of content </li></ul></ul></ul>
    50. 50. www.endless.com
    51. 51. www.endless.com <ul><li>What we like about it: </li></ul><ul><ul><ul><li>Best of breed ecommerce navigation </li></ul></ul></ul><ul><ul><ul><li>Level of detail – showing views and granular hi-resolution product images </li></ul></ul></ul>
    52. 52. www.treehugger.com
    53. 53. www.treehugger.com <ul><li>What we like about it: </li></ul><ul><ul><li>great navigation: side scrolling (set people's expectations) </li></ul></ul><ul><ul><li>navigation: bread crumb </li></ul></ul><ul><ul><li>navigation: 3 categories in top nav, every pg </li></ul></ul><ul><ul><li>appropriate 'green' advertising / videos in expanded ads </li></ul></ul><ul><ul><li>Green Trend - tell users how to help, what to do -&quot;how to help treehugger&quot; </li></ul></ul>
    54. 54. www.boagworld.com
    55. 55. www.boagworld.com <ul><li>What we like about it: </li></ul><ul><ul><ul><li>Useful and well-designed footer (not just an after-thought – rather used strategically) </li></ul></ul></ul><ul><ul><ul><li>Big Easy buttons, headers and fonts </li></ul></ul></ul><ul><ul><ul><li>Great and visible interactive features </li></ul></ul></ul><ul><ul><ul><li>Frequently updated quality content – key for blogs </li></ul></ul></ul>
    56. 56. www.redclaymedia.com
    57. 57. www.redclaymedia.com <ul><li>What we like about it: </li></ul><ul><ul><ul><li>Contact form drop down </li></ul></ul></ul><ul><ul><ul><li>Multi-color text </li></ul></ul></ul><ul><ul><ul><li>Neat Flash concept/integration within home page </li></ul></ul></ul><ul><ul><ul><li>Big headers with captivating content </li></ul></ul></ul><ul><ul><ul><li>Blog integration to top navigation </li></ul></ul></ul>
    58. 58. www.bluelinerny.com
    59. 59. www.bluelinerny.com <ul><li>What we like about it: </li></ul><ul><ul><ul><li>Video integration into home page </li></ul></ul></ul><ul><ul><ul><li>Powerful flash header, with rotating branding plugs </li></ul></ul></ul><ul><ul><ul><li>News and blog feeds in home page – dynamic content, great for SEO </li></ul></ul></ul><ul><ul><ul><li>Featured client, rotating images, gives the feeling of active projects and capabilities </li></ul></ul></ul><ul><ul><ul><li>Flash top and left-side navigation </li></ul></ul></ul><ul><ul><ul><li>Phone number on every page of the site </li></ul></ul></ul><ul><ul><ul><li>Nifty flash portfolio section </li></ul></ul></ul><ul><ul><ul><li>Integration of blog that has powerful add-ons </li></ul></ul></ul><ul><ul><ul><li>It’s our own site – perhaps we’re a bit vain  </li></ul></ul></ul>
    60. 60. www.allstategarage.com
    61. 61. www.allstategarage.com <ul><li>What we like about it: </li></ul><ul><ul><ul><li>Integrates navigation and video </li></ul></ul></ul><ul><ul><ul><li>Design detailing, such as garage borders </li></ul></ul></ul><ul><ul><ul><li>Interactive elements – design your bike </li></ul></ul></ul>
    62. 62. www.facebook.com
    63. 63. www.facebook.com <ul><li>What we like about it: </li></ul><ul><ul><ul><li>Can’t say enough about it – this is the best website around </li></ul></ul></ul><ul><ul><ul><li>RELEVANCE – news feeds, application add-on model, and ability to customize the entire experience give user EXACTLY what they want </li></ul></ul></ul><ul><ul><ul><li>Tagging people in pictures (largest picture upload site on web) </li></ul></ul></ul><ul><ul><ul><li>Organized, simple, intuitive </li></ul></ul></ul>