Using the Foundation Framework for Responsive Web Design

A development framework can assist tremendously when upgrading to a responsive website. One of the most robust responsive web frameworks is Zurb Foundation. This post dives into using Foundation when converting a non-responsive website into a responsive website. At the time of writing the latest version of Foundation was 6.3 according to the Foundation Documentation.

Sample Website Layout

Here is a sample website layout with a logo, navigation, a featured section, a two column section and a footer. As seen in the code this layout was created with CSS floats.

Sample Website HTML

<body>

  <header>
    <div id="logo"></div>
    <nav>
      <ul> ... </ul>
    </nav>
  </header>

  <main id="featured"></main>

  <section id="posts">
    <article></article>
    <article></article>
  </section>

  <footer></footer>
</body>

Sample Website CSS

body {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#logo {
  float: left;
  width: 25%;
  height: 24px;
}

nav {
  float: left;
  width: 75%;
  text-align: right;
}

main,
#posts {
  width: 100%;
  float: left;
}

#posts article {
  float: left;
  width: 45%;
}

#posts article:first-child { margin-right: 10%; }

footer { clear: left; }

header, main, section { margin-bottom: 40px; }

Preview of Sample Website

This layout is not terrible on a mobile device but there are a few issues to address:

  • The menu does not fit
  • Content becomes too tight in the two column section
  • The logo becomes too small

Ideally we would change the layout using media queries to create a mobile friendly layout for smaller screens. However, the Foundation Framework simplifies this process. Let’s upgrade the sample website using Foundation.

Updated HTML using Foundation

<body>
  <header class="row collapse">
    <div id="logo" class="columns small-12 medium-3"></div>
    <nav class="columns small-12 medium-6 menu-centered">
      <ul class="menu align-right"> ... </ul>
    </nav>
  </header>

  <main id="featured" class="row"></main>

  <section id="posts" class="row">
    <article class="columns small-12 medium-5"></article>
    <article class="columns small-12 medium-5"></article>
  </section>

  <footer class="row">
    <span class="hide-for-large">Download our App!</span>
  </footer>

</body>

Simplified CSS using Foundation

body {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

#logo {
  float: left;
  width: 25%;
  height: 24px;
}

nav {
  float: left;
  width: 75%;
  text-align: right;
}

@media screen and (min-width: 640px) {
  .menu-centered {
    text-align: right;
  }
}

#posts {
  width: 100%;
  float: left;
}

#posts article {
  float: left;
  width: 45%;
}

#posts article:first-child { margin-right: 10%; }

footer { clear: left; }

header, main, section article { margin-bottom: 40px; }

Preview of Updated Website

There are a few Foundation items I would like to point out here:

  • The Grid
  • Visibility Classes
  • Helper Classes
  • Overriding Foundation Styles

The Grid

One of the most basic features of Foundation Framework is the layout grid. I like to visualize the grid as a table with columns and rows. Elements within the page are fit within this grid layout. Notice that many of the elements were given a class of .row. Foundation stacks each row vertically and assumes a 100% width of their parent element. Child elements of the rows are given a class of .columns and an optional column width such as small-#. Our header element is being treated as a row that is split into, by default, 12 columns.

The #logo is given a class of .small-12 and a class of .medium-3. This is our way of telling the element to span all 12 columns on small screen sizes and only 3 columns on screen sizes medium or larger. Foundation is a mobile first framework. This means that any declarations will be applied “up” in screen size until told otherwise. The .small styles will apply at all screen sizes unless specifically overridden.

Two other items to note about the Grid relate to our <header class="row collapse"> element. On medium-sized screens and above we are giving the <nav class="columns medium-6 ..."> half of the row width (6 of 12). Even though there are 9 columns left in this row Foundation floats this column to the right since it is the last column in the row. Also, notice the class of .collapse on the row. By default Foundation will add padding to each column. The class of .collapse removes this padding which keeps our navigation links flush with the right side of our layout.

Visibility Classes

Another useful Foundation feature is is called visibility classes. This is a simple way to show and hide elements at different screen sizes.

