Responsive Web Design Notes

Responsive Web Design is definitely the wave of the future and pretty soon there will be nothing less excepted.  As web designers, we must acknowledge this is true.  Equally as true is the frustration that can come with developing fantastic designs that reorient themselves based upon the viewing medium.  Hopefully, I can help!  Here are my notes on a recent Responsive Web Design course.  Check the code snippets library for pieces of CSS which you can add to your website to get started today!

Screen Sizes

all screen sizes should be targeted

  •         classic PC monitor is 1280 x 1040 vs modern PC monitor is 1920 x 1080
  •         laptop monitors are commonly short at 1360 x 768
  •         typical smartphone is 480 x 320
  •         tablets are 1024 x 768
  •         android tablets are 1280 x 800 vs HD’s at 1920 x 1200
  •         furthermore, viewports or windows can be resized, must plan for this

    Need to focus on smallest and largest size

320 x 480 to 1920 x 1080

 

Design Concepts

  •    Start by designing mobile site first at 320 px width
  •    On index pages, people like to click on images, so try to place them up front in the design!
    •    make them links to other pages
    •    Masonry layout consists of multiple independent vertical blocks stacked in a flow pattern
  • this layout can remove the necessity of a sidebar
  • also possible to place sidebar beneath content in design, but plan for what works best for the situation
  • topnav should be used for top level navigation while sidebars should be used to drill into content more indepthly and offer relevant information for the user

Menus

  •     want to combine readability, usability, and accessability in menu, most accomplish 2 of 3
  •     if want drop down menu, must use Superfish javascript for accessibility
    •         however, drop downs are a bad idea when designing responsive themes
      •             hides content
  •     instead of making drop down menu, place secondary links in content for 1st level page
    •         or place the links in the sidebar
  • Images and video are more difficult to deal with for responsive themes
    •     responsive images are accomplished with css
    •     responsive videos are accomplished with javascript

 

Media Queries

  • Responsive design depends on css media queries
  • conditional statements that tell browser to use specific sets of styles dependent on browser behavior
    • @media – calls the media query
      • @media only screen – decides what is affected
        • @media only screen and – condition for media query
          • @media only screen and (max-width:900px) – says if the screen has anything smaller than 900px, then these styles kick in

@media only screen and (max-width:900px) {

body {

whatever style

}

}

 

To Check for device width: <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” /> – Place this meta tag in header.php file

 

Most obvious place for a media query is directly after the style it is going to modify

    if you want to change a bunch of parameters along the same media query variable, best to place each query in a grouping at the bottom of the document

 

Building a Responsive Frame

  • use max-width instead of width (fixed) on the wrapper (container): (max-width:1040px)
  • define pre-defined step regions with media queries
    • @media only screen and (min-width: 720px) and (max-width:1039px)
    • then create new wrapper styles with set width:720px;
  • @media only screen and (max-width:720px)
    • this is where you change styles like margins and font-sizes for smaller browser window

 

Building a Responsive Header

  •     header must contain multiple pieces of info, usually title, tagline, topnav, and image
    •         use percentages when developing
    •             start with width of entire container element
      •                 margin-left (%) the container element to get the position of a right-oriented topnav menu
      •                 negative margin-left (%) the title element to remove it from the container
        •                     float left the title element
        •                     then give the title element a width (%) of the difference between the negative margin-left percentage and 100
  •     use media queries once the header becomes condensed enough that the nav can no longer sit to the right of logo

 

Responsive Menus

  •     On smaller screens, must sometimes enlarge buttons to make navigation possible (change text links to buttons, orient them differently, etc.)
  • Responsive Content Layout
    •     When text goes above a certain number of words per line, it becomes more difficult to read.
    •     use floating to cleanly lay out content and make content move in more of a vertical style as screen size is reduced
    •     responsive images
      •         easy to make images responsive, all you have to do is tell browser to resize image depending on container
      •             set img {max-width: 100%; height:auto}
  •                 works for everything but caption image, check code snippets from 7.02 and paste in addition selectors
    •     responsive videos
      •         can’t simply use css for embeds
      •         wordpress gives the embed code, just paste in url to video
      •         requires fitVids.js library, must download and place in js folder
      •         then copy snippet from 7.03 into functions.php page
        •             once placed, must place videos is “video” class.
        •                 to make this easier, copy video class function from snippet 7.03 and all new videos will be wrapped in video divs.

Working With Sidebars

Leave sidebar a fixed width until sidebar width approaches width of main content, at which point float sidebar below content or remove sidebar completely

I think sidebars should be reduced to max 30% at first breakpoint (720px), then moved below at 2nd breakpoint.

 

Footer

Footer is greatly used to add further info about site and links to relevant content

Always add return to top link

just target one of the id’s towards the top of the page, <a href=”#content”>Click here to return to top</a>

 

Featured Content Sliders

  •     Use plugins to handle most of the issues about making responsive sliders.
    •         Flexslider is a great responsive slider
      •             grab files for Flexslider, then place Flexslider function into functions.php, use snippet from 10.01
      •                 if wanting to customize flexslider, add additions to javascript inside function
  •     Try to find other plugins that I can use for a responsive featured content slider

 

Mosonry Web Design

masonry is a jquery plugin that allows content to dynamically reogranize on page

visit masonry.desandro.com or google masonry jquery

Installation

download masonry.js

add to js folder for website

enqueue into site by adding script from code snippet 11.02 to functions.php

if want animations, add isAnimated: true  (look for other additions at masonry website)

to add masonry effect to pages, might have to adjust page design to allow for effect

  1. will often want to keep older style for archive pages and error pages, so might want to watch how masonry is applied to content
  2. might have to remove sidebar
  3. must keep pagination on bottom
  4. change index page index to masonry-index to bring in masonry script
  5. move pagination outside of index section to keep at bottom
  6. apply styling to contain elements to allow for masonry

the way masonry works, we tell masonry what content to work with and the plugin applies the necessary coding.