Interactive Writing & Design

Jquery Mobile Examples






Posted in Uncategorized | Leave a comment

Foundation Examples

Some solid examples of the Foundation project:

Megan McGowan’s Foundation site:


Nick Margherita’s:


Henry Kean:

HenryKean (mockups)

Brandon Frye:


Posted in Uncategorized | Leave a comment

Responsive Framework Rubric (UPDATED!)

Yes, it’s the rubric you’ve all been waiting for!

We’ll be using three responsive frameworks: Skeleton, Foundation, and jQuery Mobile. To get started, go to each of these websites, download each framework, and organize your folders so you’ve got three unique locations, one for each framework, that are easy to find.

For Skeleton, just pick a topic, existing website/business, or idea – I just want to see that you can effectively use this framework for layout, so lay out whatever you want. Obviously, the more complicated and varied your layout, the better. The example on the server is akin to what I’m looking for. I find that using images in lieu of text makes this project easier, but you REALLY want to resize your images to all be the same WxH first.

jQuery Mobile: I’d like everyone to pick a restaurant – local or far away, but a real restaurant – and make a website for them. Please note, you will use the same restaurant for both Skeleton and jQuery Mobile. If you choose an existing restaurant that already has an online menu, it’ll make your life easier. We will make NOT this jQuery Mobile-based version of the website web-app friendly.

For Foundation, a restaurant website is not robust enough to warrant the complexity of the framework. Instead of picking content for the Foundation framework, I’d instead like everyone to make three layout mockups for foundation: one large, one medium, and one small. You can make these in Photoshop, Illustrator, or in the analog world (pen, paper), but I’d like you to hand them in along with your coding. I am asking you to then code one page that displays these layouts at these sizes. The Foundation part of your project does not require content, but you can either use some dummy content, or just use colors, to indicate what the different sections are.

If you’d like some help getting started with Foundation, here are some helpful links:

Getting started with Foundation:

Tutorials for nearly every aspect of Foundation: (includes some tutorials for Foundation 4 – we’re using Foundation 5)

Examples of sites that use Foundation:


This project will be due on Monday, October 19th. It is worth 20% of your grade.

Posted in Uncategorized | Leave a comment

How to get started with jQuery Mobile

First of all, you’ll be making this website for the same restaurant as the one you did with skeleton, so you should re-use all of the elements (pictures, menu items,  etc.). You can also use the same color scheme and fonts, if you wish.

To get started, look through the available display options for content on the jquery mobile website. Listviews, for example, are practically custom-made for making a restaurant menu.

Once you have an idea of what you want to make, download the complete jQuery Mobile framework (“latest stable,” they call it on the website).

This framework comes with a LOT of files, only a few of which you need. Download our boilerplate from the IM server – already linked to jQuery, which you need – and rename the folder. You need to copy over and link to multiple files from the jQuery mobile download:

  • The ‘images’  folder from the download

There are other files that you may want to link to, such as jQuery mobile theme files, but the above files are required to get the framework to function. In addition to copying the files into your working folder, you need to link to each one in your index.html file. Be sure to link to the jQuery mobile JS file after your link to jQuery. Also, link to the JQM stylesheet before the link to your own stylesheet.

JQM works in a strange way – you put all of your content in one big index.html file, designating ‘pages’ in your code. When loaded in a browser, the first ‘page’ shows up, and the others only show when you link to them (by replacing the start page). So, you’ll need a nav to be able to move between them.

Once you’ve thought out the page structure of your website, code unique pages like so:

<div data-role=”page”>

<div data-role=”header”>header content </div>

<div data-role=”content”>main content here </div>

<div data-role=”footer”>footer content </div>

</div> <!— close page –>

Refer to this page to learn how to add particular forms of content. For instance, to add a nav bar, follow these instructions:

Once you’ve finished creating the layout and adding content, add three more things:

-A color scheme, via the ‘theme roller’ – I’ll show you how to do this in class on Wednesday.

-the ‘web app’ <meta> tags that make your page web-app capable – there is a file called ‘WebAppTemplate.html’ on the server that you can copy and paste from

Upload the project to a server, test it (on a phone, that’s how I’ll grade it), and send me a link.





Posted in Uncategorized | Leave a comment

Getting started with Foundation

