The introduction of high-res screens like those found in the iPhone 4 and the…new iPad, AKA iPad 3, as well as an increasing number of Android phones, brings…both opportunity and frustration for web designers.…As discussed in the Chapter 4 lesson, working with High-Resolution Displays,…background images can be handled through Media Queries.…But what about foreground images?…That requires another type of solution, one either involving JavaScript…Server-Side Coding, or both.…
Most if the evolving answers to this problem also require some Additional HTML Markup.…In this lesson I'm going to introduce you to a JavaScript-only technique, which…while additional markup is incorporated is perfectly valid.…If you have been designing web pages for as long as I have, you might remember the…old image attribute Lowsource.…Lowsource was used to designate an image of the smaller file size,…which was loaded and displayed while the larger image was still chugging down the pipe.…
Lowsource isn't really in use any more.…But Christopher Deutsch used that as his inspiration for his JavaScript Solution High Source. You can find this project on GitHub.…
Released
8/21/2012- Exploring the default Fluid Grid Layout
- Adding building block div tags
- Inserting content into a fluid grid
- Modifying the number of grid columns
- Adjusting column widths and margins
- Building media queries from scratch
- Handling orientation changes
- Applying JavaScript techniques
- Setting up server-side solutions
Share this video
Embed this video
Video: Applying JavaScript techniques