1. An Introduction to Websites and How They Work

2. Class Topics A note about web browsers Types of websites Getting started The design process Good design practices Online resources 3. A Note About WebBrowsersIE declining Source: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers 4. Find Your Version Number 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. 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 HTML4Improves accessibilityCleaner codeSupport for web applications IE9+, Firefox 3.6+, Chrome 5+, Safari 4+ 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. Types of Websites:Wordpress 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 websites files are stored online Domain transfers, monthly billing, Google/Facebook credits, WP, etc. 10. The Design Process Design Consultation Structure Phase Content Phase Launch SEO and Marketing 11. Preparing for Your DesignConsultation Examples of sites you like Examples of sites you dont like Template sites:www.templatemonster.comwww.themeforest.com 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. Wireframe: An Example 14. Working with a WebDesigner/Developer Make sure you know your designers 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. The Death Spiral of Minor Changes Photo: The Oatmeal 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. 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) ExtrasSEOSocial Media 18. Good Design Practices Reduce load timewww.webwait.com Cross browser testing W3C validationwww.validator.w3.org Elements to avoid!Splash pages, blinking text, audio, etc. 19. Online Resources Wix$4.95/month to connect domain$8.25/month to remove branding, freedomain Central.lyFree to set up 1&1 MyWebsite Business$9.99/month, free domain 20. Recap About web browsers Types of websites Getting started The design process Good design practices Online resources 21. Questions? 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. Thanks! Email: contact@georgiannapinto.com