Create an Adaptable Framework with HTML5 - dummies

Create an Adaptable Framework with HTML5

Before you create a Framework for a website that will be displayed on the iPhone and iPad, it’s helpful to think ahead about how you want your pages to look when you add the styles. This is where wireframes can really help.

In the following figures, you see three different wireframe designs for the front page of a simple blog website — the first one is for the iPhone, and the following two are for the iPad (one for landscape mode and the other for portrait mode).


Let’s explore three relatively simple wireframe designs that would be ideal for a basic blog. Wireframe designs, such as the ones shown, can help guide you as you create a Framework for your site in HTML.

As you decide how to develop your site, keep in mind that you could create three completely different HTML pages, each with its own style sheet to achieve these three different displays.

If you took that route, you’d need to use a device detection script, a complicated program that can detect the type of device used by visitors to your site and then direct them to the best version of each page for that device. If you’re designing a mobile website that needs to reach the broadest audience, that’s the best way to go.

The advantage of focusing on the iPhone and iPad is that you don’t have to go to all the trouble of creating a device-detection script. That’s because the Safari web browser on the iPhone and iPad can read multiple CSS files, something many other cellphone browsers aren’t capable of.

So, you can use CSS to create designs that work well on the latest browsers on desktop and laptop computers, as well as the iPhone and iPad.

Although you can create completely different pages for display in each device, the most efficient option is to create one page in HTML and then use three different sets of style sheets to adjust the design. With that goal in mind, first create one page Framework, and then use CSS to create different designs from that one HTML page.

Now here’s the part that can seem a little crazy if you’re not already familiar with all the things you can do with CSS. The same HTML code can be used to create all three of the designs shown in the figures. The positioning of the elements, such as the aside, is done with CSS.