No content

THIS IS ME [email protected] davidleininger dleininger heyyou dleinin David Leininger Find me, I’! talk nerdy to you... 

TODAY’S AGENDA AKA... What I’m going to talk at you... 1. What is UI? 2. What is Responsive Web Design? 3. Show and Tell 4. El futuro de Internet en todo el mundo 5. Pizza Party and Team Building Exercises 

WHAT IS UI? And why "e heck is it so imp#tant? • A user interface is the system by which people interact with a machine. 

WHAT IS UI? And why "e heck is it so imp#tant? • A user interface is the system by which people interact with a machine. • A user interface is the system by which people interact with a ANYTHING. 

RON SWANSON Can you rea!y control what "e user is going to do? 

WHAT IS UI? And why "e heck is it so imp#tant? • Somethings have to be so simple they work without instruction • Others are taught over time to a point that they become second nature. 

UI CHECKLIST Good UI is clear, concise, and helpful 1. Know your user 2. Pay attention to patterns 3. Stay consistent 4. Use visual hierarchy 5. Provide feedback 6. Be Forgiving 7. Empower your user 8. Speak their language 9. Keep it simple 

NEW PROBLEMS Now "e user can use a! kinds of devices... iMac, iPhone, iPad... • Mobile phones • Tablets • Retina display computers 

WHAT IS RWD? Responsive Web Design • Flexible Grids • Media Queries • Flexible Images (at a minimum) 

IS RWD IMPORTANT? M#e "an you would believe... • Meets users where they are at • Single site, single source of content • Futureproof 

RWD IS GOOD UI Responsive Web Design • Tailored solution for each screen size • Uses touch and swipe gestures for mobile • Puts important content first 

MOBILE FIRST What does "at mean? • Worry about essential content first • Reduces content/design bloat • Gives users the content at the top 

WHAT’S WRONG HERE? How is "is bad UI? 

SOLUTION Responsive Nav is a sma! part of RWD 

SHOW AND TELL MediaQuerie.es mediaqueri.es 

SHOW AND TELL Responsive Web The Boston Globe 

SHOW AND TELL False Interaction • False Interaction is when the user thinks and feels like they are doing something to interact with the page content, but in actuality they aren’t. • http://simple.com • http://squareup.com/careers/creative • http://knowclassic.com coming soon... 

THE FUTURE It’s here and it’s awesome • Icon Fonts • New (way m#e awesome) Media Queries 

QUESTIONS? You’ve got questions... I’ve got answers... 

No content