Create a web page prototype cross platform rapid Foundation frame

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

As Webpage design and development staff, we are faced with the following serious problem:

Every day, people used to type and amount of equipment on the Internet are on the rise.

As the interface design and development each kind of different devices is not possible.

If you create a custom designed for certain equipment, these devices are also likely to withdraw from the mainstream arena in the near future.

Really happy. Don't worry, everyone together to face and solve problems. In fact, the problem of different types of equipment and screen, long ago began to exist, but over the years we have been neglecting this wishful thinking, keep 960 pixel grid system.

Now, we need from the upstream design process change long-standing habits, such as trying to quickly create can be tested on different devices prototype, not just for desktop browser or notebook.

Foundation is an open source front frame, we can use it to quickly create a prototype page. Compared to other similar tools, mobile Foundation scheme better response; reference ideas and methods of Web design, Foundation for the content structure in different types of equipment in the presentation of the corresponding preset.

Next, we will be through a complete example to show how to use the prototype, Foundation quickly create cross platform. Walk!

Resources overview

First of all to download code package; decisive click on the blue button. The following documents and structure contains the code package:

1, Index.html - we will start from here to create the first page.

2, Static resource files Javascripts and stylesheets path - mainly, including jQuery and required style sheet.

3, Humans.txt and robots.txt inside the code is a good example, when you are free to slide.

4, The JS of things is not in the scope of this article, we continue to have a look in the stylesheets file path:

1, Global.css - based global style sheet, including the relative grid system, the conventional 12 column fixed width to quickly create a complex layout can be nested tools etc.. There are also other global font, layout style definitions.

2, Ui.css - used to conventional UI elements on the composition of the prototype style definitions.

3, Mobile.css - responsible for mobile devices, style, involving the response style definitions are right here.

Open the index.html file in your browser and respectively in the code editor. In the browser, we can see the page contains some basis for layout structure and UI elements to build a prototype.

Grid system

Next, we will from the grid system, rapid prototyping, moving the three aspects are examples to explain.

Grid system

Have a look first to simple grid system in global.css. If you are familiar with the 960 Grid system or the Blueprint CSS framework, then the grid structure on the Foundation should not be strange. The following is a typical structure generation:

The structure consists of three parts: the outer container container, row row and column columns container vessel. The outer container is only for pages left padding(padding).

For the container has a fixed maximum width value, prevent the page in the display width; of course, if you want to create a pure liquid layout, you can also remove this attribute in the style sheet.

The column is the innermost container container contents in the grid system, we can be placed, each line to a maximum of 12 column container. In the code above, we created is a typical "content and sidebar" layout, width of the full width of the 2/3 and 1/3.

The grid layout can be nested:

The Foundation website has some layout examples can refer to.

Rapid prototyping

Start. We want to make the page and the article page is a simple news website prototype; the whole process includes two parts: create a basic prototype using Foundation, as well as the different types of equipment for mobile processing. First, the first part.

The best paper and a pen, in creating prototypes before be crafted. The following is our based version of the home page (desktop display version) sketch:


Can see, general layout page including secondary content header, content, main and side of the graphics and text, the text feature list. On this page, we can use the layout structure of some Foundation's own, and a good external service.

1, The page layout, a grid system using introduced in front of the.

2, Global main navigation using tab structure Foundation default.

3, For each graphic element in the picture, we use the services. It will demonstrate content according to the specified proportion output can fill a container, including to occupy a picture, and you can customize the text.

We start from the OK header. The Foundation framework will ensure that the old browser compatible with HTML5, so we can rest assured here more semantic header tags. Because the header is a multicolumn content block structure, so we have to add class= "row". The following code:

As you can see, in the external container in container, we will header as a whole, which placed three columns, width is 1:4:1 relationship. In the first and third columns, we use the to provide occupying pictures, used to represent the logo elements. In the second column, we use the H1 tag as a container of the title of the website, the subtitle is the use of H5.

Next is the navigation. We will use the Foundation default tab format; code structure is as follows:

Although in this only a set of navigation elements, but we still need to list DL navigation elements placed in a column container, and the container is set to the 12 column column width, otherwise the layout problems.