The updated example added a link in the footer to download our mobile app. For the sake of example we only want to show this content to users on a smaller screen, most likely a mobile device. By simply adding the class of .hide-for-large we are telling Foundation to hide this element at screen sizes large and above. Note that we can also use a class to .show-for-small-only for a similar result. Foundation also provides useful classes to show-for-landscape or show-for-portrait.

Helper Classes

Another Foundation feature to point out is a helper class. If we would like to align text of a specific element we can add a class such as .text-justify. Also, we can change the alignment based on screen size. Take this element for instance: <p class="text-left medium-text-justify"> ... </p>. Text will be left-aligned on smaller screens but justified for medium sizes and above.

Overriding Foundation Styles

Most of these Foundation classes provide the exact styles you are looking for. However, from time to time you may want to customize the classes a bit further. Each class is easily customizable. In our example we converted our navigation ul into a Foundation menu. The parent nav element has a class of .menu-centered to center the menu per Foundation Menu documentation. This is exactly what we want on smaller screens. For large screens we would like to keep the menu right aligned. Our example added a media query to override the Foundation styles.

@media screen and (min-width: 640px) {
  .menu-centered {
    text-align: right;
  }
}

Foundation is a great tool to take advantage of when upgrading a site using Responsive Web Design. Check them out at http://foundation.zurb.com/.

Thanks for reading this introduction to Foundation. I invite any questions or comments through Email or Twitter.

4 Reasons Chrome DevTools are great for Responsive Web Design

Last week I introduced the basics of Getting Started with Responsive Web Design. That post introduced 4 practical starting points when upgrading a website to become more mobile friendly. This post dives deeper into the debugging process.

Any web designer spends a lot of time coding in a text editor and debugging in a web browser. I prefer using Google Chrome to debug my web applications, primarily because of DevTools. Instead of constantly jumping back and forth between the editor and the browser to optimize and test code, I prefer debugging with DevTools directly inside of Google Chrome. The DevTools save even more time for testing your code on mobile devices. Instead of constantly tweaking, publishing, and viewing these changes on a mobile device you can debug on a mobile device right inside of Chrome.

Open the Chrome DevTools to get started:

  • Keyboard Shortcut: Command + Option + I
  • Clicking View – Developer – Developer Tools
  • Right click on any part of the page you want to customize and select Inspect

Four reasons Chrome DevTools are great for responsive web design

  1. Great general debugging tools for any website.
  2. Emulate real devices with Device Mode.
  3. Responsive Toolbar with active Media Queries.
  4. Remote debugging for real devices.

1. The DevTools are great for debugging any website

The Google Chrome DevTools are great for general debug. You can test them out on any website. This screencast shows a few quick tips for getting started.

The screencast shows how to perform basic DevTools functions:

  • Quickly select any DOM element on the page to view the HTML and related styles.
  • Modify CSS declarations and immediately see the changes being made on the website.
  • Resize the Inspector window to see the viewport size. This is great for finding the exact page width a layout breaks down and quickly add a new media query.
  • Use the color picker to select colors from your existing theme.
  • Long press on the Refresh button to quickly clear cache when debugging. Note that this only works when you have the DevTools open

That was a brief introduction in getting starting with the Chrome DevTools. As you can see the ability to live edit DOM elements and styles makes debugging in the browser attractive.

2. Emulate real devices with Device Mode

Turning on device mode in DevTools allows you to preview your design on a variety of popular mobile devices. Chrome mimics the viewport size, screen resolution, touch events and user agent to match that of your selected device. The following screencast covers some of the best features available in Device Mode.

As seen in the video Device Mode does a good job mimicking a real mobile device:

  • You can change the type of mobile device.
  • You can show or hide the device frame. I like to debug without the device frame and take screenshots with the device frame.
  • You can emulate toolbars that limit the viewport such as the on-screen keyboard when a user selects a form input.
  • The “device” geolocation can be overridden as if the mobile device was actually… mobile. This feature is a must have when working on any geolocation-enabled feature for your website.
  • Another great sensor to customize while in Device Mode is network throttling. This forces the browser network connection to mimic that of a typical cellular data network. How quickly does your web app respond under normal network conditions?

3. Responsive Toolbar with active Media Queries

