Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Design for the Web
1.
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
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
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.
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
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
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)
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)
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