Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 30 2012

10:00

jQuery Mobile – What You Need to Know

jQuery Mobile version 1.0 finally launched this past November. Don’t know if you heard about it, but if you are planning to do any mobile app or website development, it’s better to get started with it right now.

I’m sure you’ve heard about jQuery. So, its mobile version is pretty close to what you already are used to, but with a lot of enhancements for mobile screen events (like touching instead of click, and there is no hover) and browsers (this one is tricky since there are plenty of browsers and devices out there) and capabilities (pluggable components).

The crazy thing is how simple it is to initiate and build a fully working mobile site. Actually, we’ll be talking about concepts, tips, codes, and in the meantime you can build your own app, in no more than one hour. Yeah, noob to ninja in one hour, this is what you’ll get here :)

So, let’s rock!

jQuery Mobile’s Main Concept


Cross browsing, a nightmare that was coming back

Those who used to code anything between 2001 and 2008 (while < IE6 was pretty huge, and Firefox / Chrome were just the new kids on the browser block) faced the nightmare of cross-browser issues. I mean, if you think that putting a vendor prefix before CSS code is cross-browser, try to get things working well on IE5.5, IE6, Opera and Firefox without CSS / JS hacks.

That, dear Padawan, was crazy.

Back to 2010, mobile was getting bigger and bigger. So were the types of browsers out there. Each smart phone and tablet has its own capabilities and its own particularities. Try mixing that with touch oriented screens and a huge range of screen sizes. Sound familiar?

Then, the hero arrives


Credits: bizior (photo) & Rochester Oliveira (edit)

jQuery Mobile comes with a huge compatibility table, with lots of devices and platforms well covered. All you’ve got to do is include their libraries, and try to stop your jaw from hitting the floor when you see the amazing features.

Oh, and it’s not just about cross browsing. It also covers a lot of UI elements that are already standards out there. And if you want a little more customized look you can easily change that, without messing up functionality.

Awesomeness proven, let’s code!


Ok, now you know why this project is so great, let’s take a look at some of the overall effects, components, good practices and code that you may want to use.

Basic structure


Just to get started, let’s grab our files from jQuery’s CDN. We’ll need just 3 files:

  • jQuery Mobile stylesheet
  • jQuery JS
  • jQuery Mobile JS

So your code will look like:

<!DOCTYPE html>
<html>
<head>
	<title>Starter page</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
	<div data-role="page" id="home">
		<div data-role="header">
			<h1>Header</h1>
		</div>
		<div data-role="content">
			<p>Lorem ipsum</p>
		</div>
		<div data-role="footer">
			<h4>Footer</h4>
		</div>
	</div>
</body>
</html>

As you may notice it uses HTML5 markup and data-* attributes to get things working. This snippet will output this (all tests done with iOS 5.0.1 @ iPod):

Important note, any “traditional” jQuery call should be placed before the call for mobile framework.

Basic UI components


jQuery Mobile uses data-* attributes to define UI components. Actually you just saw 4 of them above. Let’s see a small list of them and their correspondent data attribute:

  • data-role=”page” : you can set divs inside your HTML page to behave as pages. SO what we’ve done above is to create a page “home” inside our file
  • data-role=”header”: used to mark divs as top toolbars. You can set up data-position=”fixed” as well so it’ll behave as fixed toolbar
  • data-role=”content”: the main part of your website / app. Images, buttons, actions and all the magic happens here!
  • data-role=”footer”: defines a toolbar at the bottom of current page. May use data-position=”fixed” too so it’ll force to stay at the bottom of the screen
  • data-role=”button”: it’ll be useful together with elements. You may use also data-transition to define how it’ll load next page. Options: slide, slideup, slidedown, pop, fade, flip. Another cool thing is data-icon, which gives you a lot of default icons. You may also reduce its size using data-inline=”true”.
  • data-theme=”a/b/c/d/e”: Define color scheme used for elements.

Let’s wrap up all those attributes in a simple 2-page linking. Output:

Second page:

Code:

<!DOCTYPE html>
<html>
<head>
	<title>Starter page</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
	<div data-role="page" id="home" data-theme="b">
		<div data-role="header">
			<h1>Header</h1>
		</div>
		<div data-role="content">
			<p>Lorem ipsum</p>
			 <p><a href="#second" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right">Second page</a></p>
		</div>
		<div data-role="footer">
			<h4>Footer</h4>
		</div>
	</div>
	<div data-role="page" id="second">
		<div data-role="header">
			<h1>Header second page</h1>
		</div>
		<div data-role="content">
			<p>I'm second page!</p>
		</div>
		<div data-role="footer">
			<h4>Footer second page</h4>
		</div>
	</div>
</body>
</html>

Navigation, Lists, Form & Dialog Components


