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

  • View
    3.344

  • Download
    0

  • Category

    Business

Preview:

DESCRIPTION

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.

Citation preview

7 Pillars Digital Marketing Academy

Webinar Presented by:Arman RoustaDigital Strategist & CEO of Blueliner

January 20112:00 – 3:00pm EST

TM

Web Design Trends 2011

Overview – Table of ContentsOverview – Table of Contents

• Introduction to Blueliner Marketing• Web Design Trends & Tools• Best Practices Website Tour• Questions & Answers• Upcoming Webinars

Interactive Marketing ClientsInteractive Marketing Clients

California Closets (Lifestyle)California Closets (Lifestyle)

Completely Bare (Beauty)Completely Bare (Beauty)

IZOD Men’s Fragrance (Beauty)IZOD Men’s Fragrance (Beauty)

Bogner (Fashion) Bogner (Fashion)

Allied Home Mortgage (Real Estate)Allied Home Mortgage (Real Estate)

New York Video School (Education)New York Video School (Education)

401kid (Finance)401kid (Finance)

CMS Forex (Finance)CMS Forex (Finance)

Guardian Water & Power (Energy)Guardian Water & Power (Energy)

Morningside Translations (Translations)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)Medical Hair Restoration (Medical)

Manhattan Orthopaedic Care (Medical)Manhattan Orthopaedic Care (Medical)

Russia Today (Media)Russia Today (Media)

SogoTrade (Finance)SogoTrade (Finance)

Icebreaker (Fashion)Icebreaker (Fashion)

Lufthansa (Travel)Lufthansa (Travel)

Chaa Creek Resort (Travel)Chaa Creek Resort (Travel)

Celect.org (Social Media)Celect.org (Social Media)

Bid on the City (Real Estate)Bid on the City (Real Estate)

Red Clay Media (Marketing)Red Clay Media (Marketing)

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 The 7 Pillars 7 Pillars of Digital Marketingof Digital Marketing

What Makes A Good Website?What Makes A Good Website?

• Usability (clarity, simplicity, speed)• Satisfying User Experience (UX)• Organized Site Navigation

• Great Branding & Design Elements• Quality Content and Offerings• Interactivity – User Engagement

13 Trends & Best Practices13 Trends & Best Practices

1. Increasing Use of Video

2. Built on CMS (Content Management Systems) platforms, like Wordpress, Drupal, Diem and Joomla

3. Bigger Fonts and Powerful Header Images

4. Heavy Social Media integration

5. Use of Engagement Tools, like Chat, Music, Forums, Blogs, Polls, and other user-contribution features

6. Mobile Versions

7. Multi-lingual / IP-targeting to show local content

8. Detailed Borders as Backgrounds

9. Useful Footer Bar Design

10. Bread Crumb Navigation

11. SEO Considerations – proper meta data tagging

12. Intelligent Incorporation of Ads

13. Pre-loaders & Favicons

Poll # 1Poll # 1

Does your website operate off of a CMS or blog, where you can dynamically update content?

• Yes – whole site is on a CMS• Yes – some pages are on CMS• No• Unsure

The Rise of The Rise of EverythingEverything Mobile Mobile

• Nearly 10% of website traffic is now coming from mobile; we expect that to be over 20% within two years.

• The canvas is smaller; KISS principle

• Test your mobile site on all popular devices and browsers

• Mobile Apps vs. (Mobile) “M Sites”

Building a Good WebsiteBuilding a Good Website

• Project Planning & Execution• Defining the website’s purpose and vision• Establishing a reasonable budget (build + maintain)• Hiring the right team• QA process (Use Jing or similar service)

• Adding Interactive Elements (Social, Blogs, Polls)• Marketing Basics: Analytics, SEO, CRM (Email)• Personalize the Experience

Key Questions: Web Analytics & CRMHow long do people stay on your site?How often do they return?What do they do on the site (transact, interact)?

Poll # 2Poll # 2

How often does someone in your organization check Web Analytics?

• Every day• 1-2 times/week• 1-2 times/months• Less than once/month • We don’t have Analytics

Channels (example: Travel/Tourism)Channels (example: Travel/Tourism)

Travel sites, blogs and discussion boards

Micro-blogging service Twitter

Biggest social network Facebook

Photo sharingnetwork Flickr

Video sharingwebsite YouTube

Poll # 3Poll # 3

Do you offer sharing and social bookmarking tools, such as “Email to Friend” or “Upload to Facebook” for some of your web content?

• Yes• No• Unsure

Web Analytics Case Study – An A/B TestWeb Analytics Case Study – An A/B Test

OPTION 1: /home

Flash Banner: YES

Form on Home Pg: YES

Web Analytics Case Study – An A/B TestWeb Analytics Case Study – An A/B Test

OPTION 2: /home2

Flash Banner: NO

Form on Home Pg: YES

Web Analytics Case Study – An A/B TestWeb Analytics Case Study – An A/B Test

OPTION 3: /index

Flash Banner: NO

Form on Home Pg: NO

Web Analytics Case Study – An A/B TestWeb Analytics Case Study – An A/B Test

OPTION 4: /index2

Flash Banner: YES

Form on Home Pg: NO

Web Analytics Case Study – An A/B TestWeb Analytics Case Study – An A/B TestResults

TipTip: Use Google Web Optimizer to Run A/B Tests!: Use Google Web Optimizer to Run A/B Tests!

Poll # 4Poll # 4

Has your company ever run a multivariate test using Google Website Optimizer, Optimost or some other A/B Testing analytics tool?

• Yes• No• Unsure

Best Practices Best Practices Website TourWebsite Tour

[Top Sites & Why We Like Them][Top Sites & Why We Like Them]

www.restorationhardware.com

www.restorationhardware.com

