Responsive Design and jQuery Mobile
-
Upload
troy-miles -
Category
Technology
-
view
2.897 -
download
2
description
Transcript of Responsive Design and jQuery Mobile
![Page 1: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/1.jpg)
Responsive Design with jQuery Mobile
17 July 2013
Wednesday, July 17, 13
![Page 2: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/2.jpg)
Want more? Follow me for more tutorials and source code.@therockncoder
Wednesday, July 17, 13
![Page 3: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/3.jpg)
Check out my videos:www.youtube.com/rockncoder
Wednesday, July 17, 13
![Page 4: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/4.jpg)
Source code for my tutorials hosted on GitHub @
https://github.com/Rockncoder
Wednesday, July 17, 13
![Page 5: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/5.jpg)
Please Rate This Talk! http://spkr8.com/t/23671
Wednesday, July 17, 13
![Page 6: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/6.jpg)
What We Will Cover
• What is responsive design?
• Meta tags and viewports
• Media Queries
• jQuery Mobile Responsive Design Features
• Best Practices
• Summary
Wednesday, July 17, 13
![Page 7: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/7.jpg)
What is Responsive Design?
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
Wednesday, July 17, 13
![Page 8: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/8.jpg)
Meta Tags
• They always go in the <head> section
• They are never displayed
• They consist mostly of key/value pairs
• They are data about data
Wednesday, July 17, 13
![Page 9: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/9.jpg)
The Viewport
• A special type of meta tag which defines the screen of a mobile device
Wednesday, July 17, 13
![Page 10: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/10.jpg)
The Viewport
Wednesday, July 17, 13
![Page 11: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/11.jpg)
The Viewport
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title>Module 1</title> 6 <meta charset="utf-8"/> 7 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> 8 <meta name="apple-mobile-web-app-capable" content="yes"/> 9 </head>
Wednesday, July 17, 13
![Page 12: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/12.jpg)
Viewport Attributes
• width=device-width - converts the pixels to CSS pixels
• initial-scale=1 - sets the scale level
• user-scalable=no - turns off scaling
Wednesday, July 17, 13
![Page 13: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/13.jpg)
Media Query
• Begins with @media
• And has at least one expression that limits the style sheets’ scope
Wednesday, July 17, 13
![Page 14: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/14.jpg)
Media Query@media screen and (max-width: 1024px) and (orientation:portrait)
• the media type is screen
• the styles only defined if
• The width is 1024px or less
• AND the orientation is portrait
Wednesday, July 17, 13
![Page 15: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/15.jpg)
Media Query
• Can have more complex expression which are separate by:
• not - used to negate a media query
• and - used to combine multiple media features
• only - applies a style only if the entire query matches
Wednesday, July 17, 13
![Page 16: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/16.jpg)
Demo: Squirrels
Wednesday, July 17, 13
![Page 17: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/17.jpg)
jQuery Mobile Features
• Grids
• Tables
• Panels
Wednesday, July 17, 13
![Page 18: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/18.jpg)
Grids
• Consists of two parts
• A div which serves as the container for the columns
• Divs which are the individual columns
Wednesday, July 17, 13
![Page 19: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/19.jpg)
Grids
• On the root div ui-grid-x class is applied
• ui-grid-a = 2 columns
• ui-grid-b = 3 columns
• ui-grid-c = 4 columns
• ui-grid-d = 5 columns
Wednesday, July 17, 13
![Page 20: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/20.jpg)
Grids
• Each column has the class ui-block-x applied
• The class must be in correct alphabetic order or the universe will cease to exist
• ui-block-a, ui-block-b, ui-block-c, etc
Wednesday, July 17, 13
![Page 21: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/21.jpg)
Demo: Grids
Wednesday, July 17, 13
![Page 22: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/22.jpg)
Tables
• Two types of tables:
• Reflow
• Column Toggle
• Only difference in the markup is the data-mode attribute
Wednesday, July 17, 13
![Page 23: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/23.jpg)
Demo: Fun with Tables
Wednesday, July 17, 13
![Page 24: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/24.jpg)
Panels
• A hidden page which reveals itself by sliding from the left or right onto the page
• Must precede the header section
Wednesday, July 17, 13
![Page 25: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/25.jpg)
Demo: Panels
Wednesday, July 17, 13
![Page 26: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/26.jpg)
Best Practices
• Design styles beginning with "mobile first", then go wider
• Use "min-width" to constrain styles
• Prefer percentages and ems to pixels
Wednesday, July 17, 13
![Page 27: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/27.jpg)
Other Options
• Twitter Bootstrap
• Foundation
• Skeleton
• http://responsive.vermilion.com/compare.php
Wednesday, July 17, 13
![Page 28: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/28.jpg)
Resources
• http://jquerymobile.com/
• http://alistapart.com/article/responsive-web-design
Wednesday, July 17, 13
![Page 29: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/29.jpg)
My Resources
• http://therockncoder.blogspot.com/
• https://github.com/Rockncoder/JQMResponsive
• http://www.slideshare.net/rockncoder/responsive-design-24339494
Wednesday, July 17, 13
![Page 30: Responsive Design and jQuery Mobile](https://reader034.fdocuments.net/reader034/viewer/2022052310/554bbc2fb4c90594278b4ddc/html5/thumbnails/30.jpg)
Summary
• It is easy to get started with responsive web site design with jQuery Mobile
• It requires a lot of planning to get it right
• There may be better tools for your site’s needs
Wednesday, July 17, 13