The first step in completing the Foundation portion of your frameworks assignment is to do the mockups. Remember, Foundation works on three assumed screen sizes: small, medium, and large – and your assignment is to come up with a layout strategy that adjusts content to fit each size screen perfectly. Be sure to create layouts that require layout changes for each resolution. You are encouraged to make the ‘large’ version somewhat complicated, from a layout standpoint, and allow it to simplify as your browser gets to the smaller sizes.  Remember, you have to hand in your mockups, too, so try to make the code do what your mockups due. If you can’t get it to work, I’d prefer you hand in something that doesn’t exactly do what you intended, rather than going back and simplifying your mockups.

  • Firstly, download the Foundation framework from – click the big ‘download’ button, then on the following page, choose the ‘download everything’ button.
  • Relocate the downloaded folder to your preferred workspace (desktop, external HD), and rename it simply ‘foundation’
  • Drag the ‘foundation’ folder into Brackets. Open the index.html file and delete everything from the opening <body> tag to the scripts at the very bottom of the page (line 12 to line 158), and save your file.
  • Foundation is based on a row system – every bit of content you add to your page has to be inside a <div class=”row”>. You’ll have a lot of these rows. As a way of keeping things organized, I recommend two things: 1) use <div> tags for the rows, and other invisible element tags (header, article, section, etc.) for the interior sections, whenever possible, and 2) indent your code, so your ‘rows’ are all left-justified, and your interior content is indented.
  • Create a ‘row’ div, and break up the content inside using a base-12 grid system. Remember, you need to declare the number of columns each element will occupy at each of the three resolutions.

Here’s an example:

<div class=”row”>

<article class=”large-3 medium-6 small-12 columns”></article>
<article class=”large-3 medium-6 small-12 columns”></article>
<article class=”large-3 medium-6 small-12 columns”></article>
<article class=”large-3 medium-6 small-12 columns”></article>


The above code would create a row of content that would display as four articles across on a large screen. On a medium-sized screen, it’d show two articles side-by-side, and then stack another two articles side-by-side underneath it. On a small screen, each article would occupy the full width of the screen (12 columns).

  • The Foundation website’s ‘kitchen sink’ page has great examples of all of the cool things you can do.
  • It is possible to create more complex layouts using nested rows – see the ‘kitchen sink’ for an explanation of how.
  • Be sure to test your layouts and see that they work.
Posted in Uncategorized | Leave a comment

How to get started with Skeleton

Let’s review how to use each of these frameworks so you can make what you want with them.

1. Skeleton

  • The aim of this project is to make a website for a restaurant. I encourage you to select an existing restaurant that already has a website, as you’ll be able to ‘steal’ all of their content (images, menu, etc.). Although the primary aim of the assignment is to test your skills with frameworks, you still need to build a complete site for the restaurant – don’t expect to get away with only making a home page. You’ll need a menu page or pages as well, at a minimum. There is no set number of pages for the assignment, just a requirement that you cover all the required content for a restaurant site. Restaurant sites also need to indicate the location, open hours, ways to contact it (phone number, social media), and some images of the place and food. Think it out ahead of time. Then grab all the existing content you can from their existing online site.
  • Download the framework from, move the downloaded folder to where you’d like to work (external drive, desktop, whatever), and rename the folder. Then drag the folder into Brackets.
  • Skeleton’s download comes with content already in the HTML. In Brackets, open up the index.html file, and delete everything between the opening and closing <body> tags.
  • Skeleton uses a base-12 grid. In other words, you need to break your website concept into horizontal rows, and then determine  how many elements will be in each row, and how much relative horizontal space each will occupy. So, to create a header that spans the width of the browser on all screen sizes,  say:

<div class=”twelve columns”>Content goes here </div>

To declare two elements that share the horizontal row’s space evenly, split the 12 columns into a pair of six:

<div class=”six columns”>Left-side content goes here</div>

<div class=”six columns”>Right-side content goes here.</div>

  • You can nest rows within rows – it’s explained on the getskeleton home page – to  make a more complicated layout. I also encourage you to use the built-in styles of the framework, such as how it styles buttons and text.
  • While skeleton does a decent job of downsizing your content for mobile, you’ll almost certainly need to write a few media queries to get all the parts to do exactly what you want.
  • Remember that skeleton does not include the CSS to make images automatically downsize in accordance with their containers. Add this to your custom CSS file: img {max-width: 100%;)
  • Be sure to test your site in multiple browsers at multiple resolutions. If there are any browser inconsistencies, consider downloading normalize.css and linking your pages to it.
  • Upload your completed site to a server, and send me a link. Done! (only two more frameworks to go)
Posted in Uncategorized | Leave a comment

Skeleton Example

I’ve uploaded an example Skeleton project ot the IM server, the folder is called ‘skeletonExample.’ Take a look! I encourage you to play around with the framework – as a reminder, we’ll have an assignment using it. If you use images, make sure you resize all of your images to match each other, or your layout will look really odd.

Posted in Uncategorized | Leave a comment

Responsive Frameworks

In class, we’ll take a look at skeleton:

Here’s a great intro on how to use Skeleton:

We’ll also, time allowing, look at jQuery Mobile:

Here’s an overview of lots of responsive frameworks (but certainly not all of them!):–cms-23575

Finally, some links pertaining to em’s and rem’s:


Posted in Uncategorized | Leave a comment

Additional Mobile Tricks – iOS only

We’ll look over these in class.

Making a mobile website a web-app:

Apple URL Schemes:

Also, some mobile testing tools:

Posted in Uncategorized | Leave a comment

5 approaches to mobile

Here’s the blog post I mentioned in class, showing the 5 most common mobile nav approaches.

This is a good startpoint for thinking about your mobile nav project approach.

Posted in Uncategorized | Leave a comment