What we like about it: • Design Gallery – shop while you’re in the

experience of visualizing a room• Clear and concise messaging• Design/Graphics are top-notch

www.tripadvisor.com

www.tripadvisor.com

What we like about it: • Intelligent Facebook Integration• User engagement (reviews)• Special offers widgets (flight deals)• Promotion of other family of sites

www.shopflick.com

www.shopflick.com

What we like about it: • Use of Video during shopping experience• Meet the Designers, Personalizes the Sale• Use of Tags (for SEO, User Experience)• Great layout, graphics, special effects

www.tumi.com

www.tumi.com

What we like about it: • Recently Viewed Widget• Subscription Options• Compare Products Widget• Search Functionality• Shop by Country• Overall Navigation• Lifestyle Imagery + Product Images

www.1800lighting.com

www.1800lighting.com

What we like about it: • Domain Name strategy• Ability to Buy straight from Videos• In Stock Updated real-time & Store Availability• Home Page Calls to Action (Ads)• User Friendly Shopping Experience

• Green Add to Cart with + Sign• Shop Accessories upsell

• Brands get featured sections

Best Practices Best Practices Website TourWebsite Tour

[Browse Sites][Browse Sites]

Questions & Questions & AnswersAnswers

Thank you for your participation! For questions Thank you for your participation! For questions or comments about this presentation, contact:or comments about this presentation, contact:

Arman Rousta Chief Executive Officerarman@bluelinerNY.com

212.904.1240 office

55 Broad Street, 17th FloorNew York, NY 10004www.bluelinerny.com

Bonus Material: Bonus Material: Website Tour Website Tour ContinuedContinued[More Sites we Like (some of which [More Sites we Like (some of which we also built!)]we also built!)]

www.nyvideoschool.com

www.nyvideoschool.com

What we like about it: • Incorporation of video throughout site• Use of AJAX for user-friendliness• Good branding, clear messaging and CTAs• Different levels of membership and access

www.mint.com

www.mint.com

What we like about it: • Web 2.0 defined• Clear and concise messaging• Design/Graphics are top-notch• Usability of web-software is second to none• Account setup really does take 5 minutes• Functionality is impressive – ability to split

transactions, create own categories, tags, etc.

www.tigweb.org

www.tigweb.org

• What we like about it: • Great Calls to Action• Clear Promotion of User Generated Content• Color-coding of Top Navigation and Sections

www.skittles.com

www.skittles.com

What we like about it: • Complete Innovation – new type of website• Immersion with Social Networks• Creative and fun

www.chaacreek.com/belize-travel-blog

www.chaacreek.com/belize-travel-blog www.chaacreek.com/belize-travel-blog

What we like about it: • Full-CMS Site (using Wordpress)• Excellent Branding, gives feel for resort• Big Header Graphics• Border Graphics• Effective use of Flash in SEO-friendly site

www.snooth.com www.snooth.com

www.snooth.com www.snooth.com

What we like about it: • It’s just a great idea – perfect social network• Web 2.0 widgets everywhere

• Sharing, Friending, RSS Feeds, etc.• Geo-targeting site visitors based on IP Address• Mobile version and promotion of it• Simple and creative navigation

www.visuallease.com www.visuallease.com

www.visuallease.com www.visuallease.com

What we like about it: • Big Header Graphics• Full-CMS Site (using Wordpress)• Effective use of Flash in SEO-friendly site• Javascript Top Navigation• Good CTAs

www.barackobama.com/tvwww.barackobama.com/tv

www.barackobama.com/tv www.barackobama.com/tv

What we like about it: • Full suite of Web 2.0 tools• Excellent use of video as medium• User participation via functional tools/programs• Depth of content

www.endless.com www.endless.com

www.endless.comwww.endless.com

What we like about it: • Best of breed ecommerce navigation• Level of detail – showing views and granular hi-

resolution product images

www.treehugger.com www.treehugger.com

www.treehugger.com www.treehugger.com

What we like about it: • great navigation: side scrolling (set people's

expectations)• navigation: bread crumb• navigation: 3 categories in top nav, every pg• appropriate 'green' advertising / videos in expanded

ads• Green Trend - tell users how to help, what to do

-"how to help treehugger"

www.boagworld.com www.boagworld.com

www.boagworld.com www.boagworld.com

What we like about it: • Useful and well-designed footer (not just an after-

thought – rather used strategically)• Big Easy buttons, headers and fonts• Great and visible interactive features• Frequently updated quality content – key for blogs

www.redclaymedia.com www.redclaymedia.com

www.redclaymedia.com www.redclaymedia.com

What we like about it: • Contact form drop down• Multi-color text• Neat Flash concept/integration within home page• Big headers with captivating content• Blog integration to top navigation

www.bluelinerny.comwww.bluelinerny.com

www.bluelinerny.com www.bluelinerny.com

What we like about it: • Video integration into home page• Powerful flash header, with rotating branding

plugs• News and blog feeds in home page – dynamic

content, great for SEO• Featured client, rotating images, gives the feeling

of active projects and capabilities• Flash top and left-side navigation• Phone number on every page of the site• Nifty flash portfolio section• Integration of blog that has powerful add-ons• It’s our own site – perhaps we’re a bit vain

www.allstategarage.com www.allstategarage.com

www.allstategarage.comwww.allstategarage.com

What we like about it: • Integrates navigation and video• Design detailing, such as garage borders• Interactive elements – design your bike

www.facebook.com www.facebook.com

www.facebook.com www.facebook.com

What we like about it: • Can’t say enough about it – this is the best

website around• RELEVANCE – news feeds, application add-on

model, and ability to customize the entire experience give user EXACTLY what they want

• Tagging people in pictures (largest picture upload site on web)

• Organized, simple, intuitive