Join Joseph Lowery for an in-depth discussion in this video Applying JavaScript techniques, part of Responsive Design with Dreamweaver CS6.
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.…
Author
Joseph Lowery
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
Skill Level Appropriate for all
Duration
Views
-
Introduction
-
Welcome1m
-
About the exercise files1m 19s
-
-
1. Understanding Responsive Web Design
-
Structuring fluid grids3m 38s
-
Understanding media queries4m 26s
-
2. Fluid Grid Layouts in Dreamweaver
-
Inserting content8m 11s
-
Targeting a phone design5m 28s
-
Balancing tablet layouts9m 35s
-
3. Expanding on a Fluid Grid Structure
-
4. Enhanced Media Queries
-
Handling orientation changes2m 23s
-
5. Flexible Images and Media
-
Core CSS manipulation6m 59s
-
-
Goodbye
-
Next steps25s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Applying JavaScript techniques