The New Playground for the Web: Foundation

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

These days, the use of tablets and smart phones has become so prevalent that it’s hard to believe some people still used a dial-up modem 10 years ago (*shudders with horror). But despite all of the awesomeness that is now literally at our fingertips, the increasing use of smart devices has placed a div in the road to Drupal Web Design and development greatness: designing and developing websites and applications for more than just a PC.

The current Drupal web development practice is to create a cross-browser friendly website for a mobile device, tablet and PC, leaving you with three versions of one site. However, this practice could soon be eliminated with a little rising star known as responsive Drupal Web Design.

Responsive Drupal Web Design is website design that responds to the device constraints of the person viewing it (ie, tablet, smartphone, etc). It’s a hot topic these days, and for good reason: alternative web devices already outsell PCs 4-1, and are expected to make up the majority of web traffic within the next three years.

Responsive Drupal Web Design contributes to the notion that the web will eventually culminate into a single Web that “doesn’t care what device you’re on, how you’re viewing content or how you’re interacting with it.” And some pretty sweet responsive development options are beginning to pop up. Developers and QAs take note: No longer will you have to stay up late at night sobbing into your pillow and lamenting about the lack of an adequate cross browser testing tool that spans multiple devices (because I totally don’t do that at all). A new open source framework has all of the yummy goodness baked right in for you: Foundation.

Created by ZURB, an interaction design and strategy company in Campbell, CA, Foundation is a prototyping and building library that utilizes a layout framework that renders all websites equal on mobile devices, small screens and desktops. It will help you rapidly prototype for any kind of device, and then take that prototype and extend it into a production-ready site. According to the Foundation site, the layout framework is “a twelve column, semi-liquid, mobile-scaling grid of awesomeness that you’re gonna love. It even supports arbitrary nesting.” Plus, global styles have been tested for typography, links, lists, tables and more.

So how would this work with a content management system? You’ll need a WordPress or Drupal starter theme that supports Foundation and HTML5 Boilerplate functionality. You’ll also need to make sure that the functionality for your site, Foundation, and HTML5 Boilerplate are supported within your page templates. These items will enhance the use of your cms.

While there has yet to be a Foundation starter theme developed for Drupal, I’ve found a few frameworks for WordPress that look pretty viable:

Reverie: A versatile HTML5 WordPress framework based on Foundation. It follows the HTML5 Boilerplate standard and is hNews microformat ready.

Foundation for WordPress: A blank starter theme with the exceptional capabilities of ZURB’s Foundation Framework and HTML5 Boilerplate.

Roots: Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint Drupal CSS/960 Grid System/1140 Grid and Starkers that will help you rapidly create brochure sites and blogs.

Now, before you explode into your full blown happy dance, let’s take a moment to explore Foundation’s features.

The Grid
The grid lets you put together page layouts for all kinds of devices without having to build more than one site. The grid renders the same experience on each device with the same mark up. It’s made up of three key elements: containers, rows, and columns. Containers add left and right padding to the page so your content doesn’t run into the edge as a window is scaled down. Rows contain columns, and they have an arbitrary max-width that prevents your layout from stretching all the way out on very large displays (but that constraint is removable if you’re going for a more fluid layout). Columns hold your content, and can fit up to a total of 12 columns in a row. You can also create center columns and offsets, and also nest columns.

Buttons & Forms
Foundation buttons are broken into two categories: Simple and Nice. Simple buttons are your basic buttons, with features that include size, color and style, as well as square, slightly rounded, and completely rounded styles. Nice buttons use the same features, but include a background image.

Foundation forms are broken into three categories: Basic, Nice and Custom. All three appear to be pretty flexible and customizable, and all require app.js to use. The Basic form utilizes all of your basic form features with different sizes of rectangular input fields. Inline labels, error states and paragraphs within field sets are included. Nice forms offer the same features as Basic, but utilize rounded rectangular fields. Custom forms are also easy to create. Simply add a ‘custom’ class to your form and the js will go through the form and replace the elements with custom markup. Easy peasy.

Layout & UI
Users on mobile devices have different expectations when it comes to content on a site. They’re more willing to scroll down the page, but less likely to wait for a boatload of titles and hoopla to load in order to read anything. To help with this, Foundation features mobile visibility classes so you can quickly create different layouts for different types of devices. They also allow you to hide/show certain elements on desktops, tablets and mobile devices so you can simplify your layout and allow content to load more quickly.

Foundation UI elements include alerts, tabs, pagination and tables. Alerts are customizable, and can help you convey success messages, warnings, regular site info and failures. Tabs come in three flavors: Simple, Contained and Nice. Adding a ‘mobile’ class to your tab group will change the tabs to full width nav bars.

A few more Foundation features to click your heels over:

Orbit: Hero piece, anyone? Orbit is a lightweight jQuery slider for images and content. With Orbit you can easily add HTML captions, highlight Drupal CSS3 font face text, use image thumbnails for navigation, experience seamless loading states, and get rid of overflow. It’s also cross-browser compatible!

Reveal: Reveal is an easy to implement, lightweight, customizable modal plugin. Modal windows are basically windows that float above a page that allow developers to make critical information stand out. They help when a small piece of information needs to be conveyed and you don’t want the page to refresh 17 bazillion times. It’s also cross-browser compatible!

Rails: Add Foundation to your gemfile and use it in a Rails 3.1+ application. It’s also hosted on Git.

QA: Foundation is cross-browser compatible! Currently, it supports the following browsers:
FF 3.6 and 6
IE 7, 8, 9
Safari 5
Chrome 14
Mobile Webkit (iOS 4)
Android Browser
Chrome for Android

So what do you think about the idea of responsive Drupal Web Design? It seems like a pretty sensible alternative to an expanding device market, with tons of coolness potential. And who knows? Maybe 10 years from now I’ll finally get that flying car that Back to the Future promised me (with an updated interface, of course).

Posted on November 16, 2011 in Design, drupalology, RFP ROBOT: Website Request for Proposal Template, RFP ROBOT: Website Request for Quote Builder, RFP ROBOT: Website Request for Quote Creator, RFP ROBOT: Website Request for Quote Generator, RFP ROBOT: Website Specification Builder, Web Site Request for Quote Form to PDF - Get the Best Website Bids - Free Online, Web Site Request for Quote Template - Website RFP Example - Professional, Web Site RFP Template - Get Accurate Website Bids - Free Online, Web Site Statement of Work Form to PDF - Website RFP Example - Learn From Experts, Web Site Statement of Work Software - Website RFP Sample - Learn From Experts, Website Bid Request Builder - Improve Your Website RFP - Learn From Experts, Website Project Inquiry, Website Project Specification Producer - Improve Your Website RFP - Free Online, Website Proposal Request Maker - Website RFP Example - Web-Based, Website Request for Proposal Form to PDF - Website RFP Sample - Professional, Website Request for Quote Generator - Write a better Website RFP - Professional, Website Request for Quote Software - Improve Your Website RFP - Web-Based, Website Request for Quote Template - Write a better Website RFP - Web-Based, Website RFP Form to PDF - Improve Your Website RFP - Professional, Website SOW Builder - Get Accurate Website Bids - Web-Based, Website SOW Software - Improve Your Website RFP - Professional, Website Statement of Work Creator - Get the Best Website Bids - Professional, Website Statement of Work Software - Get Accurate Website Bids - Learn From Experts, Website Statement of Work Software - Website RFP Example - Web-Based, West Virginia Drupal Development, Wichita Drupal Development

Share the Story

Back to Top