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
Top Related