Tag Archives: frameworks

Using Zurb Foundation’s grid for a responsive redesign, with three tweaks

This is the first in a series of articles about the Cook Smarts redesign.  Try their meal plan service to experience the redesign for yourself.

The key to responsive design is the grid. Arranging your content in a grid makes it easier to determine how it responds to various screen sizes.

The concept is pretty simple, but execution can get dicey.

It’s perfectly possible to roll your responsive grid, and everyone should learn how. However, developers have taken the time to create and share grid systems that work for most web sites.

Zurb Foundation is one of these pre-made grid systems that can save a lot of development time on responsive web projects. The Washington Post recently used it to revamp its online video site, Post TV.

We’ll step through Foundation’s grid, then apply it to the Cook Smarts responsive redesign.

Cook Smarts presents a week’s worth of meals on one page, with pictures and titles. Alongside the meals are notes for the week, such as what ingredients can be stretched across different recipes and what to sub for harder-to-find ingredients.

The previous, non-responsive site used a fixed grid.  It was great on desktop, but  not on a phone:

The Cook Smarts' web site on an iPhone, without responsive design

The text isn’t readable when it first comes up, so one has to scroll all around the page to get any use out of it. We’ll fix that using Zurb Foundation.

Meal plan on Cook Smarts, with responsive design

Above is the same page on a phone, once Foundation’s basic grid is applied. We had to do some legwork here to tell Foundation how our content should behave on small vs. large screens. For an overview of the basics, check out Foundation in 5 minutes.

In addition, we applied some tweaks that fall outside of Foundation’s default behavior.

Tweak 1: Distinguishable content boxes

The screenshot above has a single background color, making it difficult to distinguish different elements of the page. Google addresses this same issue by using white boxes with a gray background:

Google's mobile search screen, with a grey background and white boxes

Here’s how a similar effect looks on Cook Smarts:

Cook Smarts meal plan, with white content boxes added to the responsive design

The meals are easier to distinguish because they called out in white content boxes.

Here’s how the effect looks on desktop:

Cook Smarts meal plan on a desktop, with responsive design

We accomplished the gray/white effect by introducing our own class called cs-box.  It is simply a white box with a bit of shadow.  Because it is a block element (as div’s are by default), it stretches to the full width of its container. Its container is a Foundation column, so it behaves responsively without additional effort.

To recap, here’s how we coded the responsive grid above.

To contain the meals, we created a column that is 8/12th (2/3rd) the width of the page.

<div class="row">
<div class="large-8 columns">

Then we looped through each meal in Rails, outputting the following code for each. Notice that our class cs-box contains each meal, and each meal is presented in two columns of equal width – the picture and the meal description.

<div class="cs-box">
<div class=”large-6 columns meal-photo-wk”>
Image of meal
</div>
<div class=”large-6 columns day-info”>
Meal title and sub-title
</div>
</div>

Finally, we’ll put  some general information on the right side.  We’ll close out the 2/3rd-width column, and start a 1/3rd-width column.  Finally, we’ll close out the row altogether.

</div>
<div class=”large-4 columns>
<div class="cs-box">
<!-- Smarts from the team -->
</div>

<div class=”cs-box”>
<!-- Ideas for leftovers -->
</div>
</div>
</div>

Tweak 2: Take care of awkward screen sizes

We’re looking OK on a large desktop and a small phone, but the middle ground is looking a bit awkward. Maybe this is a smaller tablet or someone who prefers to keep a smaller browser window. In any case, we need to make sure Cook Smarts looks good on all screen sizes.

Here is a snapshot of a medium screen size:

Cook Smarts responsive meal plan looks a bit awkward on mid-size screens

Yikes! The image is huge! Foundation puts everything into one column for any screen width below 767px, but this just doesn’t look great with our content.

Ethan Marcotte said in a presentation that the trick to applying responsive design is deferring to your content. Well, our content is not loving our new grid at a middle screen size.

To fix this, we’ll put in some custom CSS to make the images look good on medium screen sizes.

@media only screen and (min-width: 30em) {
.meal-photo-wk, .day-info {
position: relative !important;
width: 50% !important;
}
}

This ensures that our image column remains at 50% width above 30em, a number we reached by experimentation (resizing the browser window to determine the range where things looked bad).

Now, our middle range looks much better:

A better mid-size view of a Cook Smarts meal plan

Tweak 3: Move stuff around on desktop vs. mobile

Back to working around our content.  We’ve used the Foundation grid on individual recipe pages, as well, and here’s how those are looking on desktop:

Cook Smarts responsive recipe

Here’s the problem.  The ingredients should appear before the Prep/Make/Review tabs when the screen is sized down. By default, Foundation will drop it below the tabs when the page becomes one column on a small screen.

Here’s where we can use Foundation’s source ordering, which can initially be confusing.

In the code, we will place ingredients first, which will make it appear on top of Prep/Make/Review on mobile. To make it appear after Prep/Make/Review on desktop, we will use push/pull as shown below.

<div class=”row”>
<div class=”large-4 columns push-8“>
<!– Ingredients –>
</div>
<div class=”large-8 columns pull-4“>
<!– Prep/Make/Review –>
</div>
</div>

The ingredients column is 4/12 columns wide, and appears first in the code. On a large screen, it should be pushed to the right side, instead of appearing on the left as it normally would.

The Prep/Make/Review column is 8/12 columns wide, appears second in the code. On a large screen, it should be pulled to the left, rather than appearing on the right as it normally would.

Responsive recipe on Cook Smarts, in mobile view

