/* 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 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!
|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*/