The first option when changing your device type is the catch-all “Responsive” Mode. This mode comes with an extra responsive toolbar to quickly change your viewport size to popular sizes.

Even more helpful than viewing popular breakpoints is the option to show existing media queries defined in your styles. DevTools detects media queries and displays a custom toolbar with any existing breakpoints you have defined. To view the exact media query definitions in your source code, right click on the Media Queries toolbar and select Reveal in Source Code. All of these features are shown in the following screencast:

4. Remote Debugging for real devices

At some point when working on a mobile friendly design we should test on real mobile devices. Chrome Device Inspector allows access to the full suite of DevTools while inspecting a website running on a real device. There are two ways to access the Device Inspector:

  • Navigate to chrome://inspect/#devices.
  • From the three dot menu in DevTools – More Tools – Remote Devices

Remote debugging requires that a real android device with USB Debugging enabled is plugged in to the computer.

One nice feature of Remote Debugging is screencast mode. The mobile device screen is emulated inside of Chrome on your computer. Check out this video to see Remote Debugging in action.

Chrome DevTools makes debugging your responsive web design a cinch. I invite any questions or comments through Email or Twitter. Below are a few additional resources that I find useful:

Getting Started with Responsive Web Design

An increasing number of people are using a mobile phone to access the web. A lot of websites were built on the assumption that most visitors used a computer and unfortunately do not serve mobile visitors well. This leads to less impact, less conversions, and less attention.

TL;DR jump to the full screencast video.

One way to better serve a mobile audience is to upgrade your website using Responsive Web Design. This post will cover the basics of making a website more mobile friendly with Responsive Web Design.

Before diving in it is best to keep a few things in mind:

  • Most mobile devices have smaller screen sizes. Obviously.
  • Most mobile users are comfortable scrolling vertically. It is okay to have content initially below the visible screen.
  • Mobile users should not have to zoom & pan to read text on websites. Scrolling vertically is more expected.
  • Most content should be accessible to all visitors, regardless of their device. Hiding content for mobile devices is not ideal.

How to upgrade an existing site using Responsive Web Design

I would like to cover four practical steps to get started with Responsive Web Design:

  1. Use a viewport meta tag to control content width.
  2. Eliminate fixed width elements.
  3. Use media queries to adjust styles based on screen size.
  4. Use Flexbox to align items.

Using a viewport meta tag to control content width

This is what a website looks like on a mobile device without the viewport set:

As you can see the mobile browser attempts to fit the existing design into the smaller window. This often makes text difficult to read without zooming. By declaring a meta viewport tag we inform the browser our code is optimized for any screen size.

Here is a sample viewport declaration:

<meta name="viewport" content="width=device-width, initial-scale=1">

This is what the same website looks like on a mobile device with the viewport set:

The text size is more reasonable but the user has to pan around to view all content due to fixed width elements. We have more work to do.

Eliminate fixed width elements

Converting from a static layout to a fluid layout can be accomplished by converting fixed width elements into fluid elements. In most cases an element with a fixed width can be converted from #elem {width: 1000px;} into a more flexible #elem {width: 100%; max-width: 1000px;}. Take the example layout with static widths:

Sample HTML

<div class="container">
  <header>
    <h1>Site Tagline</h1>
  </header>

  <section>
    <div>
      <h4> ... </h4>
      <p> ... </p>
    </div>
    ...
  </section>

  <aside>
    <h4> ... </h4>
    <p> ... </p>
    <p> ... </p>
  </aside>

  <footer>
    <span> ... </span>
  </footer>
</div>

Sample CSS

.container {
  width: 1000px;
}

section {
  width: 600px;
  margin-right: 40px;
}

aside { width: 360px; }

Here is a video of the fixed width layout at various screen sizes:

As seen in the video this layout does not work well at screen sizes under 1000px. Converting exact widths into percentage widths makes this layout more responsive.

Improved CSS using flexible widths

.container {
  width: 100%;
  max-width: 1000px;
}

section {
  width: 60%;
  margin-right: 4%;
}

aside { width: 36%; }

The layout fits much nicer on screen sizes under 1000px thanks to the more fluid grid:

Use media queries to adjust styles based on screen size

