Responsive Design and jQuery Mobile
Join the DZone community and get the full member experience.
Join For Free"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 that looks good on a phone, tablet, or desktop.
Does Mobile-First Still Matter?
Yes! You still need to look to design all features of your programs with a mobile-first mentality. People are spending increasing amounts of time on their phones, and they expect the companies that create products for them to come up with something that will enable them to continue to view those products from their phones. If you are unable to do this for them, they may simply move on to another company that can provide them with that kind of functionality.
You have a lot of choices to make when it comes to the specific features that you will use and embrace, but you need to consider how going mobile first can help bolster the chances of your application being used by the masses.
General Responsive Web Features
The web began as responsive. Now admittedly, the web didn't do very much, so being responsive when the Internet was mainly documents was easy. HTML documents naturally wrapped to the next line and flowed down the page.
Along the way, things changed. Developers began designing sites in tools like PhotoShop and wanted perfect pixel renderings of those designs. The problem with pixels is that they are not very flexible. It has always been possible to use percentages instead of pixels, but they were clumsier to work with, so pixels remained the favorite.
With HTML5 and CSS3 there is more support for responsive design. Lets
Meta Tags
Meta tags have been the favorite of the SEO crowd for some time. Meta tags are used to define keywords, descriptions, and even redirects. Here are some rules about meta tags:
They always go in the <head> section of the page
They are never displayed
They consist mostly of key/value pairs: name = key and content = value
Viewport
The viewport is a special type of meta tag which defines the screen of a mobile device. In the example program the viewport meta tag looks like:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
The attributes above mean:
width=device-width - converts the pixels to CSS pixels
initial-scale=1 - sets the scale level
user-scalable=no - turns off scaling
If the initial scale is some other value than 1, the zoom can be smaller or larger. If user-scalable is set to yes, then the user sets the zoom level by tapping, pinching, or whatever zoom gesture the browser supports.
Media Query
Media Queries are the workhorse of responsive design. A media query is a media type and at least one expression that limits the style sheets' scope. Here is an example:
@media screen and (max-width: 1024px) and (orientation:portrait)
{
}
The above media query means:
For a screen media type
Define the classes only if
The width is less than 1023
AND the orientation is portrait
The media query begins with @media then a media type, in this case, screen. Other types are all, braille, embossed, handheld, print, project, speech, tty, and tv. You can compose complex media queries using logical operators like not, and, and only.
not - is used to negate an entire media query
and - used to combine multiple media features together into a single media query
only - used to apply a style only if the entire query matches
Finally, there is the comma-separated list which behaves like an operator. If any media queries return true, the style sheets get applied.
One pattern for applying the media queries is to define the query for the narrowest device first, then define it for a tablet, and finally a desktop. Now all of these definitions are pretty loose and open to interpretation. You may need to adjust them to fit your needs.
If you run the demo on a high pixel phone like a Nexus 4, which has a display of 1280x768 resolution, why doesn't it display like a desktop? The key is the viewport meta tag. This tag, which is read by mobile browsers, redefines the pixels as CSS pixels. The precise number of CSS pixels varies by device, but on the iPhone, it is 320 and on the Nexus 4 it is 384, both of which are less than the minimum of 480 pixels to be defined as a tablet.
jQuery Mobile Features
So far we haven't looked at jQuery Mobile features. From the get go jQuery Mobile has had responsive features. Some of which are:
grid - a simple way to build CSS-based columns that can also be responsive
tables - selectively hide or shows table columns based on the display width
panels - create a hidden page that slides left or right to reveal itself
Grids
Grids have been with jQuery Mobile since the beginning. They are essentially self sizing columns that dynamically resize themselves when the size of the page changes. The number of available columns ranges from two to five. To change the number of available columns simply change the class on the root p then add or remove a p from the collection.
ui-grid-a = 2 columns
ui-grid-b = 3 columns
ui-grid-c = 4 columns
ui-grid-d = 5 columns
Tables
Tables were added with the release of jQuery Mobile 1.3.0. They allow for the responsive display of tabular data. There are two basic types of tables: reflow which is the default and column toggle. Reflow tables lay the table data horizontally until it reaches a minimum size, then all of the data for each row is grouped together and it re-flows down the page.
In column toggle mode, each column of a table can be given a separate priority, when the data can no longer fit horizontally, the column with the lowest priority number which is still visible is hidden. This continues until a minimum size is reached or there is only one column remaining.
Panels
A panel is a hidden page that reveals itself by sliding from the left or right onto the page. It can support nearly any jQuery Mobile widget. When the panel is displayed, clicking anywhere else on the page will close it.
Best Practices
Design styles beginning with "mobile first", then go wider
Use "min-width" to constrain styles
Prefer percentages and ems to pixels
Published at DZone with permission of Troy Miles, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments