Responsive Design and jQuery Mobile
-
Upload
troy-miles -
Category
Technology
-
view
2.893 -
download
2
description
Transcript of Responsive Design and jQuery Mobile
Responsive Design with jQuery Mobile
17 July 2013
Wednesday, July 17, 13
Want more? Follow me for more tutorials and source code.@therockncoder
Wednesday, July 17, 13
Check out my videos:www.youtube.com/rockncoder
Wednesday, July 17, 13
Source code for my tutorials hosted on GitHub @
https://github.com/Rockncoder
Wednesday, July 17, 13
Please Rate This Talk! http://spkr8.com/t/23671
Wednesday, July 17, 13
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
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
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
The Viewport
• A special type of meta tag which defines the screen of a mobile device
Wednesday, July 17, 13
The Viewport
Wednesday, July 17, 13
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
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
Media Query
• Begins with @media
• And has at least one expression that limits the style sheets’ scope
Wednesday, July 17, 13
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
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
Demo: Squirrels
Wednesday, July 17, 13
jQuery Mobile Features
• Grids
• Tables
• Panels
Wednesday, July 17, 13
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
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
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
Demo: Grids
Wednesday, July 17, 13
Tables
• Two types of tables:
• Reflow
• Column Toggle
• Only difference in the markup is the data-mode attribute
Wednesday, July 17, 13
Demo: Fun with Tables
Wednesday, July 17, 13
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
Demo: Panels
Wednesday, July 17, 13
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
Other Options
• Twitter Bootstrap
• Foundation
• Skeleton
• http://responsive.vermilion.com/compare.php
Wednesday, July 17, 13
Resources
• http://jquerymobile.com/
• http://alistapart.com/article/responsive-web-design
Wednesday, July 17, 13
My Resources
• http://therockncoder.blogspot.com/
• https://github.com/Rockncoder/JQMResponsive
• http://www.slideshare.net/rockncoder/responsive-design-24339494
Wednesday, July 17, 13
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