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