How to Project-Manage and Implement a Responsive Website

How to Project-Manage and Implement a Responsive Website

Statistics

- 2.1 billion mobile broadband subscribers

- In the US 87% of American adults have cell phones

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.

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.

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

Key Benefits of Responsive Design

- Save time and cost on mobile development

- Save time and cost on site management

Key Benefits of Responsive Design

- Increase your reach to tablet and mobile audiences

- Increase sales

Key Benefits of Responsive Design

- Consolidate your analytics and reporting

- Increase your visibility in search engines

When to consider a separate Mobile Site?

- You find yourself creating duplicate pages for mobile users on the same website

When to consider a separate Mobile Site?

- Short pages that look great on mobile phones don’t take advantage of large screens;

When to consider a separate Mobile Site?

- You plan to phase out the widescreen layout in favor of a more streamlined user experience.

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.

Project Management

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

Project Management

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

Project Management

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

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.

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.

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.

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?

Design & Development - The Goal

● Define audience and user needs.● Aim for device-perfect, not pixel-

perfect

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.

Design & Development - The Grid

● Be prepared to change those proportions depending on the screen width. (addressed using CSS and media-queries)

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.

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

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.

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.

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.

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%;}

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.

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.

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*/}

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.

Design & Development - Media Queries

Test, test, test on as many devices as possible!

RWD Bookmarklet:http://responsive.victorcoulon.fr/

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.

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

Design & Development - Performance

● Use CSS and web type whenever possible. Google fonts is your friend and has many free, nice looking fonts.

Design & Development - Performance

● Use SVG when you can to speed things up.

● Use icon fonts for unlimited scaling and speed.

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.

Responsive Frameworks

Twitter BootstrapZurb Foundation

JetstrapCascade

Less 4(to name but a few)

http://bradfrost.github.io/this-is-responsive/resources.html

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

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

Drupal and FoundationGo to: drupal.org/project/zurb-foundation

Drupal and FoundationCopy gz or tar link:

Drupal and FoundationInstall new Theme: yoursite.com/admin/appearance/install

Drupal and FoundationSet as Default; so you can start prototyping

Drupal and FoundationCreating a Subtheme with Drush:

The command to do this is simply: drush fst [THEMENAME] [Description !Optional]

Drupal and FoundationCreating a Subtheme Manually

Drupal and FoundationCreating a Subtheme Manually

Drupal and FoundationCreate a media-queries.css file

Drupal and Foundationadd the media-queries.css into the info file

Wordpress and Responsive Themes

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

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.

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

Wordpress and Foundation—FTP

2) Unzip the file and place the folder in /wp-content/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

Wordpress and Foundation—WordPressTo 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

Thank You!

Marcos Corro, Designer & DeveloperBalboa Park Online Collaborative

Jennifer Jurgens, Design & DeveloperMinneapolis Institute of Arts