Your SlideShare is downloading. ×
0
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 Desig...
What is Responsive
Design?
Responsive web design (RWD) is a web
design approach aimed at crafting sites to
provide an opti...
Meta Tags
• They always go in the <head> section
• They are never displayed
• They consist mostly of key/value pairs
• The...
TheViewport
• A special type of meta tag which defines
the screen of a mobile device
Wednesday, July 17, 13
TheViewport
Wednesday, July 17, 13
TheViewport
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <title>Module 1</title>
6 <meta charset="utf-8"/>
7 <meta name="viewpo...
Viewport Attributes
• width=device-width - converts the pixels to
CSS pixels
• initial-scale=1 - sets the scale level
• us...
Media Query
• Begins with @media
• And has at least one expression that limits
the style sheets’ scope
Wednesday, July 17,...
Media Query
@media screen and (max-width: 1024px) and (orientation:portrait)
• the media type is screen
• the styles only ...
Media Query
• Can have more complex expression which
are separate by:
• not - used to negate a media query
• and - used to...
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 column...
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...
Grids
• Each column has the class ui-block-x
applied
• The class must be in correct alphabetic
order or the universe will ...
Demo: Grids
Wednesday, July 17, 13
Tables
• Two types of tables:
• Reflow
• Column Toggle
• Only difference in the markup is the data-
mode attribute
Wednesda...
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 sect...
Demo: Panels
Wednesday, July 17, 13
Best Practices
• Design styles beginning with "mobile first",
then go wider
• Use "min-width" to constrain styles
• Prefer ...
Other Options
• Twitter Bootstrap
• Foundation
• Skeleton
• http://responsive.vermilion.com/
compare.php
Wednesday, July 1...
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.ne...
Summary
• It is easy to get started with responsive
web site design with jQuery Mobile
• It requires a lot of planning to ...
Upcoming SlideShare
Loading in...5
×

Responsive Design and jQuery Mobile

3,021

Published on

"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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,021
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Design and jQuery Mobile"

  1. 1. Responsive Design with jQuery Mobile 17 July 2013 Wednesday, July 17, 13
  2. 2. Want more? Follow me for more tutorials and source code. @therockncoder Wednesday, July 17, 13
  3. 3. Check out my videos: www.youtube.com/rockncoder Wednesday, July 17, 13
  4. 4. Source code for my tutorials hosted on GitHub @ https://github.com/Rockncoder Wednesday, July 17, 13
  5. 5. Please Rate This Talk! http://spkr8.com/t/23671 Wednesday, July 17, 13
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. TheViewport • A special type of meta tag which defines the screen of a mobile device Wednesday, July 17, 13
  10. 10. TheViewport Wednesday, July 17, 13
  11. 11. TheViewport 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
  12. 12. 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
  13. 13. Media Query • Begins with @media • And has at least one expression that limits the style sheets’ scope Wednesday, July 17, 13
  14. 14. 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
  15. 15. 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
  16. 16. Demo: Squirrels Wednesday, July 17, 13
  17. 17. jQuery Mobile Features • Grids • Tables • Panels Wednesday, July 17, 13
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. Demo: Grids Wednesday, July 17, 13
  22. 22. Tables • Two types of tables: • Reflow • Column Toggle • Only difference in the markup is the data- mode attribute Wednesday, July 17, 13
  23. 23. Demo: Fun with Tables Wednesday, July 17, 13
  24. 24. 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
  25. 25. Demo: Panels Wednesday, July 17, 13
  26. 26. 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
  27. 27. Other Options • Twitter Bootstrap • Foundation • Skeleton • http://responsive.vermilion.com/ compare.php Wednesday, July 17, 13
  28. 28. Resources • http://jquerymobile.com/ • http://alistapart.com/article/responsive- web-design Wednesday, July 17, 13
  29. 29. My Resources • http://therockncoder.blogspot.com/ • https://github.com/Rockncoder/JQMResponsive • http://www.slideshare.net/rockncoder/ responsive-design-24339494 Wednesday, July 17, 13
  30. 30. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×