How to Project-Manage and Implement a Responsive Website Marcos Corro, Designer & Developer Balboa Park Online Collaborative Jennifer Jurgens, Design & Developer Minneapolis Institute of Arts

1. How to Project-Manage and
Implement a Responsive Website

2. Statistics
- 2.1 billion mobile broadband
subscribers
- In the US 87% of American adults have
cell phones

3. Statistics
- 45% of American adults have a
smartphone. 90% use their phone to go
online.
- 55% use their cell phones to go online.
31% of which go online mostly using their
phones rather than a computer.

4. Statistics
- 37% of cell phone owners and 64% of
smartphone owners use their phone to
get news online.
- 74% of mobile visitors will abandon a
site if it takes more than 5 seconds to
load.

5. What is responsive design
Responsive web
design (RWD) is the
combination of flexible
grids, flexible images and
media queries. It allows
you to write once, publish
everywhere

6. Key Benefits of Responsive Design
- Save time and cost on mobile
development
- Save time and cost on site management

7. Key Benefits of Responsive Design
- Increase your reach to tablet and
mobile audiences
- Increase sales

8. Key Benefits of Responsive Design
- Consolidate your analytics and
reporting
- Increase your visibility in search engines

9. When to consider a separate Mobile Site?
- You find yourself creating duplicate
pages for mobile users on the same
website

10. When to consider a separate Mobile Site?
- Short pages that look great on mobile
phones don’t take advantage of large
screens;

11. When to consider a separate Mobile Site?
- You plan to phase out the widescreen
layout in favor of a more streamlined user
experience.

12. Project Management
1- Responsive levels the playing field design, content, and development
happen at the same time. All producers
and stakeholders working in these areas
must work together in tandem.

13. Project Management
2- Make sure you designate a project
manager to coordinate collaboration and
communication.

14. Project Management
3- Create a project team
● Meet weekly
● Research the technology together
● Create wireframes together
● Make decisions together

15. Project Management
● Test and iterate together, make sure
everyone has access to mobile
devices. It’s called mobile first - not
homepage first

16. Project Management
4. Everyone will want to design for the
laptop/desktop focusing on the
homepage. Your job is to focus on how it
looks on mobile. Mobile first. This takes
discipline when you do it for the first
time.

17. Project Management
4. Everyone will want to design for the
laptop/desktop focusing on the
homepage. Your job is to focus on how it
looks on mobile. Mobile first. This takes
discipline when you do it for the first
time.

18. Project Management
4. Everyone will want to design for the
laptop/desktop focusing on the
homepage. Your job is to focus on how it
looks on mobile. Mobile first. This takes
discipline when you do it for the first
time.

19. Design & Development - The Goal
● Define objectives for your design.
What’s the goal of this site? Who’s
the hero? Where do you want people
to look first?

20. Design & Development - The Goal
● Define audience and user needs.
● Aim for device-perfect, not pixelperfect

21. Design & Development - The Grid
● Use a flexible grid. You must use a
flexible grid for a responsive design.
● Think in proportions and
percentages, not definite widths or
heights.

22. Design & Development - The Grid
● Be prepared to change those
proportions depending on the
screen width. (addressed using CSS
and media-queries)

23. Design & Development - The Sketch
● Focus on the content, not the
container.
● Be loose with your sketches; the
purpose is to get ideas out and see
how they work together.

24. Design & Development - The Flow
Allow for content to flow in a logical manner as the
screen gets bigger/smaller. [e.g., you normally
wouldn’t want the header to flow under main
content, so you need to set up your columns so as
they collapse or expand, the page makes sense
from top to bottom as you scroll].

25. Design & Development - The Reveal
Since screen width will be changing, think about
what content you may have to hide or remove (or
more appropriately to add or enhance) to make the
current screen width the best experience and which
makes the most sense for that device. This would
include things like animation, large video, or
background images.

26. Design & Development - The Face
A hallmark of Responsive Design is
FLEXIBILITY. This means that not only
does the structure need to be flexible,
you images, video and type should be
flexible as well.

27. Design & Development - The Face
Make sure typography is proportional to the screen
it’s on. You can do this using ems and percentages
instead of absolute pixel sizes. There are plugins
such as FitText.js and Lettering.js that can offer you
even finer control of your typography.

28. Design & Development - The Face
Make sure your images will do this as well. A good
default is to set the default max-width of an image
to be 100% of it’s container and auto height. If you’
re ok with it scaling, use only width:100%. If you
have to limit the width, limit the container, not the
image.
img {
max-width: 100%;
}

29. Design & Development - The Face
Another alternative is to use the
picturefill.js script, which uses the HTML5
data attribute to feed different images to
different sizes.

