responsive design and jquery mobile
DESCRIPTION
"Mobile First!", is the new cry of web designers worldwide. But how do you do it? Do you have to scrap all of your current web skills? Is it magic created by wizard-like designers which could never be understood by mere mortals? Believe it or not with the combination of jQuery Mobile and CSS3 Media Queries, you can easily create a site which looks good on phone, tablet, or desktop. In this talk, I will show how to build a simple responsively designed web site using jQuery Mobile version 1.3.1. I will begin with a design for mobile, expand it to support tablet in both landscape and portrait modes, and finally show how to take advantage of the desktop's big screen. We will also discuss some of the pitfalls of responsive design and potential work-arounds for them.TRANSCRIPT
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