Recommended
More Related Content
Featured
Featured (20)
Modern Web Design & Development Workflow: Ben Klocek
- 3. lolzcats
Editor's Notes
- \n
- Sitting at your desk, working hard\n
- getting that site ready for launch\n
- when you boss walks in, or you get a call from a client\n
- “I want a modern website, with\n
- social media\n
- video\n
- ecommerce\n
- \n
- -computer, iPad, and iPhone.\n
- and those other phones too.\n
- “Ok” you say. “I think I can help you with that. It’s not rocket science.”\n
- In the back of your head, you’re thinking, “All this new stuff!\nI’ve been learning about this stuff. Keeping up on twitter, reading the websites, going to conferences, but its all so complex!”\n
- And here’s the main challenge. \n\n\n
- So lets dive in.\n
- - making sure everyone is on the same planet.\n- Understanding expectations:\n- they will likely already be sharing this with you.\n- self-diagnosis not to be trusted. Doctor & malpractice.\n-Google offers <insert your favorite functionality here> for free, why do you charge for/can't you build the same thing?\n
- - determines team\n- technology\n- ultimately whether you can do/want to take the project\n\n- no? either need an education, or not someone you want to work with.\n
- - measurable\n- Focus on tasks\n- formalize the process\n- you become keeper of the vision\n- Save the &#x201C;how&#x201D; for after the contract is signed.\n
- - Typical full stack team\n\n
- - a little less glamorous, but a bit more practical. \n- Typical full stack team\n- A good Responsive Design website REQUIRES close collaboration between IA, Creative, and Technology\n\n
- \n
- - goal focused & measurable\n
- - minify, gzip, HTML5 BoilerPlate .htaccess, compress images\n- lazy loading of scripts with yepnope.js or modernizr.js\n- google pagespeed\n
- - works on many devices\n- progressive enhancement\n\n
- We&#x2019;ll hear about that from Carl Sue later.\n
- - meaningful to people visiting\n
- - research: red routes, goals, grids, modules, content (@karenmcgrane), thumbnail sketches\n- prototype: Foundation, Bootstrap, in browser, \n- design: increasing fidelity\n- communicate: clients, no big reveal\n
- - fast lane, main user routes to goal completion\n
- - page table for content\n- Jeri Hastava\n
- Navigation, newsletter sign up, call to action block, social proof\n- Solve small problems\n
- \n
- \n
- - components in photoshop\n- most in code\n- typography &#x201C;font-select&#x201D; style-guide\n
- \n
- \n
- - percentage based\n
- - bandwidth\n- sizes\n
- -target a device based on specific attributes & deliver certain CSS to it.\n-Devices that don&#x2019;t recognize @media, or don&#x2019;t match a query, will get the mobile view.\n-Content should determine breakpoints. We'll simply define rules as more real estate becomes available.\n
- - Michael Slater will go into it more later\n
- And here&#x2019;s the main challenge. \n\n\n
- \n
- \n