Web Basics for Business


Published on

Presented by Georgianna Pinto at the Harlem Business Alliance 7/10/2012

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

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Basics for Business

  1. 1. An Introduction to Websites and How They Work
  2. 2. Class Topics A note about web browsers Types of websites Getting started The design process Good design practices Online resources
  3. 3. A Note About WebBrowsers IE declining Source: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
  4. 4. Find Your Version Number
  5. 5. Types of Websites: Flash Built in Adobe® Flash Used for splash pages, special effects, etc. Used by restaurants, music, movies, games, video players, and more Not supported by iPhones and iPads Many effects can be achieved with HTML5
  6. 6. Types of Websites:HTML4/5 HTML is a markup language used to design and layout web pages HTML+CSS+PHP+jQuery+mySQL+etc. HTML5 extends HTML4 Improves accessibility Cleaner code Support for web applications IE9+, Firefox 3.6+, Chrome 5+, Safari 4+
  7. 7. Types of Websites:Wordpress Originally built as a blogging platform Can be used for regular websites Plugins give a range of functionality Great for SEO “Self-hosted” on your web server Look for “1-Click Installation”
  8. 8. Types of Websites:Wordpress
  9. 9. Getting Started –Domain Names and Hosting Your domain is the URL for your site: ie. www.georgiannapinto.com ~$10 per year, must be renewed! Purchase separate or with hosting Your host is where your website’s files are stored online Domain transfers, monthly billing, Google/Facebook credits, WP, etc.
  10. 10. The Design Process Design Consultation Structure Phase Content Phase Launch SEO and Marketing
  11. 11. Preparing for Your DesignConsultation Examples of sites you like Examples of sites you don’t like Template sites: www.templatemonster.com www.themeforest.com
  12. 12. Wireframing and Mock-Ups Consider design elements separately Color, composition, scale, images, etc. Do you want horizontal or vertical navigation? Do you want a jQuery slider or flash area in your header? Are there a sidebar or highlight area with graphic buttons for visitors to click on for navigation?
  13. 13. Wireframe: An Example
  14. 14. Working with a WebDesigner/Developer Make sure you know your designer’s abilities beforehand Graphic designers vs. Front-end programmers vs. DBAs vs. Copywriters vs. Marketers, etc. You can split up the project Have them show you examples and explain their role
  15. 15. “The Death Spiral of ‘Minor’ Changes” Photo: The Oatmeal
  16. 16. Get Organized – TheSitemap A list (and description) of every page of your site; scope of work Ex: 1. Home – will provide intro text 2. About Us – need bios 3. Contact Us – form, map, address, phone 4. Services – will have photos, text 5. Media – pdfs of articles, links
  17. 17. Structuring A Web DesignQuote Setup and programming (10-15 hours x hourly rate) Content formatting per page (1-2 hours each x number of pages) Testing and QA (included) Extras SEO Social Media
  18. 18. Good Design Practices Reduce load time www.webwait.com Cross browser testing W3C validation www.validator.w3.org Elements to avoid! Splash pages, blinking text, audio, etc.
  19. 19. Online Resources Wix $4.95/month to connect domain $8.25/month to remove branding, free domain Central.ly Free to set up 1&1 MyWebsite Business $9.99/month, free domain
  20. 20. Recap About web browsers Types of websites Getting started The design process Good design practices Online resources
  21. 21. Questions?
  22. 22. Next Week, Part 2 Connecting to your web server Intro to HTML and CSS Tools to help you enhance your site Interactive: Bring your questions!
  23. 23. Thanks! Email: contact@georgiannapinto.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.