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 deﬁnes the screen of a mobile device Wednesday, July 17, 13

10. TheViewport 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 deﬁned 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: • Reﬂow • 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 ﬁrst", 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

Responsive Design and jQuery Mobile

You are reading a preview.

Check these out next

Responsive Design and jQuery Mobile

More Related Content

Similar to Responsive Design and jQuery Mobile (20)

More from Troy Miles (20)

Recently uploaded (20)