Then we have a bunch of other default components that are easily implemented with jQuery Mobile:

  • data-role=”navbar”: Used to create menus. Then you should place a ul item with li’s and a’s (BTW, that’s the way you should create menus, always)
  • data-role=”listview” + data-filter=”true” : Awesomely easy way to create searchable lists. Really useful!
  • data-role=”fieldcontain”: This is a container for form elements
  • select  data-native-menu=”false”: creates a cool select element as “floating” element instead of default select which stole half of screen area
  • select  data-role=”slider”: Creates a “on / off” slider, useful for options pages
  • input type=email, tel, number, url..: accepts any HTML5 data format, and adjust keyboard to better fit data type
  • input type=range: same as before, but this one uses new HTML format and creates an actual slider, good for numbers range inputs
  • data-rel=”dialog”: is an anchor attribute that makes target page opens as dialog box.
  • data-add-back-btn=”true”: add this attribute to your page and you’ll have a “back” button. Cool, huh?

Now we’ll edit our demo file a little bit. It’ll be 4 pages now:

  • Home screen will have a dialog box
  • Form elements page will use all we have mentioned
  • List page will have a searchable list so you can try it
  • Alert page has target content when user clicks the alert link

Previews:

Alert page:

Form page:

Lists page:

<!DOCTYPE html>
<html>
<head>
	<title>Starter page - 1stWebDesigner.com</title>
	<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
	<div data-role="page" id="home" data-add-back-btn="true">
		<div data-role="header">
			<h1>Alert element</h1>
		</div>
		<div data-role="content">
			<p><a href="#alert" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-theme="b" data-rel="dialog">Open alert</a></p>
		</div>
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form Elements</a></li>
					<li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="form" data-add-back-btn="true">
		<div data-role="header">
			<h1>Form elements</h1>
		</div>
		<div data-role="content">
			<div data-role="fieldcontain">
				<label for="name" class="select">Choose:</label>
				<select id="name" name="select" data-native-menu="false">
					<option value="value1">option1</option>
					<option value="value2">option2</option>
					<option value="value3">option3</option>
				</select>

				<label for="slider">Select slider:</label>
				<select name="slider" id="slider" data-role="slider">
					<option value="off">Off</option>
					<option value="on">On</option>
				</select>

				<label for="slider">Input slider:</label>
				<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />

				<label for="email">Email Input:</label>
				<input type="email" id="email" name="email" value=""  />

				<label for="num">Number Input:</label>
				<input type="number" id="num" name="num" value=""  />
			</div>
		</div>
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li>
					<li><a href="#list" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">List element</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="list" data-add-back-btn="true">
		<div data-role="header">
			<h1>This is a list</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" data-filter="true">
				<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				<li>Aliquam vitae leo metus, quis suscipit nulla.</li>
				<li>Maecenas accumsan urna sit amet justo commodo accumsan.</li>
				<li>Nulla vitae lacus augue, vel eleifend tellus.</li>
				<li>Integer at ligula turpis, at fermentum nisl.</li>
				<li>Nam dapibus risus at massa sagittis egestas.</li>
				<li>Praesent hendrerit purus vitae enim faucibus tincidunt.</li>
				<li>Curabitur sit amet lectus neque, id facilisis elit.</li>
			</ul>
		</div>
		<div data-role="footer">
			<div data-role="navbar">
				<ul>
					<li><a href="#home" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Home</a></li>
					<li><a href="#form" data-role="button" data-transition="fade" data-icon="arrow-r" data-iconpos="right" data-inline="true">Form element</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="alert" data-add-back-btn="true">
		<div data-role="header">
			<h1>Alert!</h1>
		</div>
		<div data-role="content">
			<p>I'm alert page!</p>
		</div>
	</div>
</body>
</html>

Custom font embedding


Probably no method will beat @font-face. So I suggest you go to Font Squirrel and generate your font files.

Compress images


You should do this all the time, actually. But when you are designing for the mobile world, even a few kb’s makes big difference. So save your user’s bandwidth and compress not only your code, but all your images.

JPEG mini has the best compressing service I’ve ever seen, and it’s quite easy to use, you should give it a try!

Remove components


We talked about just a few of many jQuery Mobile’s components. So it’s more likely you won’t be using them all.

The good news is that you can easily remove them, by making your own build :)

Now it’s your turn?


So, how are you planning to use jQuery Mobile? Have another cool tip to share? Don’t be shy and comment!

November 16 2011

10:00

A Basic Guide To Choosing Colors For The Mobile Web

The rules for mobile design and mobile SEO aren’t completely different from the rules applicable to desktop sites but it is all the minor differences that make a designer’s life hard. These differences are present in all aspects of mobile design and the process of choosing the colors for your mobile site isn’t an exception.

Reuse Your Desktop Color Palette

When I say that the process of choosing the colors for your mobile site is different, don’t take it that it has nothing to do with the standard process you know from desktop sites. In fact, you seldom have to start from scratch but instead reuse your desktop color palette. This might seem like a lazy approach but in fact it is much superior in almost every aspect to choosing your colors from scratch.

For instance, if you want to ensure consistency between your mobile site and its desktop counterpart, the best you can do is use a stripped down version of the color palette of your desktop site. All you have to do is remove the colors for the site components you won’t be using on your mobile site, make sure that they display well on your target mobile devices (you might need to replace some of the colors, if they are too fancy to use on a mobile or if the contrast is unsafely low), and you are ready to go.