30. Design & Development - The Face
For video, you can use a server-side solution to
serve up device-appropriate sizes, or shoot for a
median size and use a plugin like FitVids.js to
make it responsive. Since YouTube has it pretty
much figured out which size video to send based
on bandwidths; hosting your videos on there and
using FitVids to get them into your site is a great
way to go.

31. Design & Development - Media Queries
This is where the magic happens.
@media all and (min-width: 500px) {/*css rules here*/}
@media screen and (max-width: 800px) {/*css rules here*/}
@media screen and (max-width: 50em) {/*css rules here*/}

32. Design & Development - Media Queries
● W3C: “Media queries extend the
functionality of media types by allowing
more precise labeling of style sheets. “
● Be device-agnostic: use ems instead of set
pixel widths; Or, start out with pixel widths,
and then write for ems to display correctly
for the non-conformists.

33. Design & Development - Media Queries
Test, test, test on as many
devices as possible!
RWD Bookmarklet:
http://responsive.victorcoulon.fr/

34. Design & Development - Breakpoints
● Breakpoints should be determined by
content, not just device-width
● Start out small (280-300px) and slowly bring
up the browser width and watch as the
content re-adjusts. Make your breakpoints
accordingly.

35. Design & Development - Performance
● Minify your scripts and CSS to make
page load quicker. If you use a
preprocessor like Sass you may need
to make extra accommodations for
the media-queries [e.g., you can’t
use a variable as a breakpoint].

36. Design & Development - Performance
● Use CSS and web type whenever
possible. Google fonts is your friend
and has many free, nice looking
fonts.

37. Design & Development - Performance
● Use SVG when you can to speed
things up.
● Use icon fonts for unlimited scaling
and speed.

38. Design & Development - Performance
● For byte-size appropriate images,
use a server-side solution like
Adaptive-Images, or a DOM
manipulator like Mobify.js, or a
cloud-based service like ReSRC.

39. Responsive Frameworks
Twitter Bootstrap
Zurb Foundation
Jetstrap
Cascade
Less 4
(to name but a few)
http://bradfrost.github.io/this-is-responsive/resources.html

40. Responsive Frameworks
Framework Pros
●
●
●
●
Usually very robust
Good for rapid prototyping
Bundled plugins work well together
Good for inexperienced developers; can get
something up quickly

41. Responsive Frameworks
Framework Cons
●
●
●
●
You may end up overwriting a lot of css
May be more complexity than needed
Can be a crutch
Can look the generic without a lot of
customization

42. Drupal and Foundation
Go to: drupal.org/project/zurb-foundation

43. Drupal and Foundation
Copy gz or tar link:

44. Drupal and Foundation
Install new Theme: yoursite.com/admin/appearance/install

45. Drupal and Foundation
Set as Default; so you can start prototyping

46. Drupal and Foundation
Creating a Subtheme with Drush:
The command to do this is simply:
drush fst [THEMENAME] [Description !
Optional]

47. Drupal and Foundation
Creating a Subtheme Manually

48. Drupal and Foundation
Creating a Subtheme Manually

49. Drupal and Foundation
Create a media-queries.css file

50. Drupal and Foundation
add the media-queries.css into the info file

51. Wordpress and Responsive Themes
Wordpress conveniently comes
prepackaged with a responsive theme
called Twenty Thirteen.
http://wordpress.org/themes/twentythirteen

52. Wordpress and Foundation
Installing a responsive theme in Wordpress
is fairly simple. You can either do it though
the Wordpress interface, or manually
through FTP.

53. Wordpress and Foundation—FTP
1) Dowload the Foundation Wordpress
theme from https://github.
com/drewsymo/Foundation
(a quick google search for “foundation wordpress
theme” bring this up as the first result.)

54. Wordpress and Foundation—FTP
2) Unzip the file and place the folder in /wpcontent/themes
3) Login to the WP environment as admin and
activate the theme.
4) To customize the theme, you should create a
WordPress Child Theme.
http://codex.wordpress.org/Child_Themes

55. Wordpress and Foundation—WordPress
To add the theme though WordPress:
1.
Log in to the WordPress Administration Panels.
2.
Select the Appearance panel, then Themes.
3.
Select Install Themes.
4.
Use the sub-menu or the Search or Filter options to locate a Theme you would like to use.
5.
Click on the Preview link to preview the Theme or the Install link to upload the Theme to your
blog.
6.
Use the Upload link in the top sub-menu to upload a zipped copy of a Theme that you have
previously downloaded to your machine.
http://codex.wordpress.org/Using_Themes

56. Thank You!
Marcos Corro, Designer & Developer
Balboa Park Online Collaborative
Jennifer Jurgens, Design & Developer
Minneapolis Institute of Arts