A flexible layout is not enough to fully deliver a good mobile experience. The layout shown in the previous video technically fits on smaller screens but cramps existing content. CSS Media Queries allow us to reposition content based on specific breakpoints. Our sample layout begins getting cramped around a screen size of 600px. The following declaration changes the layout for screen sizes under 600px.

CSS with a Media Query

@media screen and (max-width: 600px) {
  section,
  aside {
    width: 100%;
    margin: 0;
  }
}

This video shows a more mobile friendly layout thanks to Media Queries:

Use Flexbox to align items

After implementing the first three steps there are likely individual styles that need improved to complete a responsive upgrade. A common issue is with the spacing of items. In our example the existing div items were perfectly spaced for a 1000px layout.

Sample HTML

<section>
  <div>
    <h4>Section Header</h4>
    <p> ... </p>
  </div>
  ...
</section>

Sample CSS for equal padding between all div elements

section {
  margin-bottom: 40px;
}
section div {
  width: 240px;
  margin-top: 40px;
  margin-left: 40px;
}

Spacing of the div elements is perfect at full width but becomes inconsistent on smaller screens. The flexbox layout makes it easy to evenly space items within a container regardless of the container size. Here is the same example using flexbox.

Upgraded CSS using Flexbox

section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
section div {
  width: 40%;
  margin-left: 4%;
  margin-right: 4%;
}

Flexbox handles spacing of these items no matter the screen size. Much better! A few things to notice:

  • Most of the styles are set on the parent element in this example.
  • The flex-direction and flex-wrap commands can be combined into one shorthand flex-flow: row wrap; command.
  • I also changed the width of the div elements to a percentage of their parent. Flexbox can handle any width on the child elements.

The entire tutorial can be viewed in this screencast:

These were four introductory steps to take when starting a website upgrade using Responsive Web Design. I invite any questions or comments through Email or Twitter. Below are a few additional resources that I have found helpful:

Round corners of a squared image using Pixelmator

Round Corners with Pixelmator on YouTube or Vimeo.

I often find myself needing to round corners of an app icon for promotional graphics. I put together a quick screen cast tutorial that does just that.  This demonstration uses Pixelmator for Mac. Here are the steps as shown in the video:

  • Edit – Select All
  • Edit – Refine Selection
  • Change the “Smooth” value as desired
  • Edit – Invert Selection
  • Hit the Delete key to clear

Unable to edit input element Phonegap iOS

Are you having trouble editing the value of an input element in your iOS Phonegap app? It may likely be the CSS rule used to prohibit users from selecting content by long pressing: -webkit-user-select: none; 

Apply the rule -webkit-user-select: text; to your input element to fix the issue.

cordova build failed after adding a new plugin

Nothing interrupts your productivity like a random Build Failed from the CLI. If your build is failing after you recently added a new plugin and especially if you are getting a CpResource error here is the solution for iOS and Xcode:

  • Open the Xcode project
  • Click on the App name in the sidebar.
  • Click the Build Phases tab.
  • Open the Copy Bundle Resources section.
  • Any missing resources will show up in red. You need to add them manually.

For instance, I recently added the cordova dialogs plugin to my iOS project. The build failed with the CpResource error and CDVNotification.bundle was the missing resource. I was able to locate the bundle in the root project folder – plugins – org.apache.cordova.dialogs – src – ios.

Problems with the Phonegap/Cordova geolocation plugin on iOS 8

Are you having issues with your location aware Phonegap app on iOS 8? I did too. My first attempt to deploy an existing app through Xcode on an iOS 8 device did not work. The application would not recognize my iPhone location.

Here is the quick solution:

  1. In Xcode click on your app name in the sidebar
  2. Click the Build Phases tab
  3. Expand the Compile Sources section
  4. Click the sign and add CDVLocation.m to the list of sources

That should do the trick. If not, try reinstalling the plugin:

  1. In Terminal navigate to the project folder
  2. cordova plugin rm org.apache.cordova.geolocation
  3. cordova plugin add org.apache.cordova.geolocation
  4. cordova build

If you still have issues after this you need to create a new cordova project, add all of the plugins, copy all resources (www folder, splash screens, and icons) and rebuild.