Web Oriented Object Framework

User Guide (Version 0.5b4)

User Guide (Version 0.5b4)

Responsive web design

With the proliferation of devices with screens of different sizes, the one size (or a few) fits all philosophy of web page design does not always work. What looks good on your desktop display may not show up well on your smartphone in terms of both looks and usability.

One solution is to have a entirely separate web site geared towards smaller devices. While that might afford the most flexibility and best user experience, maintaining multiple web sites is an expensive proposition. An alternative approach that provides many, if not all, of the same benefits has become popular. This approach, termed responsive web design, makes use of various techniques to display the same content differently based on the device screen geometry (or to be more precise, the browser window size).

This chapter describes Woof! support for these techniques via Pure CSS . The image below for the Woof! welcome page illustrates how the display layout is adapted for smaller browser screen widths. Compare this with the same page displayed on a wider window. You can see the effect on a desktop by narrowing the width of your browser window.

BowWow Welcome

Responsive techniques include

Pure CSS provides several capabilities to make it easier to implement responsive web sites. Woof! layers on these and provides some additional features. This chapter describes their use.

NOTE Again, the description in this chapter assumes use of the default layout but the techniques may be applied to custom layouts as well.