Being Responsive Designing websites that look great on phones, tablets & desktops
Bryan Mayjor -‐ Extension & Experiment Station Communications
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
NETC 2014 -‐ Tekkies in the Little Apple
Media Queries Desktop layout
3
NETC 2014 -‐ Tekkies in the Little Apple
Media Queries Tablet portrait
4
NETC 2014 -‐ Tekkies in the Little Apple
Media Queries Phone portrait
5
NETC 2014 -‐ Tekkies in the Little Apple
Setting the width of image by device
6
NETC 2014 -‐ Tekkies in the Little Apple
Setting image width by device
7
NETC 2014 -‐ Tekkies in the Little Apple
Where did that sidebar go? Layout of elements get rearranged when width changes
8
NETC 2014 -‐ Tekkies in the Little Apple
Where did that sidebar go? Layout of elements get rearranged when width changes
9
NETC 2014 -‐ Tekkies in the Little Apple
Where did that sidebar go? Layout of elements get rearranged when width changes
10
NETC 2014 -‐ Tekkies in the Little Apple
Where did that sidebar go? Layout of elements get rearranged when width changes
11
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Search page example
12
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Search page example
13
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Search page example
14
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
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
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Making the timeline look good on mobile devices
17
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Making the timeline look good on mobile devices
18
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Making the timeline look good on mobile devices
19
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Making the timeline look good on mobile devices
20
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Making the timeline look good on mobile devices
21
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Making the timeline look good on mobile devices
22
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Making the timeline look good on mobile devices
23
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Making video pop-‐ups look good on mobile devices
24
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Attempting to make the video pop-‐ups look good on mobile devices
25
NETC 2014 -‐ Tekkies in the Little Apple
Going with the flow Attempting to make the video pop-‐ups look good on mobile devices
26
NETC 2014 -‐ Tekkies in the Little Apple
Don’t Reinvent the Wheel
• Start with a responsive framework like Bootstrap or Foundation
27
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
NETC 2014 -‐ Tekkies in the Little Apple
Bryan Mayjor [email protected]
29
Source: http://http://www.marcandangel.com
