#WCATL WORKSHOPDesigning for the Mobile Web

Brought to you by the folks at GreenMellen

WORKSHOP TIMELINE

1:00 - 1:50 PMPrioritizing Features for Responsive Websites

1:50 - 2:00 PM Intermission

2:00 - 2:50 PM Wireframing for Responsive Websites

#WCATLDesigning for the Mobile Web

#WCATLDesigning for the Mobile Web

#WCATLDesigning for the Mobile Web

#WCATLDesigning for the Mobile Web

PART 1Prioritizing Features

for Responsive Websites

WHAT ARE MOBILE RESPONSIVE WEBSITES?

#WCATLDesigning for the Mobile Web

RESPONSIVE DESIGN IS...

when you resize your browser windowand the website does this cool thingwhere it changes the layout

#WCATLDesigning for the Mobile Web

Fluid grid, flexible images, and media queries

#WCATLDesigning for the Mobile Web

MOBILE RESPONSIVE WEBSITES

MOBILE320px, 480px

TABLET600px, 768px

DESKTOP900px, 1200px

WEBSITE STRATEGY PROCESS

#WCATLDesigning for the Mobile Web

Set Goals InformationArchitecture

Determine Features

Content Strategy

WEBSITE STRATEGY PROCESS

#WCATLDesigning for the Mobile Web

Set Goals InformationArchitecture

Determine Features

Content Strategy

ACTIVITY 1

Feature Prioritization

Find a team

#WCATLDesigning for the Mobile Web

Your Challenge

A client has approached you with an idea for an interactive recipe website: a platform that allows friends to submit

and share their favorite recipes with each other.

#WCATLDesigning for the Mobile Web

Your Challenge

Your team has $100 to spend on design and development for your client’s recipe website.

With your team, figure out how you want to spend your money. Which features do you want to support, and on

which devices? Why did you make those choices?

Debate which features have the most value for your users.

Choose a constraint and identify tradeoffs.

“It’s not just what it looks like and feels like.

Design is how it works.Steve Jobs

Time to share!

See you at 2:00!

Great job!

#WCATL WORKSHOPDesigning for the Mobile Web

Brought to you by the folks at GreenMellen

PART 2Wireframing for

Responsive Websites

#WCATLDesigning for the Mobile Web

WHAT IS WIREFRAMING?

WHAT IS WIREFRAMING?

#WCATLDesigning for the Mobile Web

MOBILE320px, 480px

TABLET600px, 768px

DESKTOP900px, 1200px

WHAT IS WIREFRAMING?

#WCATLDesigning for the Mobile Web

ACTIVITY 2

ResponsiveWireframing

Get back with your team

Your Challenge

A client has approached you with an idea for an interactive recipe website: a platform that allows friends to submit

and share their favorite recipes with each other.

#WCATLDesigning for the Mobile Web

Using your feature prioritization from Activity 1, create a design for the homepage of your client’s recipe website.

You have 20 minutes to create this design for browsers on desktop, tablet, and smartphone.

Block off where you think features will go on ALL the devices before you start sketching.

Your Challenge

#WCATLDesigning for the Mobile Web

EXAMPLE SKETCHES

“When good design is used, you don’t know it’s

there. It’s simply intuitive.Katie Dill :: Director of Experience

Design at Air B&B

WIREFRAMING TOOLS

#WCATLDesigning for the Mobile Web

WIREFRAMING > DEVELOPMENT

#WCATLDesigning for the Mobile Web

Don’t forget about theviewport sizes in between

Adjust your typography

Test, test, and test again

QUESTIONS?@alitaylorgreen@ashlealanier