However, it is also totally acceptable to start your mobile site from scratch rather than make it a stripped down version of your main site. The most common case for this is when your mobile site has a very different functionality from your desktop site. Of course, even in this case you can use a modified version of the color palette from your main site but if due to various reasons this is not possible, you need to create your separate mobile color scheme.

In any case, when you choose the colors for your mobile website, the technical limitations of mobile devices are a very important consideration to keep in mind.

Keep in Mind the Technical Limitations of Mobile Devices

Mobile devices get more and more powerful day by day but still in terms of technical abilities, they are far behind contemporary PC displays. For instance, mobiles with monochrome displays are almost history, though you can occasionally find people who use them. You might laugh at the idea to design with these devices in mind but the USE_OF_COLOR Human Test (“Browse the page in a monochrome environment.”) by the W3C recommends them as the ultimate test of how readable your colors are. This is not an exaggeration because some of the technical limitations of mobiles (and the environment you use them in) basically take away from you many of the advanced color options desktop displays award you with.

Image from Wikipedia

Color Depth Dictates Fewer Colors

One of the main characteristics of mobiles to take into account is their color depth. Technology is improving rapidly but still even the best models today have relatively low color depth. Low color depth, such as 8 or 16 bits means that a device is capable of displaying 256 and 65,536 shades of red, green, and blue, respectively, which is far from enough.

It is true that mobile displays are constantly increasing their color depth but there is still a lot of room for improvement. For instance, this article (though a bit old) gives an idea of what color depths some of the major brands on the market today offer. For a more detailed look at color depth, check this white paper.

Therefore, if you want to make the colors of your mobile site user-friendly, use as few colors as possible. It is better to stick to main colors and avoid the use of fancy ones because the risk of them not being displayed properly is higher. Additionally, because of the small mobile screens, you simply don’t have much space for lots of tiny squares all in different colors, which further forces you to use a palette with fewer colors.

Brightness and Contrast Settings Demand High Contrast Schemes

In addition to color depth limitations, you also need to consider brightness and contrast settings. The levels you see on specifications might sound decent but they can be misleading because they don’t take (and can’t take) into account the actual viewing environment. For instance, a very common use of a mobile is in the brightness of daylight, when the perceived brightness and contrast are much lower than the ones stated by the manufacturer. You can’t make your visitors browse your site only in the dark of the night to see it in its full glory, right?

What is more, many users keep the brightness and contrast settings low on purpose to conserve energy. All these mean that your site will be viewed with less brightness and contrast. To counterbalance, you need to use really high contrast color schemes. You can use a contrast analyzer to check how you fare.

Be Careful with Gradients and Background Images

If you use a lot of gradients in your designs (as I do), you need to be even more careful. Gradients are cool, but really only on a desktop. On a mobile, a user can see gradients even when they are not present – he or she just needs to bend the device a little, and voila, here is a gradient that you didn’t include in your design. Of course, this doesn’t mean you must kick gradients completely out of your mobile repertoire but if you minimize their use, this won’t be a mistake.

Backgrounds pose a similar problem. The same background might be perfectly legible on a desktop but on a mobile it might be impossible to read the text. It is your task to make sure this doesn’t happen.

Don’t Rely on Colors to Convey Meaning

Even with desktop design, it is not good to rely on colors to convey information – every usability expert will tell you this. However, this is true for mobile designs and even W3C has included it in its Mobile Web Best Practices.

Time to Get the Color Scheme Ready

Image by Wikipedia

When you get to the very task of choosing the color scheme for your mobile site, you need to take into account the meaning of colors and the right color combinations to use. Even if you plan to reuse your desktop color palette, it won’t hurt to see if a better alternative is available and try using a color scheme generator. These also help when you are stuck and have no idea which colors to use, or if you simply want to speed the process. You might not like every scheme the generator offers you but often the suggestions are at least decent and with some minor modifications (i.e. replace the colors in the scheme you don’t like with other colors you find more suitable), you are done.

Examples of Mobile Sites – Great, Good, Bad, and So-So

1. Weather Underground - a great site with clean design visible on any screen

2. Craigslist- boring to look at but really useful, very minimal, as the site itself, doesn’t waste my bandwidth with useless imagery.

3. Gmail – clean and easy to use.

4. Flickr – if they didn’t use the colors from the main site, the contrast could have been better but still it is OK.

5. Walmart – clean interface, though the text color is a bit light.

6. McDonald’s – the logo is rather pale, occupies a lot of space on the screen, but when you scroll down, things get better.

7. Digg – rather pale, difficult to read.

8. Bloomberg – again, could have had more contrast but not bad as a whole.

9. US magazine – the colors don’t have enough contrast, blurred and hard to read.

10. AztekWeb – gradient + low contrast + scrolling + light text on a dark background, though it probably could have been worse.

If you are familiar with color theory and if you have experience in designing desktop sites, you won’t find it difficult to come up with good color schemes for your mobile site. In fact, thanks to the specifics of mobile sites and the fact that all equal you need fewer colors, you might find it easier to design mobile color schemes than desktop ones.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl