Responsive web design (RWD) creates dynamic changes to a website's appearance depending on the viewing device's screen size and orientation. The presentation discusses how RWD works using media queries to rearrange and resize website elements like images, text containers, and sidebars for different devices. It provides examples of redesigning elements like search pages, timelines, and video pop-ups to work well across desktop, tablet, and phone screen sizes and orientations. The presentation recommends starting with a responsive framework like Bootstrap or Foundation to simplify the process of building responsive websites.

1. Being
Responsive
Designing
websites
that
look
great
on
phones,
tablets
&
desktops
Bryan
Mayjor
-­‐
Extension
&
Experiment
Station
Communications

2. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Being
Responsive
Designing
websites
that
look
great
on
phones,
tablets
&
desktops
Responsive web design (RWD) is a web development approach that
creates dynamic changes to the appearance of a website, depending on
the screen size and orientation of the device being used to view it.
Source: http://www.nngroup.com/articles/responsive-web-design-definition/!
!
2

3. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Media
Queries
Desktop
layout
3

4. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Media
Queries
Tablet
portrait
4

5. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Media
Queries
Phone
portrait
5

6. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Setting
the
width
of
image
by
device
6

7. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Setting
image
width
by
device
7

8. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Where
did
that
sidebar
go?
Layout
of
elements
get
rearranged
when
width
changes
8

9. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Where
did
that
sidebar
go?
Layout
of
elements
get
rearranged
when
width
changes
9

10. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Where
did
that
sidebar
go?
Layout
of
elements
get
rearranged
when
width
changes
10

11. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Where
did
that
sidebar
go?
Layout
of
elements
get
rearranged
when
width
changes
11

12. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Search
page
example
12

13. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Search
page
example
13

14. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Search
page
example
14

15. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
What
looks
good
in
portrait
doesn’t
always
work
as
well
in
landscape
15

16. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
What
looks
good
in
portrait
doesn’t
always
work
as
well
in
landscape
16

17. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Making
the
timeline
look
good
on
mobile
devices
17

18. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Making
the
timeline
look
good
on
mobile
devices
18

19. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Making
the
timeline
look
good
on
mobile
devices
19

20. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Making
the
timeline
look
good
on
mobile
devices
20

21. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Making
the
timeline
look
good
on
mobile
devices
21

22. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Making
the
timeline
look
good
on
mobile
devices
22

23. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Making
the
timeline
look
good
on
mobile
devices
23

24. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Making
video
pop-­‐ups
look
good
on
mobile
devices
24

25. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Attempting
to
make
the
video
pop-­‐ups
look
good
on
mobile
devices
25

26. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Going
with
the
flow
Attempting
to
make
the
video
pop-­‐ups
look
good
on
mobile
devices
26

27. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Don’t
Reinvent
the
Wheel
• Start
with
a
responsive
framework
like
Bootstrap
or
Foundation
27

28. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Websites
Referenced
Oregon’s
Agricultural
Progress
http://oregonprogress.oregonstate.edu
!
Pacific
Northwest
Insect
Handbook
http://pnwhandbooks.org/insect
28

29. NETC
2014
-­‐
Tekkies
in
the
Little
Apple
Bryan Mayjor
bryan.mayjor@oregonstate.edu
29
Source: http://http://www.marcandangel.com