/* Adaptive Websites*/

The early approach to mobile web design was to create multiple versions of web pages, each optimized to fit a different screen size, and then use a detection script to identify what type of device was visiting your site and send an optimized version.

Adaptive Design offers a far more elegant solution by creating one page that adapts (adjusts) to different screen sizes. Essentially, you create one HTML document and then use multiple sets of CSS rules to rearrange and resize images, text, and other elements on that page to fit different screen sizes. As a browser identifies the size of each screen that visits your site, the corresponding set of CSS style rules is automatically applied based on a media query.

To paraphrase Lord Sauron in the Lord of the Rings Trilogy: "One website to rule them all". One website can now tame the largest desktop screen down to a small smartphone screen and everything in between.

The following image shows the Boston Globe website and how it looks on a desktop, tablet and smartphone screen.

Adaptive design example

 

/* Adaptive Table Example */

So what about tabular data? Most tables on a smartphone are unreadable. You have to pinch, stretch and slide the table just to read content. Not any more. With the use of creative CSS, tabular data looks great on a desktop or tablet and then gracefully collapses nicely on a smartphone screen. All information is readable. The following table is a good example. If you grab the corner of your desktop screen and reduce the width, the columns collapse with all table rows and columns visible. Give it a try!

Address Flier Map Suite Size Description Zoning
7820 E Evans Road Flier Map 500 1,148 Office/Warehouse I-1 I-1
7762 E Gray Road Flier Map 200 1,200 3 Offices, Conference rm, Break area, Fax/copy rm, Restroom. Can be converted to warehouse I-1
8341 E Evans Road Flier Map 104 1,392 Reception, Offices, Copy/fax room, Restroom, Warehouse I-G
8341 E Evans Road Flier Map 109 1,392 Reception, 2 Office, Copy/fax room, Restroom, Evap-cooled, warehouse w/ epoxy floor. New carpet! I-G
8361 E Evans Road Flier Map 103 1,409 Reception, 2 Private Offices, Flex area, Restroom, 100% A/C Warehouse with roll up door I-G
8361 E Evans Road Flier Map 110 1,409 Reception, Office, Restroom, 100% A/C Warehouse with dropped ceiling, plus Evap Warehouse with roll down door. Can be combined with 111 I-G
8361 E Evans Road Flier Map 111 1,409 Office/Warehouse. Can be combined with 110 I-G
8341 E. Evans Road Flier Map 111 1,409 Built-in reception, 1 Office, Restroom, Evap-cooled Warehouse w/ 12 - 14' clear height, rolldown door, grade level loading I-G

 

/* Scaleable Graphics*/

Even CSS/Javascript slideshows scale beautifully. The following rotating images scale down to fit the smallest screens.

AZCatering