(Note: when source ordering doesn’t cut it, you can try AppendAround, by the web shop Filament Group. It can swap content pretty much anywhere when screen size changes.)

In closing

A common critique of frameworks like Foundation is that customization is hard. So far with the Cook Smarts redesign, we’ve found it easy, and the approaches above are complement the  solid base that the framework provides.

Next up, we’ll cover responsive images and video. Stay tuned! Subscribe by Twitter, RSS, or e-mail.

Responsive navigation with Zurb Foundation, in 5 minutes

Correction: rather than interchange, I used Foundation’s visibility classes to show a different logo on smaller screens.  Interchange is a superior method for responsive images because it saves load time on mobile devices.

Zurb Foundation makes it easier to implement responsive, mobile-friendly navigation.  We’ll apply responsive navigation to an existing web site in just 5 minutes.

Many thanks to Cooksmarts.com, the web site that taught me how to cook, for allowing me to feature it in these videos.

This is the final screencast in our Foundation series.

  1. Making a page responsive
  2. Responsive sections/tabs
  3. Responsive navigation

Follow me on Twitter @coreyITguy for more on modern web design.

Making tabs responsive in 5 minutes, with Zurb Foundation

To view in HD, click the gears icon at the bottom of the video.

In our last Zurb Foundation screencast, we made an existing page on Cooksmarts.com responsive, in just 5 minutes.

But we’re not done!

Now, we’ll tackle tabs. Even with our new responsive layout, tabs on the page do not respond well to small screens. We’ll replace them Foundation‘s sections, which can auto-magically appear as tabs on a large screen and an accordion on a small screen.

Many thanks to Cooksmarts.com, the web site that taught me how to cook, for allowing me to feature it in these videos.

This is the second of three screencasts in our Foundation series.

  1. Making a page responsive
  2. Responsive sections/tabs
  3. Responsive navigation

Making a page responsive in 5 minutes, with Zurb Foundation

To illustrate how much time is saved by a front-end framework like Zurb Foundation, I’d like to share a 5 minute screencast where I apply it to one of my favorite web sites.

Cooksmarts is a fantastic web site that has taught me how to cook. Its recipes are presented very well, but are not optimized for phone-size screens.

Many thanks to Jess Dang from Cooksmarts for allowing me to use the site in this demonstration. If you’re looking to cook at home more, their meal plans are fantastic.

This is the first of three screencasts in our Foundation series.

  1. Making a page responsive
  2. Responsive sections/tabs
  3. Responsive navigation

I recently wrote about the decision to use a front-end framework vs. writing CSS from scratch, then compared a couple of frameworks.

Front-end framework speed dating

In my last post, I talked about the emergence of front-end frameworks. Creating a high quality responsive web site does not require writing all of the CSS from scratch, though doing so is a viable option. Frameworks start you out with a cross-browser, standards-compliant CSS and JavaScript base. When properly used, frameworks save time and result in modern, maintainable web sites.

The Grid

Every front-end framework described here is based on the responsive grid. Your content is arranged into rows and columns, which adjust themselves based on screen size.

For instance, if you have three columns of information on a large screen, they may become one column on a small screen.

The responsive grid makes your site look good on desktop computers, tablets, and phones.

Here is an example of the grid in action, thanks to our friends in Sweden:

A responsive web site for a municipality in Sweden, care of Per Axbom. Try it yourself!
A responsive web site for a municipality in Sweden, care of Per Axbom. Try it yourself!

Notice that the site’s columns shrink in the transition from desktop to tablet, and become a single column on a phone.

More and more, people expect content to look good on all devices. Sometimes, a separate “mobile” web site or app is a good approach. However, a responsive web site is often the clearest path, and frameworks make it easier to implement.

Continue reading Front-end framework speed dating

Front-end framework or CSS from scratch?

Front-end frameworks are rising in popularity.  From Twitter Bootstrap to Zurb Foundation, these tools can save a tremendous amount of time by doing a lot of CSS heavy-lifting for a web site.

I will be comparing a few frameworks for use in my first web application.  But first, I should tell you why I am even considering one.

What’s a front-end framework?

The unsophisticated definition: a framework provides a basic user interface for your web site, and you build from there.  It saves you time.

More specifically, a framework:

  • Makes responsive design much easier.  Your content will look good on any device.
  • Provides a familiar, intuitive interface for your users.  Links are blue.  Buttons look clickable.  These subtle design decisions, already made for you, make your site easier to learn.
  • Works cross-browser.  The best frameworks are well-tested on all of the major browsers, so you won’t have to do as much debugging.

Should I use a framework?

There are pros and cons.  Chris Coyier of CSS-Tricks summarizes them in a post from 2007 that is still relevant.

For sites that need to be heavily customized or introduce a new kind of interaction that isn’t standard, it may take longer to customize a framework than to build from scratch.

But, as Chris wrote about one major framework, “I think a web app startup could do a lot worse than starting with this to get up and running quickly.”  That sums it up for me.  I am a one-man band on this project, so time is of the essence.  I’ll be using a front-end framework.

Frameworks don’t excuse ignorance

Someone could use a front-end framework to build a site without knowing any CSS.  That’s fine, but the site will look like thousands of others.

In reality, anyone doing front-end development should know how to write CSS from scratch, without the cushion of a framework.

So, in addition to using a framework for my web app, I am going to read a real CSS book.  Stay tuned for updates on that.

It’s time for speed dating

The past few years have seen dozens of new front-end frameworks.  To find the right match for me, I need to spend a little bit of time with each of them.  You’ll come along for the ride in an upcoming posting.  Keep in mind, though – everyone’s framework soulmate may be different.