Responsive Web Design

Class 4

Class 4 Slides:

cfarm.co/rwd4

Goal for Today

Homework

• Use navigation best practices to make your nav menu touch-friendly and usable at small screen sizes.
• Use the "Nav Bar" or "Stacked List" design pattern to accomplish this for small screens.
• Use media queries to change the nav bar to match our original design at larger screen sizes where it fits the layout best.

Responsive Navigation

• Provide only minimal navigation at the top of the page
• Provide consistent navigation mechanisms.
• Should be touch-friendly with large, tappable buttons

Responsive Navigation

How do we reconcile these requirements?

Build a toggle menu that shows/hides our small screen nav on click/touch.

jQuery Toggle

Toggle refers to showing/hiding element

Syntax looks like:

$('nav').toggle();

jQuery Toggle

We want this toggle to show or hide our nav on alternate clicks so we put this toggle inside a click event:

$('.clickme').click(function() {
  $('nav').toggle();
});

Let's Develop It

• Add a button to your page that will trigger the menu toggle
• Add the toggle event code to your page underneath your jQuery include (~line 130), inside a <script> tag:

<script>
$('.toggle-button').click(function() {
  $('header nav').toggle();
});
</script>

jQuery Toggle for Mobile Only

This toggle button should only show at small screen sizes, so hide it with CSS inside a media query for large screen sizes:

@media (min-width: 500px) {
  .toggle-nav {
    display: none;
  }
}

jQuery Toggle on Resize

We need extra code to handle when the browser window is resized. With Javascript you can check the window size using if statements.

Let's Develop It

• Use the providedJavascript code to create a stacked nav that toggles. Style the nav as stacked for mobile first in your default CSS, then make it horizontal in your media query for larger scresn sizes.
• You may need to adjust the provided JS window width check to match your media queries for when the toggle button appears.

Bonus Nav!

• In your template file, check the js/menu folder for an example of the select menu design pattern.
• Open the template/js/menu/index.html file and resize to see it in action.

Slideshow

SlidesJS is a responsive, touch-friendly jQuery plugin for making slideshows.

Forms

Form Inputs for Mobile W3C says:

• Keep the number of keystrokes to a minimum.
• Avoid free text entry where possible. Provide pre-selected default values instead.
• Label all form controls appropriately and explicitly associate labels with form controls.
• Position labels so they lay out properly in relation to the form controls they refer to.
• More guidelines

Let's Develop It

• Add this form HTML inside your .callout-container div
• Style it so the labels are vertical for mobile first, and then horizontal in a media query. Example
• You may have to adjust your layout (widths, percentage values, etc) to make this form fit!!
• BONUS! Add default values to your form.

Tricky Tables

Options for squeezing tables:

• Pinch it down to small size with good ol' max-width: 100% or percentage width
• Don't use a table for data but maybe a list where possible
• CSS trickery to re-style table data vertically instead of horizontally
• More

Let's Develop It

• Add a table inside your .main-column div
• Make your table responsive using this example's styles as a guide

Performance Best Practices

Keep the number of externally linked resources to a minimum. Each linked resource (images, style sheets and other objects) requires a separate request across the network. This may add significantly to the load time of the page in the mobile context.

Solution: Use sprites for images, minify & combine CSS, minify & combine JS

Performance Best Practices

Limit content to what the user has requested. Mobile users often pay for bandwidth, so offering them content that is extraneous to their needs, especially advertising, costs them time and money and contributes to an unsatisfactory experience. In general, the user's consent should be sought before initiating the download of content.

Solution: If hiding content, use appropriate methods to NOT load the content if it's not going to be useful for mobile user. *P.S. If it's not useful for a mobile user, it's probably not useful for anyone. Consider getting rid of it for ALL devices*

Progressive Enhancement

Hint: we already did some of this using media queries to progressively enhance for screen size, retina resolution, etc.

Browser Support

Check browser support for specific features at caniuse.com

Browser Support

Write CSS for specific features using Modernizr

Modernizr adds classes to the <body> element

• Classes let us style things differently for browsers that support certain features
• Includes classes for features like media queries, box-sizing, mutiple bgs, background-size, box-shadow, font-face, gradients...etc

Let's Develop It

You should already have Modernizr built into your template, let's use it!

• Inspect the <body> element to see what classes it has
• Write styles using the .boxshadow and .borderradius classes for your button styles
• Test using Browser Stack free trial or Net Renderer if you don't have old IE

.borderradius .button {
  border-radius: 4px;
}

...Graceful Degradation

Let's Develop It

You should already have Modernizr built into your template, let's use it!

• Inspect the <body> element to see what classes it has
• Write styles using the .js class and the .no-js class so that your toggle navigation is styled with and without Javascript enabled
• Test by turning off JS in your browser (hint: useful Chrome plugin makes this easy)
• BONUS! Write styles using the .mediaqueries class or .nomediaqueries class to create fallbacks for IE. To do this, you'll have to add a new custom Modernizr script to your page.

Questions?