How to transfer your design expertise to amazing websites.

2. Who I Am I am a marketer and a project manager I am a geek whisperer I am NOT a designer

3. Today’s Presentation The challenges and possibilities brought by current web technologies Ways to better communicate your design to developers Designers create elegant solutions to problems Please keep pushing the envelope

4. The Basics All about the pixels Always work in 72 dpi Design sites to 984px wide or less

5. BrowserSize.GoogleLabs.com

6. BrowserSize.GoogleLabs.com

7. The Basics (cont.) Main text no smaller than 12 px Websafe fonts Colors – sRGB Actually built with hex colors Every monitor different Flash Terrible for SEO Entire site is “one page” Alternatives: Javascript or HTML5 Flash perfect for header or contained interactive element

8. The Basics (cont.) Not all browsers are created equal Reviewing your designs pre-development Do not print Colors are based in light, not pigment Contrast is ruined Size issues like balance and legibility become impossible to evaluate Export review documents as JPGs: Exact size Medium quality Post for review in a browser window (Basecamp)

9. Steps of the Web Design Process Proposal Branding Purchase Domain Set Business Goals Site Map

10. Site Map

11. Site Map

12. Steps of the Web Design Process Proposal Branding Purchase Domain Set Business Goals Site Map Creation of Content Design

13. Design Start w/home and 1 or 2 interior pages Show your developer Typically just design each “type” of page Deliver as layered Photoshop documents (Illustrator files nice suppliments) Be nice to your developers

14. HTML Templates Integrate CMS Create Each Page Input Content Shopping Cart SEO Final Testing Final Client Review Launch Steps of the Web Design Process Proposal Branding Purchase Domain Set Business Goals Site Map Creation of Content Design

15. How Print and Web Differ Nothing is Exact Brower size screen resolution, Colors Bottomless Pages Font size Content

16. Print vs Web: Adaptable Designs Good websites = consistently fresh content Design not just for content you have, but for the content of the future Think through variations (April 1 vs. November 29-December 2) show the variation in your design - If you don’t, the developer will just make it up.

17. Adaptable Designs

18. Adaptable Designs

19. Print vs Web: Adaptable Designs Don’t count on kerning to get something in a certain width, especially stacked text

20. Adaptable Designs

21. Adaptable Designs

22. Adaptable Designs

23. Print vs Web: The Bottomless Page The web expands downward Be aware of side columns Background images/gradients

24. Print vs Web: Many Small Chunks Short attention spans, limited real estate Give information quickly and/or entice to interact

25. Print vs Web: User Interface Encourage interaction - doing makes a stronger emotional impact than seeing Interaction: active-states, rollovers Use of color to indicate links Some content consistent between pages What is the path? User should never have to use browser back button Easy Access

26. Print vs Web: Navigation Not a table of contents – way-finding Signs

27. Print vs Web: Real Estate “The Fold” – about 500px high Top of the page can’t be wasted Intensifies Hierarchy More important the info, the higher on the page

28. Print vs Web: Everything in a Box Every image and chunk of text is contained in a rectangle Can overlap, but cannot change shape

29. Everything in a Box

30. Everything in a Box

31. Everything in a Box

32. Go to Photoshop

33. Content Management Systems (CMS) is a software system which provides website authoring and administration tools designed to allow users with little knowledge of Web programming to create and manage the site's content with relative ease.

34. CMS: Advantages Make it easy for someone with limited coding skills to keep website updated, reduces cost overall Encourages sites to have active content (best sites, return visits) Easy to manage evolving content News Events Blogs

35. CMS: Advantages Easily manage content that appears on multiple pages

37. CMS: Advantages Easily manage content that appears on multiple pages Decreases human error Increases efficiency Increases consistency of layout Automates things like ordering new items Most often by date or alpha/numeric Database driven content allows for management, organization, archive and search of complex sets of data Review Sites News sites Shopping sites Makes mobile sites affordable & maintainable Helps with SEO (should)

38. Types of CMS Single text area on a page List driven Blogs eCommerce Custom Databases

39. Choosing a CMS Open Source E.g. Joomla, Drupal, Wordpress Always evolving Community maintained forums Have pre-fab templates to start from Can have limits on customization Proprietary CMS E.g. SharePoint, FileMaker Pro, Webany Someone you can call Depending on system and developer (and budget), it can be completely customized Balancing Feature Set with Complexity Often start free/cheap, more features with upgrades

40. CMS: Disadvantages Most need a developer to set up Must work in templates Even more important to think through variations and exceptions before build starts Almost every text space must be expandable (downward)

41. Search Engine Optimization: 3 Parts Research Technology Keywords Implementation

42. SEO: Research Like any process, prep is key Sweet Spot: high search + low competition Clients often think they know what they want to come up for, but they usually don’t: Think they want to optimize for their company name Think they want to be #1 for “Cheesecake” Think they want to be #1 for “Frisbee Cheesecake” For some high-competition industries, SEO for natural search may not be affordable for all clients Pay-Per-Click should be considered as an alternative. (Research for PPC is the same as SEO)

43. SEO: Research

44. SEO: Research

45. SEO: Technology Dozens of ways to build a site to optimize (or screw it up) Page titles Meta descriptions Page URL aliases Directory structure File size Using header tags Configuring Robot.txt files Setting up ISS correctly Submitting it to webmaster accounts Alt tags On and on Work with a developer who knows what they are doing, and use a CMS that makes SEO a priority.

46. SEO: Use of Keywords Don’t bury keywords in images or Flash Consider consequences of non-Web-safe fonts as headers Work keywords into text high up the page Bold, italics and bullet points help keyword prominence Every page should have some text on it Use alt text on images Make sure page titles match content Say things in different ways Set up links from outside pointing in – use keywords (not Web address) as links whenever possible More pages are better, build authority

47. Take a Picture of This Screen with Your Phone! For a PDF copy of this presentation email: katie@astekweb.com Online Resources Mentioned in Presentation: BrowserSize.GoogleLabs.com BasecampHQ.com AstekBlog.com W3Schools.com Webany.net