For the other part of the page, the basic way is similar, and we are going to use the grid system, some basic elements, as well as Foundation's own UI components. Below is the remaining part of the HTML code page:

We can see, the code structure of each part in HTML prototype is actually fairly basic and simple. Note that with the "button" element in class is Foundation, the default button, including several different styles. We can use this way to a tags or input type of button element is defined as the style of the button, and the "small", "radius" and class to set the specific style:

smallOrlarge - optional; control the size of the button; if not set, the default will be the medium size.

radius - optional; add a few pixels of the fillet effect for the button. This value can also beround, The style for the left and right sides completely arc. Do not set, the default style is rectangular.

nice - optional; add a little details such as high light.

blue - optional; color; this value can also bered, black, grey, Or any name defined in the style sheet.

button - necessary to class only, for elements will be formatted as button.

By doing some very basic HTML code, we have created a basic version of the prototype; the actual effect of the current as shown below.


If only the need for desktop equipment production prototype, so here we have completed the task. However, in this example, we will demonstrate how to make a prototype for response compatibility for different types of mobile devices, to achieve cross platform.


The user use mobile devices to access the site, the expectations would be different. For the present content sites, we want users to use mobile devices to access on the first screen, can directly see the main part. Mobile device users in browsing Webpage, disgusted by the point is, bearing after loading process of the website header and global navigation, still can not see the main content.

Before don't do any mobile processing, our prototype in mobile devices with small screens as shown below:


The first screen, we can only see logo, site title and main content, global navigation irrelevant elements. Really not reliable. We are going to use some Foundation provides specially used for processing different equipment view class, make some element prototype changes occurred in the mobile devices with small screens.

At present, the basic version of our prototype, header part of the code is so:

After the addition of mobile class:

Focus on two new class, one ishide-on-phones, Another isshow-on-phones. As the name suggests, they are used to control elements in the mobile phone devices on the show and hide. The Foundation default of some of these class, according to the different types of equipment, adjust the page elements in response to the presentation.

Now, when the use of mobile phone browser prototype, only second simplified header will be displayed. Next, we write a few lines of style for the mobile version of header:

Look at the results:

Much better. The question now is, the navigation item on a small screen too much, layout disorder. A common solution is, the mobile phone equipment, navigate to the bottom of the page. Of course, we are not going to really move it, but as before setting display different rules. For the current global navigation, an increase of hide-on-phones in class:

Next, before footer, at the bottom of the page, add a new navigation; global navigation HTML structure and the head of the basic agreement:

The difference lies in two points: one is in the container's class using the show-on-phones, the navigation display only in mobile phone; in addition, in the navigation list of class added a"mobile", This can make each navigation tab into full width, the navigation will become a vertical list.

Now, the first screen effect of our prototype in mobile phone is this:


Based on the grid system, write a few high semantic HTML code, with the native Foundation provides some style tool class, we have created a prototype can be used for the cross platform demonstration and testing.

You have a try

Next, you can follow the way in front of us, try to create a prototype for the inside pages. Also, from the beginning of hand-painted draft. We have to help you complete this step, and add some comments, as tips prepared prototype code; see below:


You canDownload the example source file package, Have a look the actual prototype related documents (including the inside pages) complete code.

Cross platform prototype can play what role in the project practice?

As we mentioned at the beginning of this article, to make the site in any type of equipment are as compatible, the best way is from the upstream design process of cross platform, create better prototype, ensure can timely examine the design of layout structure, from the beginning. Iterative design aspects not to rely solely on Photoshop.

Recently, we are in a real project to create a website for the local public welfare organizations, by this way, makes the design and development of 24 hour dash. After outlining the web pages of sketches, we use the Foundation framework, in less than two hours, to create a prototype for all pages. These prototypes can help us to directly test the design scheme, corresponding to the various equipment platform at the same time, designers can start the development of the prototype code structure and line based on the content of the team, can also be visualization prototype based on planning; during this period, we also carried out the visual design work.

For reprint, please indicate: This article from the Be For Web

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Greg at March 12, 2014 - 4:59 PM