Modern Web Design & Development Workflow: Ben Klocek
Upcoming SlideShare
Loading in...5
×
 

Modern Web Design & Development Workflow: Ben Klocek

on

  • 708 views

It's no mystery that building websites for the modern web affects workflow considerably. Static comps passed from designer to developer with nary a word no longer suffice. An integrated team, all ...

It's no mystery that building websites for the modern web affects workflow considerably. Static comps passed from designer to developer with nary a word no longer suffice. An integrated team, all involved from the beginning is becoming a necessity for successful site launches. Ben Klocek will share some of the industry best practices that can help smooth out the design and development process for building modern websites. http://bracia.com

Statistics

Views

Total Views
708
Views on SlideShare
707
Embed Views
1

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 1

http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 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 “how” 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’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 “font-select” 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’t recognize @media, or don’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’s the main challenge. \n\n\n
  • \n
  • \n

Modern Web Design & Development Workflow: Ben Klocek Modern Web Design & Development Workflow: Ben Klocek Presentation Transcript

  • lolzcats