Skip to content

Commit

Permalink
Made changes to ch10_responsive.asciidoc
Browse files Browse the repository at this point in the history
  • Loading branch information
myarbrough committed Jun 30, 2014
1 parent 063b9ea commit f7889ab
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions ch10_responsive.asciidoc
Expand Up @@ -139,7 +139,7 @@ The HTTP header's `User-Agent` attribute contains information about the user age
image::images/ewdv_1004.png[scale="40"]


There is an easier way to detect on the server that the request came from a mobile device. http://wurfl.sourceforge.net/[_Wireless Universal Resource File_ (WURF)] is a database of thousands of supported devices and their properties. Such Internet giants as Facebook and Google rely on this service, and your application could, too, if need be. WURF offers APIs from several programming languages to detect specific capabilities of user devices.((("responsive web design (RWD)", "detecting user device")))((("Wireless Universal Resource File (WURF)"))) For example, the following code snippet is how you could access the WURF data from a Java servlet:
There is an easier way to detect on the server that the request came from a mobile device. http://wurfl.sourceforge.net[_Wireless Universal Resource File_ (WURF)] is a database of thousands of supported devices and their properties. Such Internet giants as Facebook and Google rely on this service, and your application could, too, if need be. WURF offers APIs from several programming languages to detect specific capabilities of user devices.((("responsive web design (RWD)", "detecting user device")))((("Wireless Universal Resource File (WURF)"))) For example, the following code snippet is how you could access the WURF data from a Java servlet:

[source, html]
----
Expand Down Expand Up @@ -822,15 +822,15 @@ Spend some time analyzing the content of _index.html_ and _styles.css_ from the

We have explained how the fluid grid works under the hood, but calculating percentages is not the most exciting job for software developers. The good news is that several responsive frameworks offer CSS, typography, and some JavaScript to jump-start UI development of a web application. They'll spare you from most of the mundane work with cascading style sheets.((("responsive web design (RWD)", "fluid grids", "frameworks supporting"))) Here are some of them:

* Consider using Twitter's framework called http://twbs.github.io/bootstrap/[Bootstrap], which has lots of greatly styled http://bit.ly/1piyvie[components] and also supports a fluid grid system.
* Consider using Twitter's framework called http://twbs.github.io/bootstrap[Bootstrap], which has lots of greatly styled http://bit.ly/1piyvie[components] and also supports a fluid grid system.

* The http://foundation.zurb.com/[Foundation 4] framework promotes Mobile First design and includes a flexible grid.
* The http://foundation.zurb.com[Foundation 4] framework promotes Mobile First design and includes a flexible grid.

* http://www.getskeleton.com/[The Skeleton] is a collection of CSS files, which includes a scalable grid.
* http://www.getskeleton.com[The Skeleton] is a collection of CSS files, which includes a scalable grid.

* http://semantic-ui.com[Semantic-UI] is a collection of styled UI components, which includes a http://bit.ly/1pJa675[responsive grid], too.

TIP: People who work with CSS a lot use an authoring framework called http://compass-style.org[Compass] with the CSS extension http://sass-lang.com/[SASS] or the CSS preprocessor http://lesscss.org/[LESS]. These systems compile to CSS, allowing code to include variables for tracking and calculating numbers such as column width and more. You can now modularize your CSS as well as your code. In <<sencha_touch>> we use a SASS theme that comes with the Sencha Touch framework.((("fluid grids", "frameworks supporting")))(((Compass CSS authoring framework)))
TIP: People who work with CSS a lot use an authoring framework called http://compass-style.org[Compass] with the CSS extension http://sass-lang.com[SASS] or the CSS preprocessor http://lesscss.org/[LESS]. These systems compile to CSS, allowing code to include variables for tracking and calculating numbers such as column width and more. You can now modularize your CSS as well as your code. In <<sencha_touch>> we use a SASS theme that comes with the Sencha Touch framework.((("fluid grids", "frameworks supporting")))(((Compass CSS authoring framework)))


=== Making Save The Child Responsive
Expand Down Expand Up @@ -1167,7 +1167,7 @@ There is a living W3C document, titled http://picture.responsiveimages.org["An H

Another technique is to use a content delivery network (CDN) that caches and serves images of different sizes for different user agents. The very first time that a request is made from a device with an unknown user engine, this first "unlucky" user will get an image with a low resolution, and then the application makes an Ajax call, passing the exact screen parameters for this device. The CDN server resizes the original high-resolution image for this particular user agent, and caches it, so any other users having the same device will get a perfectly sized image from the get-go.((("content delivery network (CDN)")))

TIP: https://github.com/BBC-News/Imager.js[Imager.js] is an alternative solution to handling responsive image loading, created by developers at BBC News. Imager loads the most suitably sized image and does it once.
TIP: http://bit.ly/1lPiwTE[Imager.js] is an alternative solution to handling responsive image loading, created by developers at BBC News. Imager loads the most suitably sized image and does it once.


=== Summary
Expand Down

0 comments on commit f7889ab

Please sign in to comment.