1.
The world has gone mobile.
But has your web experience?
@petesena
#rwdCADC

2.
A little about me.

3.
Hi there. I’m @petesena
You would expect a fancy bio of me to go here or
something but that would just be douchey. You should
follow me on twitter. I tweet about the intersection
of design and technology in marketing. Cool tools,
trends, tutorials and all that jazz. If this presentation
has been useful for you please share it with someone.

4.
This is the web today.

5.
77% of people use smart phones as
their preferred medium for searching.
-Google / Nielsen
mobile search moments march 2013

6.
WTF! I just want
to get information
on admissions.

7.
Where did responsive design come from?

8.
So what the hell is responsive design?
flexible grid flexible media media queries

9.
It means you are device agnostic!

10.
Why responsive?
• One application to maintain which runs everywhere
• Improve SEO and user confusion with one set of URLs
• Such a variety of devices, platforms and browsers
• Mobile and desktop simply isn’t enough
• Don’t discriminate, one site for all devices
• Future proof and ready for the next device

11.
Breaking some old habits.

12.
The old waterfall web design process
Discovery
Strategy &
Planning
Design Development Optimize

13.
It’s time to evolve.

14.
Evolving to a new iterative process
Project
Planning!
Discovery
(Immersion)!
Strategy! Content
Strategy!
UX & IA! Design! Development! Post
Launch!

15.
A new web design process

16.
A new web design process
Strategy

17.
A new web design process
Sketching
Review Validate
Prototyping
DesignWireframe
Strategy

18.
A new web design process
Sketching
Review Validate
Prototyping
DesignWireframe
Strategy Outcome

19.
Not content first.

20.
Not content first.
Not mobile first.

21.
Not content first.
Not mobile first.
Context first.

22.
sketchearly.

23.
Some handy UserExperiencedesigntools

24.
Design systems. Not comps.

25.
What makes up a
design system?
•Content
•Grid & Visual Hierarchy
•Typography
•Color Palette
•Iconography / Shape / Form
•Imagery

26.
What makes up a
design system?
•Content
•Grid & Visual Hierarchy
•Typography
•Color Palette
•Iconography / Shape / Form
•Imagery

27.
What makes up a
design system?
•Content
•Grid & Visual Hierarchy
•Typography
•Color Palette
•Iconography / Shape / Form
•Imagery

28.
Responsive
web design
resources
• Style Tiles (http://styletil.es/)
• Gumby grid & UI Kit templates
(gumbyframework.com)
• Sketchsheets (sneakpeekit.com)
• Modular Scale (balanced typography)

29.
A photoshop UI kit
A photoshop user interface kit can be very helpful as a
starting place. It will contain virtually all HTML elements
which will be a great reference asset for when it comes
time for building the markup/css. Gumby Framework
includes all the grid photoshop files as well as the
interface elements.

30.
Analog & digital grids

31.
Resources for web typography
Fonts

32.
Resources for front-end development

33.
The best advice ever.

34.
wait for it...

35.
Learn to code.
</>

36.
Where to learn front-end development ?

37.
If you enjoyed this gimme a shout on twitter
@petesena.
Go make something.