Responsive design has become an expected and necessary element in the website design process. With the large majority of users viewing content on their mobile devices, your website should be easily accessible and tailored to each experience. This workshop will walk through the process of wireframing and explain how setting goals is an important step to optimizing your content for your audience. We will also lead you through an exercise that helps you understand how each responsive viewpoint can be altered to fit the consumption needs of your users.

1. #WCATL WORKSHOP
Designing for the Mobile Web
Brought to you by the folks at GreenMellen

2. WORKSHOP TIMELINE
1:00 - 1:50 PM
Prioritizing Features for
Responsive Websites
1:50 - 2:00 PM
Intermission
2:00 - 2:50 PM
Wireframing for
Responsive Websites
#WCATLDesigning for the Mobile Web

3. #WCATLDesigning for the Mobile Web

4. #WCATLDesigning for the Mobile Web

5. #WCATLDesigning for the Mobile Web

6. PART 1
Prioritizing Features
for Responsive Websites

7. WHAT ARE MOBILE
RESPONSIVE WEBSITES?
#WCATLDesigning for the Mobile Web

8. RESPONSIVE
DESIGN IS...
when you resize your browser window
and the website does this cool thing
where it changes the layout
#WCATLDesigning for the Mobile Web
Fluid grid, flexible images,
and media queries

9. #WCATLDesigning for the Mobile Web
MOBILE RESPONSIVE WEBSITES
MOBILE
320px, 480px
TABLET
600px, 768px
DESKTOP
900px, 1200px

10. WEBSITE STRATEGY PROCESS
#WCATLDesigning for the Mobile Web
Set Goals Information
Architecture
Determine
Features
Content
Strategy

11. WEBSITE STRATEGY PROCESS
#WCATLDesigning for the Mobile Web
Set Goals Information
Architecture
Determine
Features
Content
Strategy

12. ACTIVITY 1
Feature
Prioritization

13. Find a team

14. #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.

15. #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?

16. Debate which
features have the
most value for your
users.

17. Choose a constraint
and identify
tradeoffs.

18. “It’s not just what it
looks like and feels like.
Design is how it works.
Steve Jobs

19. Time to share!

20. See you
at 2:00!
Great job!

21. #WCATL WORKSHOP
Designing for the Mobile Web
Brought to you by the folks at GreenMellen

22. PART 2
Wireframing for
Responsive Websites

23. #WCATLDesigning for the Mobile Web
WHAT IS
WIREFRAMING?

24. WHAT IS WIREFRAMING?
#WCATLDesigning for the Mobile Web
MOBILE
320px, 480px
TABLET
600px, 768px
DESKTOP
900px, 1200px

25. WHAT IS WIREFRAMING?
#WCATLDesigning for the Mobile Web

26. ACTIVITY 2
Responsive
Wireframing

27. Get back with
your team

28. 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

30. 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

31. EXAMPLE SKETCHES

32. “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

33. WIREFRAMING TOOLS
#WCATLDesigning for the Mobile Web

34. WIREFRAMING > DEVELOPMENT
#WCATLDesigning for the Mobile Web
Don’t forget about the
viewport sizes in between
Adjust your typography
Test, test, and test again

35. QUESTIONS?
@alitaylorgreen
@ashlealanier