Responsive Design and jQuery Mobile
•
1 like•4,082 views
"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.
Recommended
Recommended
More Related Content
Similar to Responsive Design and jQuery Mobile
Similar to Responsive Design and jQuery Mobile (20)
More from Troy Miles
More from Troy Miles (20)
Recently uploaded
Recently uploaded (20)
Responsive Design and jQuery Mobile
- 1. Responsive Design with jQuery Mobile 17 July 2013 Wednesday, July 17, 13
- 2. Want more? Follow me for more tutorials and source code. @therockncoder Wednesday, July 17, 13
- 3. Check out my videos: www.youtube.com/rockncoder Wednesday, July 17, 13
- 4. Source code for my tutorials hosted on GitHub @ https://github.com/Rockncoder Wednesday, July 17, 13
- 5. Please Rate This Talk! http://spkr8.com/t/23671 Wednesday, July 17, 13
- 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. 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. 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. TheViewport • A special type of meta tag which defines the screen of a mobile device Wednesday, July 17, 13
- 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. 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. Media Query • Begins with @media • And has at least one expression that limits the style sheets’ scope Wednesday, July 17, 13
- 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. 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. Demo: Squirrels Wednesday, July 17, 13
- 17. jQuery Mobile Features • Grids • Tables • Panels Wednesday, July 17, 13
- 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. 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. 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. Demo: Grids Wednesday, July 17, 13
- 22. Tables • Two types of tables: • Reflow • Column Toggle • Only difference in the markup is the data- mode attribute Wednesday, July 17, 13
- 23. Demo: Fun with Tables Wednesday, July 17, 13
- 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. Demo: Panels Wednesday, July 17, 13
- 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. Other Options • Twitter Bootstrap • Foundation • Skeleton • http://responsive.vermilion.com/ compare.php Wednesday, July 17, 13
- 28. Resources • http://jquerymobile.com/ • http://alistapart.com/article/responsive- web-design Wednesday, July 17, 13
- 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. 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