Mobile & Global with HTML5, MVC & Windows Azure, Step 1: Design

In this series of posts we’re progressively demonstrating a mobile and global sample, Responsive Tours. The source code for all 7 steps is on CodePlex at http://responsivetours.codeplex.com.
Here in Step 1 of 7 we’re going to focus on the design of the web site by a designer.

Starting Point: Responsive Web Design Sample

What designers produce for web developers can vary: if you’re fortunate, you might get assets in the form of HTML and CSS you can directly work with; other times you may only receive wireframes and graphic assets and have to craft your own markup and stylesheets. As web design tools improve in the wake of the HTML5 revolution, it’s increasingly likely your web designer may be able to just hand you HTML5, CSS3, and JavaScript. That’s the scenario we’re going to assume here, that a web developer is using sophisticated tools: Dreamweaver, part of the Adobe Create Suite 5.5.

Designers and developers also need to be in agreement on approach. In this scenario we’re assuming progressive designers and web developers who have agreed to use responsive web design. This will yield adaptive layout that works across desktop, tablet, and phone-size screens on modern browsers. This is accomplished through the use of a fluid grid layout system, CSS media queries to switch to the most appropriate layout, and media sizing.

The starting point we’ll use for this project is a sample from Adobe for an Adobe Dreamweaver tutorial that is already set up for responsive web design (preview it here). This is a front-end web site with HTML/CSS/JavaScript code but no back end. When viewed in Dreamweaver with the Multi-screen Preview viewer, it looks like this:

You can run the project by opening index.html in a browser. Note that as you resize the browser to desktop, tablet, and phone sizes the layout adjusts. As you run the sample, you’ll see that the sample has animation: there are 3 main pictures and marquees that periodically rotate.

Customizing the Content

This sample is a pretty good fit for our tour operator scenario—even the images fit! —but we do of course want to customize the content a bit even if this is just a demo. Let’s tackle the following content customizations:

• A logo for Responsive Tours
• Different links (Home and Walking Map in place of Who We Are and What We Do)
• Custom text for the 3 marquees (brown slides)
• A second HTML page, map.html, with a placeholder for an interactive map.

The designer can make most of these changes directly in Dreamweaver. There’s a nice Multiscreen Viewer facility for previewing the site in 3 screen sizes.

One area of content we are not changing in this step is the 3 promotion items on the bottom of the page. We want those to be dynamic content, so that will be left of the web developer in a future step.

With the above content changes, our site now looks like this:

At this point, we have a good start on the site design and the assets are already in the form of HTML5, CSS, and JavaScript plus media files. However, we only have the front end. In the next step, we’ll hand this off to a web developer who will add the necessary server side to the web project.

Summary

In Step 1 we created design assets from a responsive web design HTML5 template. Our site now has the following functionality:

• Embodies responsive web design and runs on desktops, tablets, and phones.
• Usesd HTML5 and open standards on the web client.

In the next step, we'll create a web project and import the design assets into it.

Next: Mobile & Global with HTML5, MVC, and Windows Azure, Step 2: Web Project