CSS Rules for Small Screens

Show:

Companion Videos for the ADC

Save

Translations

Was this episode helpful?

About This Episode

Chris Converse shows you how to keep the natural flow of content for hand-held devices, and reposition the navigation on larger screens, using a single set of HTML and CSS markup. Read the article to learn more.

View HTML tutorial

Show More Details

More Episodes

Comments

Episode Title	Runtime	CC	Products Covered	My Library
Simple CSS Shaders in Action Demo Simple CSS Shaders in Action Demo This video demonstrates simple CSS shaders in action. CSS shaders define a filter effects extensibility mechanism, providing visual effects to all HTML5 content, and work particularly well with CSS animations and CSS transitions. (Read the article to learn more.) Runtime: 00:00:10 Added: June 29, 2012 Views: 5,239	00:00:10
Grayscale Filter Effects Demo Grayscale Filter Effects Demo This video demonstrates grayscale filter effects. CSS shaders define a filter effects extensibility mechanism, providing visual effects to all HTML5 content, and work particularly well with CSS animations and CSS transitions. (Read the article to learn more.) Runtime: 00:00:06 Added: June 29, 2012 Views: 4,845	00:00:06
CSS Shaders Twitter Feed Demo CSS Shaders Twitter Feed Demo This video demonstrates CSS shaders in action on a Twitter feed. CSS shaders define a filter effects extensibility mechanism, providing visual effects to all HTML5 content, and work particularly well with CSS animations and CSS transitions. (Read the article to learn more.) Runtime: 00:00:22 Added: June 29, 2012 Views: 4,006	00:00:22
CSS Shaders Unfolding Map Demo CSS Shaders Unfolding Map Demo This video demonstrates the proposed CSS shaders in action on an unfolding map. CSS shaders define a filter effects extensibility mechanism, providing visual effects to all HTML5 content, and work particularly well with CSS animations and CSS transitions. (Read the article to learn more.) Runtime: 00:00:18 Added: June 29, 2012 Views: 7,771	00:00:18
CSS Shaders Flipbook Demo CSS Shaders Flipbook Demo This video demonstrates CSS shaders in action on a flip book. CSS shaders define a filter effects extensibility mechanism, providing visual effects to all HTML5 content, and work particularly well with CSS animations and CSS transitions. (Read the article to learn more.) Runtime: 00:00:39 Added: June 29, 2012 Views: 11,567	00:00:39
Advanced Design Template for jQuery Mobile Advanced Design Template for jQuery Mobile Chris Converse shows you how Dreamweaver CS6 features a streamlined workflow for creating a jQuery Mobile project containing the necessary CSS and HTML markup. Read the article to learn more. Runtime: 00:13:03 Added: June 18, 2012 Views: 11,223	00:13:03
CSS Rules for Small Screens CSS Rules for Small Screens Chris Converse shows you how to keep the natural flow of content for hand-held devices, and reposition the navigation on larger screens, using a single set of HTML and CSS markup. Read the article to learn more. Runtime: 00:12:06 Added: April 26, 2012 Views: 848	00:12:06
Adding Imagery with CSS Adding Imagery with CSS Chris Converse shows you how to use media queries to alter the size of images with an HTML element as a container to change the dimensions and position properties. Read the article to learn more. Runtime: 00:08:57 Added: April 26, 2012 Views: 505	00:08:57
Slicing and Optimizing Graphics Slicing and Optimizing Graphics Chris Converse shows you how to use multiple version of your graphics to affect the speed at which you design loads on smaller screens. Read the article to learn more. Runtime: 00:08:02 Added: April 26, 2012 Views: 701	00:08:02
Project Preview Across Browsers Project Preview Across Browsers Chris Converse shows you how to dynamically alter the design and layout of a web page in order to deliver an optimal user experience from a single set of HTML and CSS markup. Read the article to learn more. Runtime: 00:04:20 Added: April 26, 2012 Views: 503	00:04:20
Customizable starter designs with interactive Spry... Customizable starter designs with interactive Spry widgets Chris Converse shows you how to edit the design and Spry widgets in Dreamweaver, Photoshop, and Fireworks using this customizable starter template. Read the article to learn more. Runtime: 00:14:00 Added: February 01, 2012 Views: 46,977	00:14:00
Customizable starter design for jQuery Mobile Customizable starter design for jQuery Mobile Chris Converse gives an overview of this customizable starter template for your jQuery Mobile projects. Read the article to learn more. Runtime: 00:05:46 Added: February 01, 2012 Views: 20,589	00:05:46
Customizable starter designs using advanced HTML a... Customizable starter designs using advanced HTML and CSS techniques Chris Converse shows you how to use these starter templates that support advanced HTML and CSS techniques. Read the article to learn more. Runtime: 00:28:08 Added: February 01, 2012 Views: 14,592	00:28:08
Applying design to Spry widgets Applying design to Spry widgets Chris Converse shows you how to customize the HTML and CSS files in these provided themes based entirely on the Spry markup and CSS rules. Read the article to learn more. Runtime: 00:17:05 Added: February 01, 2012 Views: 2,413	00:17:05
Rich media website: Spry widgets Rich media website: Spry widgets As you bring your web designs to the browser, Chris Converse shows you how to add and style a Spry widget using the provided template. Read the article to learn more. Runtime: 00:30:50 Added: February 01, 2012 Views: 1,904	00:30:50
Rich media website: Audio Rich media website: Audio As you bring your web designs to the browser, Chris Converse shows you how to edit and design audio using the provided template. Read the article to learn more. Runtime: 00:07:52 Added: February 01, 2012 Views: 975	00:07:52
Rich media website: Templates with editable region... Rich media website: Templates with editable regions As you bring your web designs to the browser, Chris Converse shows you how to create templates with editable regions using the provided template. Read the article to learn more. Runtime: 00:08:07 Added: February 01, 2012 Views: 4,522	00:08:07
Rich media website: CSS-styled navigation Rich media website: CSS-styled navigation As you bring your web designs to the browser, Chris Converse shows you how to use CSS to style your navigation using the provided template. Read the article to learn more. Runtime: 00:14:36 Added: February 01, 2012 Views: 5,009	00:14:36
Customizable starter design for HTML5 video Customizable starter design for HTML5 video Chris Converse shows you how to embed an HTML5 video player in your web designs using the provided template. Read the article to learn more. Runtime: 00:06:36 Added: February 01, 2012 Views: 7,785	00:06:36
Customizable starter design for multiscreen develo... Customizable starter design for multiscreen development Chris Converse gives an overview of this provided template that uses CSS3 media queries. Read the article to learn more. Runtime: 00:11:45 Added: February 01, 2012 Views: 9,747	00:11:45
Creating a simple mobile game using the Code Snipp... Creating a simple mobile game using the Code Snippets panel in Flash In this demo, Yuki Shimizu shows how the completed game appears when played on a Motorola Droid X phone. (Click the HTML Text link to read the article.) Runtime: 00:00:41 Added: January 23, 2012 Views: 2,642	00:00:41
iOS and Android device with vector graphics iOS and Android device with vector graphics In this mobile app demo, John Chen shows animations on the Nexus One (left) and iPod 4 (right) performing poorly because of too many vector graphics. Note the degraded performance (as slow as 12 fps) as more and more vector graphics come in. (Click the HTML Text link to read the article.) Runtime: 00:00:31 Added: December 09, 2011 Views: 2,228	00:00:31
iOS and Android device with bitmap graphics iOS and Android device with bitmap graphics In this mobile app demo, John Chen shows animations on the Nexus One (left) and iPod 4 (right) performing well. Note the high and consistent 30 frames per second (fps) even though more and more bitmap graphics come in. (Click the HTML Text link to read the article.) Runtime: 00:00:30 Added: December 09, 2011 Views: 1,642	00:00:30
iOS and Android device without manual garbage coll... iOS and Android device without manual garbage collection In this mobile app demo, John Chen shows how a lack of manual garbage collection hinders performance on the iPod 4 (top) and Nexus One (bottom). The number of triangles increases forever as the animation plays. (Click the HTML Text link to read the article.) Runtime: 00:00:30 Added: December 09, 2011 Views: 1,523	00:00:30
iOS and Android device with manual garbage collect... iOS and Android device with manual garbage collection In this mobile app demo, John Chen shows how manual garbage collection improves performance on the iPod 4 (top) and Nexus One (bottom). Each animation shows under 200 triangles in playContainer and never slows down. (Click the HTML Text link to read the article.) Runtime: 00:00:38 Added: December 09, 2011 Views: 1,842	00:00:38
Responsive design with jQuery marquee Responsive design with jQuery marquee Chris Converse shows you how to use the provided Dreamweaver jQuery marquee template to create a compelling user experience across devices, while maintaining a shared set of HTML and CSS markup. Read the article to learn more. Runtime: 00:05:38 Added: December 09, 2011 Views: 7,894	00:05:38