Web Basics & Process

Special talk for DeWitt High School web class

Transcript

1. Monica Salter
2. About Gravity Works Detail-Driven Design + Leading-Edge Development =
 Outstanding Websites and Applications
3. About Gravity Works •Everyone at GW loves to learn and stay on top of the latest tech & tools •I get to be super nerdy and people still think I’m cool •Job perks - free lunches, tech conferences, fun team outings, $$$, chill environment, GAMES!
4. About Gravity Works
5. About Me @mocasalter
6. Front-End Developer
9. Not All Browsers Are Created Equal
10. Gravity Works Process •Client Assessment •Preliminaries •Mockups •Development •Content Entry •QA & Launch
11. Client Assessment
12. Client Assessment •Know your client’s organization inside and out. What do they do? How do they do it? What makes them stand out from others? •Get to know their customers. Who are they and what will they want from the site?
13. Client Assessment •Figure out the client’s overall goals and expectations. Do they want to show off products? Share complex info? Get more members? •It’s ok to turn down a potential client sometimes.
14. Preliminaries •Project Proposal/Scope •Contract •Content Priority •Sitemap
17. Mockups •Designer uses the content priority doc to make a full mockup of the website •Selects and arranges typography, colors, imagery
19. Puppy Break
20. Development We always work in a Content Management System (CMS) like Drupal, DNN or Wordpress
21. Development All of our websites are responsive
22. Development
23. Development Helpful CSS Techniques •Media Blocks
 http://www.stubbornella.org/content/2010/06/25/the-media-object-saves- hundreds-of-lines-of-code/ •Managing and Clearing Floats
 https://css-tricks.com/all-about-floats/ •Grid Systems
 https://css-tricks.com/dont-overthink-it-grids/
24. Development HTML5 Tags •Nav - for main navigation •Main - for primary content (1 per page) •Aside - for secondary content or sidebars •Article - for self containing content

25. Content Entry
26. QA & Launch
27. QA & Launch Browser Testing •A browser’s capabilities are largely determined by the browser engine •Browser Engine: a software component that takes marked up content (like HTML, XML, image files, etc.) and formatting information (like CSS) and displays the formatted content on the screen.
28. QA & Launch Free Browser Testing Tools •http://caniuse.com •Chrome Inspector Emulation •Your friends’ old devices
29. QA & Launch Fixing Janky Browsers •http://modernizr.com 
 tutorial: http://www.hongkiat.com/blog/modernizr/ •Last resort: IE conditional stylesheets https://css-tricks.com/how-to-create-an-ie-only-stylesheet/
30. QA & Launch Launch!
31. Cat Break
32. Gravity Works Websites
33. Gravity Works Websites Uncle Ed’s Oil
 https://www.uncleedsoil.com/ 
 
 Codepen of icons
 http://codepen.io/mocasalter/pen/xfqBv
34. Gravity Works Websites Lansing Center
 http://lansingcenter.com/
 
 True parallax example
 http://www.elartfest.com/ Why to be accessibility friendly
 https://the-pastry-box-project.net/anne-gibson/2014-july-31
35. Gravity Works Websites Molly Maid
 http://www.mollymaid.com/ 
 
 Their design, our code. Think about how your site might change (respond) for different screen sizes while designing the mockup - it matters!
36. Web Resources Articles
 http://alistapart.com/
 http://www.sitepoint.com/
 https://css-tricks.com/ Code Examples
 https://css-tricks.com/
 http://codepen.io/
 http://tympanus.net/codrops/
 https://github.com/

37. Web Resources Answers If You’re Stuck
 http://stackoverflow.com/ Learning More
 https://www.codeschool.com/
 http://www.codecademy.com/
 https://teamtreehouse.com/
38. Questions?