designerbooster » Mobile Content

Responsive Web Design

designerbooster — Fri, 23 Mar 2012 08:37:01 +0000

This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices.

The Challenge

Let’s start our journey by looking at these online tools:

Those pages let people check websites through a set of pre-built views based on various device sizes or orientations. Bricss goes one step further as it allows you to "customize" viewports by setting any dimensions you want. Now check the-great-tablet-flood of 2011. Do you get my drift? Trying to check layouts against specific sets of dimensions is a losing battle. Besides, using existing devices to set break-points is not what I’d call a "future proof" approach, as there is no for standard sizes or ratios. I don’t want to go the "consider it to be harmful" route, but I want to point out that tools like these, or articles promoting a device approach (i.e. Device Diagram for Responsive Design Planning), make people focus on the wrong end of the problem, reinforcing the idea that responsive is all about devices. To me, it seems more realistic to check our layouts through viewports of arbitrary dimensions and shapes. We don’t need anything fancy, we can simply drag the bottom right corner of our favorite desktop browser to enter: “Device Agnostic Mode”.

The Goal

The goal is to surface content, to style boxes as columns so they bring sections above the fold. The question is: when should we bring a box "up"?

Content Is King!

If we consider that content is king, then it makes sense to look at it as the corner stone of the solution. In other words, we should set break-points according to content instead of devices.

The Principle

The content of a box dictates its width. It is the minimum width of adjacent containers that create break points (a size at which we can display boxes next to each other). Decisions are made keeping these points in mind:

The width of a box should be as small or as wide as possible without impairing readability.
The max-width of a box should take into consideration the importance of following boxes. This is because the wider the box, the wider the viewport must be to reveal subsequent boxes.
The goal is not to bring everything above the fold (we don’t want to fill the viewport with clutter).

In Practice

Markup

For this exercise, we will consider 5 main blocks:

The wrapper will allow us to:

mix percentages and pixels to style boxes on the same row
set a maximum width for a group of boxes

CSS

To build our grid we will rely on display:inline-block mainly for horizontal alignment and inline flow. But note that this choice also gives us an extra edge to play with (more on this later). Also note that we will override this styling with float to achieve some specific layouts.

    body {
        margin:auto;            /* you'll see why later */
        text-align:center;      /* to center align grid boxes */
        letter-spacing: -0.31em;/* webkit: collapse white-space between units */
        *letter-spacing: normal;/* reset IE < 8 */
        word-spacing: -0.43em;  /* IE < 8 && gecko: collapse white-space between units */
    }
    .grid-block {
        letter-spacing: normal; /* reset */
        word-spacing: normal;   /* reset */
        text-align:left;        /* reset */
        display:inline-block;   /* styling all grid-wrapper as inline blocks */
        vertical-align:top;     /* aligning those boxes at the top */
        *display:inline;        /* IE hack to mimic inline-block */
        zoom:1;                 /* part of the above hack for IE */
        width:100%;             /* boxes would shrink-wrap */
    }

    /**
     * rules below are meant to paint the boxes
     */

    .grid-block {
        height: 150px;
    }
    #header {
        background: #d6cac1;
    }
    #main {
        background: #ad9684;
    }
    #complementary {
        background: #7a6351;
    }
    #aside {
        background: #000000;
    }
    #contentinfo {
        background: #3d3128;
    }

This produces a bunch of rows.

Content-Driven Process

We define the width of each box according to its content. These values will then be used to set breakpoints. Note that the values below take into consideration a 10px gutter between columns.

Header: content: logo, navigation, search box; type: banner; minimum width: n/a; maximum width: n/a
Main: content: diverse (article, blog entry, comments, etc.); type: main box that holds the meat of the page; minimum width: 420px [1]; maximum width: 550px [1]
Complementary: content: directory entries, tweets, etc.; type: multi-line text box with media; minimum width: 280px; maximum width: 380px
Aside: content: Ads; type: 230px wide images; fixed width: 250px or 490px (2 ads side by side)
Contentinfo: content: resources, blog roll, etc.; type: lists of links; minimum width: 220px; maximum width: 280px

The minimum and maximum widths above only come into play when the box is displayed as a column.

Breakpoints

The width of the containers establishes our breakpoints. Breakpoints are viewport's widths at which we decide to display a box as a column (instead of a row).

How Do We "Pick" Breakpoints?

Until we are able to use something like grid layout, we are pretty much stuck with the HTML flow, and thus should rearrange boxes while respecting their source order. So we go down our list, and based on the minimum width values, we create various combinations. The values below show widths at which we rearrange the layout, styling rows as columns, or changing the width of a specific column.

470px

header
Main
Complementary
Aside (250) + Contentinfo (220)

530px

header
Main
Complementary (280) + Aside (250)
Contentinfo

700px

header
Main (420) + Complementary (280)
Aside
Contentinfo

or:

header
Main (420) + Complementary (280)
Aside + Contentinfo

950px

Main (420) + Complementary (280) + Aside (250)
Contentinfo

1170px

Main (420) + Complementary (280) + Aside (250) + Contentinfo (220)

1190px

Main (420) + Complementary (280) + Aside (490)
Contentinfo

1410px

Head (240) Main (420) + Complementary (280) + Aside (250) + Contentinfo (220)

All of the above are potential breakpoints — each value could be used to create different layouts for the page. But is that something we should automatically do? I think not. At least not without considering these two points: How close are the breakpoints? We have 2 that are 20 pixels apart (1170px and 1190px); should we set both of them or should we drop one? I think that above 900px, chances are that desktop users may easily trigger a re-flow in that range, so I would not implement both. In other words, I think it's okay to go with close breakpoints if the values are below 800px — as there is less chance to confuse users when they resize their browser window. Should we try to create as many columns as we can? Bringing more ads above the fold may make more sense than bringing up a list of links that you'd generally keep buried in your footer. Also, you may choose to give more breathing room to your main content before bringing up boxes that the user does not really care for.

Getting Ready for Media Queries

For the purpose of this article, we'll use every single one of our breakpoints to create a new layout, which should also demonstrate that it is not necessarily a good idea.

/**
 * 470
 */
@media only screen and (min-width: 470px) and (max-width: 529px) {
    #aside {
        width: 250px;
        float: left;
    }
    #contentinfo {
        display: block;
        width: auto;
        overflow: hidden;
    }
}

/**
 * 530
 */
@media only screen and (min-width: 530px) and (max-width: 699px) {
    #wrapper {
        display:block;
        margin: auto;
        max-width: 550px; /* see comment below */
    }
    #complementary {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 250px;
        margin-right: -250px;
    }
    #aside {
        width: 250px;
    }
}

/**
 * 700
 */
@media only screen and (min-width: 700px) and (max-width: 949px) {
    #wrapper {
        display:block;
        margin: auto;
        max-width: 830px; /* see comment below */
    }
    #main {
        float: left;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 280px;
        margin-right: -280px;
        height: 300px;
    }
    #aside,
    #complementary {
        float: right;
        width: 280px;
    }
    #contentinfo {
        clear: both;
    }
}

/**
 * 950
 */
@media only screen and (min-width: 950px) and (max-width: 1169px) {
    #wrapper {
        display:block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 250px;
        margin: auto;
    }
    #main {
        width: 60%;
    }
    #complementary {
        width: 40%;
    }
    #aside {
        width: 250px;
        margin-right: -250px;
    }
}

/**
 * 1170
 */
@media only screen and (min-width: 1170px) and (max-width: 1189px) {

    #main,
    #complementary,
    #aside,
    #contentinfo {
        float: left; /* display:inline here leads to rounding errors */
    }
    #main {
        width: 36%;
    }
    #complementary {
        width: 24%;
    }
    #aside {
        width: 21%;
    }
    #contentinfo {
        width: 19%;
    }
}

/**
 * 1190
 */
@media only screen and (min-width: 1190px) and (max-width: 1409px) {
    #wrapper {
        display:block;
        box-sizing: border-box;
        padding-right: 490px;
        margin: auto;
    }
    #main {
        width: 60%;
    }
    #complementary {
        width: 40%;
    }
    #aside {
        width: 490px;
        margin-right: -490px;
    }
}

/**
 * 1410
 */
@media only screen and (min-width: 1410px) {
    body {
        max-width: 1740px;
    }
    #wrapper {
        float: left;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width:100%;
        padding-left: 17%;
        padding-right: 16%;
        margin-right: -16%;
        border-right: solid 250px transparent;
    }
    #header {
        float: left;
        width:17%;
        margin-right: -17%;
    }
    #main {
        width: 60%;
    }
    #complementary {
        width: 40%;
    }
    #aside {
        width: 250px;
        margin-right: -250px;
    }
    #contentinfo {
        width: 16%;
    }
}

For the 530px and 700px breakpoints, there is a design choice to make. Without a max-width, we'd get everything flush, but the main box (#main) would be larger than the maximum width we originally set.

Demo

The last thing to do is to create a layout to cater for IE6/7/8, as these browsers will ignore the media queries. To do so, we can use a Conditional Comment:

Conclusion

Not once in this article I referenced the width of a device, be it an iPad, a Xoom, or something else. Building a "content-aware grid" is a simple matter of choosing the "layout patterns" that you want, based on breakpoints that you set according to page content. After I sent this piece to Smashing Magazine, I ran into Smashing Magazine Feed

QR Codes and Microsoft Tags: New Promotion Generation

designerbooster — Tue, 13 Mar 2012 02:37:10 +0000

QR Codes are the latest cutting edge technique for linking the consumer of a traditional product to the digital world. They are a new way of spreading messages, improved by all those advantages and flexibility which Internet can offer. QR codes work in a variety of ways, including pointing people directly to a website just using a smartphone camera to scan the code. That’s why they can be considered a brand new and useful tool for promoting business and meeting potential clients. Microsoft has decided to be part of the business establishing different rules. That’s why it has come out with its own proprietary format of advanced coding: Microsoft Tags. Where are the differences between them? Which advantages for your business? Which the more suitable and appealing solution for graphic industry? This is what we are going to understand with this article.

More about QR Codes

QR codes (abbreviated from Quick Response code)are the equivalent of the more common barcodes. Where barcodes have just one dimension, QR codes are bi-dimensional and can contain much more information. They need just a reader installed on mobile phone equipped with a camera. The image is scanned and the reader decodes the information. Data are delivered in the easiest possible way. Barcodes found in the past their wide use in the packaging industry to identify products in stock. QR Codes are far more than this. They can be used for connecting people in the real world, made of advertising, packaging and printed stuffs, to a virtual reality, where you find vCards instead of business cards, websitesfor brochures and product cards for packaging descriptions. As well as barcodes, QR Codes can be easily scanned. They don’t need dedicated hardware, just a camera and a reader application specific for the code. Most of the readersare free and, at the end of this article, you fill find a list of links and other resources which worth a visit. QR code data capacity

Numeric only: Max. 7,089 characters
Alphanumeric : Max. 4,296 characters
Binary (8 bits) Max. 2,953 bytes
Kanji/Kana Max. 1,817 characters Source

QR codes may be used to display:

Free text to quick inform the occasional reader about, product details, special offers, upcoming events, competition rules, coupon based promotions
vCard, format file for business card to easy share contact details and social identity such as LinkedIn or Twitter account
URL to promote business or personal links

Displaying them printed on magazine or advertising you provide interactive contents to the reader. QR Codes have not been developed to be attractive. They usually are monochromatic, using black and white fuzzy graphic. Anyway, with a good creative approach their appearance can be greatly improved, using different colors, by incepting image in the code and using background blending techniques. You only need to bear in mind some basic guidelines that we will see later in the article.

More about Microsoft Tags

Since 2D barcodes have not been standardized, Microsoft has created its own reply to the QR Codes: Microsoft Tags. MS Tag uses a Microsoft patented technology called HCCB (High Capacity Color Barcode) which, as the name suggests, allows the use of the basic CMYK colors. As well as QR Code, Microsoft Tag supports four basic content types: URLs, free text, vCards and a dialer.

URL: You can encode any URL, but, since Microsoft actually manages your encoded data, it also can exclude those URLs which are in Microsoft’s blacklist.
Free text: tags can encode up to 1000 characters. Optionally you can also choose a password to protect your contents.
vCard: You can upload contact info by typing the information into a form. A password is optional.
Dialer: You can auto-dial a phone number. Password is optional.

Tags are powerful tools for temporary guerrilla marketing and promo code campaigns. You can also specify an expiry date for the promotion. The information Tag shared can be re-edited without recreate the image from scratch. This could be possible because of the unique info encoded is an ID containing a link which points to a server. This automatically reply with the required information there stored. This point requires further explanation. When you sign in for MS Tag account you get access to you Tags Manager. Tags Manager not only allows you to create new tags and generate their image, set how long they will be active etc. As a matter of fact, it represents your tag content. That’s why users not only need a dedicated reader but also an Internet connection available in order to read a MS Tag. The differences between QR Codes and Microsoft Tags make the user confused in which platform should be better. The HCCB technology makes able to encode more number in a smaller area. That’s why MS Tag can have an extremely small footprint, handling the errors much better than QR Code. As a matter of fact, MS Tags encode less information than QR Codes. Less data means less error where more data means a larger amount of information to decode and more error may occur. The platform supports three basic visual display modes: triangle, points or even custom tags which, anyway, must be done by following precise guidelines. If you look at these guidelines they may look a bit complicated but they ensure you a great flexibility in your tag creation. If you choose to use dots, you can even add a custom photo-realistic image as background.

Graphic and Marketing Industry Uses

QR Codes have been on the run since several years now, whereas Microsoft Tags are a recent creation. By the way, they have recently known an increment in their application, becoming more widely used in marketing campaign. Communication and marketing experts have integrated them into both traditional and interactive campaigns. This has provided a new frontier in the customer’s behavior analysis. Let’s see what they are useful for.

Call-to-Action and Marketing Campaign Tools

QR codes and MS Tags are offering endless marketing opportunities. Today, with the remarkable growth of mobile and smart phones, this potential can be easily implemented. Use them as call-to-action tool to give direct access to your web site, software or promotions. Add them to your print campaign, magazine ads or even on your business card and let your content instantly available on mobile devices. Your reader just need to scan the squared image and info will be ready to be used or stored. Pay attention and remember that MS Tags need an active connection to be run, whereas QR Code can be also used offline. This is obvious since, as we said, MS tag actually doesn’t contain any real information except for an ID which points to the real data stored in the MS Servers. Clearly this is a disadvantage on the side of the privacy issue. On the other hand, for the same reasons, they are a powerful marketing analysis tools. MS servers elaborate the requests returning you a report. Data provide detailed metrics like geo-location, repeat scans and demographics info. The same is also possible by using QR-Code but the analytics collected depends on the reader app used for scanning. Since Microsoft Tag official website only provides the appropriate MS Tag reader they have much more control on the data acquired, which make, in this case, MS Tags more effective. You’ll be able to make an accurate campaign effectiveness measurement of the response rates. Creating a unique URL for a specific code campaign you can measure the response rates with a high degree of precisions. This helps the ROI (return on investment) calculation and allows better allocating marketing budgets for future campaigns.

Business Cards, Printed Literature and Web Identities

You can also take advantage from 2D Codes use adding them to your own business cards. In this way you will address your personal details to potential clients, customers or employers directing them all data in a quick and easy scan. Your vCard will be instantly recognized and stored in their devices, available for future contacts. Brochures are another ideal application for 2D codes. Trade shows are probably one of the best places to distribute marketing literature with QR Codes. Just think about how many people, walking around the booths and having a smart-phone in their hand, pick up your brochure and scan you Company contacts. Recently QR-Codes and MS Tags have also been integrated on company websites,personal portfolios and micro-social identities (such as Twitter backgrounds). As we already seen for business cards, you add a code which points out to your digital identity, making the link easy to be stored on the phone.

Other Places Where They Can Be Displayed

2D Codes can be printed or displayed on a variety of mediums including newspapers, magazines, packaging, posters, plasma/LCD screens, billboards, T-shirts mugs and other gadgets Is clear what kind of powerful promotional tool they are.

Great Use Example: Tesco at the Korean Market

Tesco Home Plus is a supermarket chain in Korea which was determined to become grocery number 1. Despite of its main competitor E-Mart had more store they tried a new and innovative way to increase their popularity and customers without increase the number of stores as well. The video will show you how they applied an extremely creative and strong campaign which heavily involves QR-Codes use. Tesco set up several virtual grocery stores decorating subway/metro stations with posters that completely cover the wall and resemble the aisles and shelves of a supermarket. Each represented product was equipped with a QR-Code. Customer simply scan the products adding them to a shopping list while they are waiting for the metro, pay the virtual cart with credit card and their groceries are then delivered to home. It is a true and innovative way of thinking the everyday life, people will be buying food based on photo and description appeared on their mobile display.

What you need to know to create your own 2D Code

There are several free sites you can use to create your QR Codes. As said, only Microsoft provides MS Tags creator. There are few rules to follow to create a QR Code and customize it, several others that need to bear in mind in order to create MS Tags. It should be admitted that Microsoft provides a huge amount of, more or less, clear documentation, samples and guides, to properly implement your own MS Tag. You can retrieve all of them by following this link to the resources available on the official site.

QR CODES Creation Rules

Here following some tips which should help you in creating your QR Code making it widely compatible and readable from most handsets:

Colors: the best is using black on white background. Do not invert the QR Code design and colors because this will make it unreadable. If you want to customize it then choose strong contrast and make sure that you are using a dark color instead of the black and a light color instead of the white.
Space: you need to keep at least 4 mm of white space surrounding the code to make clear to the device where its bounds are.
Ratio: if you resize the code don’t use any interpolation nor change the size ratio. If you shrink or squeeze your code it can’t be read.
Size: the more is the content, the bigger should be the size. Code size need to expand accordingly with the number of information contained.
Usability: few rules of usability should be applied. For example remember to use the international format for phone numbers (i.e. +39 for Italy, +44 for the UK, +1 for the US etc). Make sure that any URL points to a mobile friendly content.
Compatibility: there is a huge number of handsets on the market and each of them have is own camera which different acquiring and correction mode. Test as many handsets, readers and encoders you can and find the most suitable for your content. Testing increase its importance if you customize the code with creative graphics and colors.
Design: be creative and try to integrate your code with other elements of the poster or the main artwork. This will help you to reflect your brand identity. Match the colors or include it inside other shapes. Incorporate your logo. Custom codes need to be printed larger than standard one to increase the error correction possibilities of the reader. Usually readers are able to correct up to the 30% of the code. Avoid exceeding this percentage when you customize the code.

MS Tags Creation Rules

General rules are the same of those that we have seen for QR Codes. Size can be scaled but not squeezed or shrunk. The black and white Tag border is part of the Tag and it must not be customized or changed in any way. The official guidelines said: To provide a wide variety of branding and creative opportunities, Tags are customizable. You can modify how a Tag looks to suit your individual and business goals. The “Quick and Easy” approach lets you customize Tags by using dots instead of triangles and replacing the background with an image, as shown: Using the “Advanced Design” approach, you can create more intricate designs by integrating symbols into the design concept, as shown: The official guide is highly detailed and also contains a short tutorial on how to customize your code using Adobe Illustrator and on how to disguise the original code dots inside an personal artwork and let it still working. For more details I invite you to carefully read Microsoft Tag Implementation Guide. How to ensure your Tag works properly.

Key differences between QR Code and Microsoft Tag

Here below two tables which compare the main Pro and Cons of QR Code and Microsoft Tag.

QR Code PRO and CONS

Feature	Pro	Cons
W/B colors	-	Not really attractive but can be customized
History	High compatibility with a wide range of handsets and devices	-
	Appealing and visual based	Less supported
The content is self-contained	Can be used offline	If you change something in the content you have to print the render again

MS TAG PRO and CONS

Feature	Pro	Cons
CMYK colors	More attractive	More expensive to be printed
Small footprint	Less invasive, more info in smaller area to cover	Not really useful, particularly if displayed on screen, posters or billboards
New technology	Appealing and visual based	Less supported
The content is on MS servers	More detailed metrics You can change the content whenever you want without need to print the render again.	- No offline use is possible - Lower user privacy protection - You need a live connection

A great and clear article about the key differences between these two 2D code platforms is that written by Tamir Khason, titled Microsoft Tag vs. QR tag.

Resources

QR Code Resources

QR Code Generators

Beqrious (also allows to put images inside the code)
QR Stuff
Kaywa
Qurify
QR Planet

QR Code Marketing Tools

Some Example of QR Code Creative Use

Microsoft Tag Resources

Example of Microsoft Tag Creative Use

Creative Mobile Barcodes

Conclusion

During the last few years 2D Codes have seen an increase in their useas marketing tools, and have been integrated into both traditional and interactive campaigns. They are useful to manage the customers experience establishing immediate contact with them. We can talk endlessly about the differences but everything at the end is reduced to individual opinions and preferences. Personally I still prefer QR Codes for a bunch of reasons. Firstly you don’t need to be connected to Internet to use de code. This means that a plain text or a vCard can be received and saved without being online. This brings me to my second reason. I’m the only proprietary of my information and they are not stored in a remote, even the most secure of the World, server. I know I have to accept a less eye catching graphic but I can consider this as a point of start to work on. We have seen that also QR Codes allow appealing images; it just needs to be creative. After all we are the right people for the job. What do you think about? Have you ever included QR Codes or Microsoft Tag in some of your works? Which feedback have you received? Let’s share our stories together! instantShift

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

designerbooster — Thu, 08 Mar 2012 20:46:46 +0000

With an increase in the number, diversity and complexity of smartphones, more and more companies want to have their own mobile app, but creating a native app can be pretty expensive. It requires special skills, as well as special coding tools, and then there is also the need to build an app per platform (Android, iOs, BlackBerry, Windows Phone, etc). All of this figures in to a higher price tag for the app development. Another solution for developers is then to create something called web-apps: HTML CSS apps, which users can access from their browsers. They are cross-platform, and cross device. The jQuery framework has been around the web for a while now, but the jQuery base technology was basically designed for browser apps. jQuery Mobile is a framework based on jQuery that enables web designers to create web-apps that are optimized for use on a mobile device (Smartphone and tablets). The framework is touch optimized, uses responsive layout so that elements will automatically adapt on different device sizes, and supports a range of different platforms and devices. In this jQuery Mobile tutorial, we will create a nice demo app from scratch, to show some of the things that can be easily done using this powerful tool. Before we start, you might want to download the files, or see a demo, or flash the qrcode for a direct demo on your mobile :

The Concept of the Mini App: Restaurant Picker

We will create an application that will enable the user to choose a restaurant based on what they want to eat tonight, the town where they want to eat and other user’s ratings of the restaurants. The jQuery Mobile mini app we’re creating will be called “Restaurant Picker”. Please note that this is only the front development, you will of course need a server and a database if you want to create a real app. Also note that jQuery Mobile uses Ajax navigation, so you’ll need to put the files either on a local server (xampp, mamp, etc) or on a real server to make the demo work properly.

Wireframing Our Application.

In order to see where we are going, we will first draw some wireframes to see what each screen of the app will look like.

Home Screen : Choose a Plate

On the first screen we will put the logo of our application. We will then give the user a choice between different plates. Each choice comes with an image illustrating the plate, and each is a link that will lead to the second page where the user can choose the town.

Choose a Town

On the second screen, the user can choose the town where they want to eat. The towns are displayed in a list of clickable items. Beside each town there is a bubble that gives the user the number of restaurants available for the chosen plate in this town. Since the list of towns can be pretty long, we will provide a filter so that the user can quickly search for a town at the end of the list. The title bar will use the branding of the application, and a “back” button that user can click to go back to the previous step. When the user clicks on a town, they are lead to the page where they can choose a restaurant.

Choose a Restaurant

The user can now choose in which restaurant he wants to eat. The application displays a list of restaurant with a little image, the name, and the number of rating stars the previous users gave to this restaurant. The title bar will use the branding of the application, and a “back” button that user can click to go back to previous step. The user can then click on a specific restaurant, to see the details.

Restaurant Details

The restaurant’s details view is composed of three parts: restaurant details, contact details, and the establishment’s user rating. The restaurant details will display a short description of the restaurant, some plates, a picture and a link to their website if they have one. The contact details will display the address of the restaurant, and an image of a Google map that will locate the restaurant in the town. A link enables the user to open Google maps (either using the browser or the Google map app if available depending on the device) to locate the restaurant on the map. Another link will dial the restaurant phone number directly on the mobile device so that user can place a reservation. The last part of this view is a select box, where the user can rate the restaurant.

Building the web-application base

Now that we’ve see the direction that we are heading, we can begin digging a little bit into the code.

Some jQuery Mobile Basics

First let’s take a look at what the header of our first HTML page will look like :









Restaurant Picker

The first thing to notice is the “new” HTML5 doctype. jQuery Mobile makes a heavy use of the data- HTML5 attribute to add some elements in the DOM to style the page, so we will need an HTML5 doctype to make it all work nicely. The second thing to notice is the meta name=viewport tag. We will use this meta tag to gain better control of our viewport. Without this tag, the browser will squeeze our layout in the whole page, and it will look ugly and very tiny. With width=device-width we will use our device width, making the app fit the whole size of the device without being squeezed. The initial-scale property controls the zoom level when the page is first loaded and we will set it to 1, meaning no zoom in or out when page is loaded. Then we will call our CSS files. In older jQuery Mobile versions the CSS was in one file, but in the newer version they made a distinction between the structure and the actual design (colors, gradients etc) which makes it easier to create custom styles. We then need to load our jQuery, and jQuery Mobile JavaScript code at the end, since it needs the jQuery library to work.

What You’d Like to Eat: First Page

Now let’s take a look at the HTML code of our first page, in this exercise we will call this page index.HTML









Restaurant Picker 





 What would you'd like to eat? 



   Some Sushis

   A Pizza 

   A Kebap

   A Burger

   Some Nems 

   Something more traditional

jQuery Mobile makes the distinction between HTML documents and pages. A jQuery Mobile app can be composed of one HTML document with multiple pages in it, using the data-role=“page” attribute each page is linked using anchors; or of many documents, each one having its own data-role=”page” linked using “normal” links. In our case, we will go for creating one HTML document per page. So first we will open our body, and create our page using

We will then open a content division, in which we put the branding of the app, and our first title followed by the list of different plates. To create a jQuery Mobile list, we will put the data-role=”listview” attribute on our

that contains an link will be automatically converted in a link list item by jQuery Mobile. To add the image, we simply add an image inside our < a href> link, and jQuery Mobile will do the work for us: it will display it on the left part of the list. Pretty easy. The data-transition=”slidedown” creates the transition between two pages. You can find more transitions in the official documentation. Here is what our first page looks like:
In Which Town Do You Want To Eat: Second Page
We will name the second page choose_town.HTML . Here is the HTML code, explanation of the tricky parts follows. Note that the header won’t change.
```
 Restaurant Picker







 In which town do you want to eat? 



 Amiens  3  

 Bastia  2  

 Belfort  5  

 Bordeaux  1 

…
```
We changed the id, so that jQuery Mobile can understand that this is another page. Notice that we used the data-add-back-btn=”true” on the page div, this will enable the Ajax back navigation and automatically add a back button to our title bar. To create our title bar, we will create a div element, with the data-role=”header”. To add a filter to our list, we will simply put data-filter=”true” on the ul element defining the list. Note that this is a filter that will filter the items of the list, and is not a search bar. The last trick will be creating the little bubbles on the right of list elements, and we will do that by creating a span with the class and the numbers in it. And here is how the second page will look:
Choose a Restaurant: Third Page
We will name this page choose_restaurant.HTML and below is what the HTML code will look like.
```
 Restaurant Picker







 Please choose a restaurant.



   Le Mouffetard
  4 stars 

   Chocolate bar 
  4 stars 
 

   Restaurant Diona
  1 star 
 

   Tai Shan
  3 stars 
 

   Arcade
  2 stars 
 
```
This page is pretty similar to the first one, except for the title bar and the notation of the customer. We already saw how to create a title bar in previous section. For the customer rating, we add a p element with two classes: .classement is mutual to all the elements and will enable us to style this element with little stars, and then we use the class .one, .two, .three and .four to make the distinction between how many stars the customers gave to the restaurant. We will later in the article see how to style this in a nice way, but for the moment, we’ll leave it plain text. Here is our third page:
Restaurant Details: Fourth Page
This page called restaurant.HTML is the trickiest of all, mainly because it has lots of elements on it. We will split the code in three parts: the restaurant description, the contact details, and the user rating. Here is our full HTML code.
```
	
		 Restaurant Picker
	 

	
	
		
		 Le Mouffetard
		  Restaurant bar in the center of Strasbourg
		 On the menu: 
			
				 Milkshake with chocolat
				 Planchettes 
				 Leek pie 
			
		
		
		
		 See our website
		
	

	

	
		
		 Contact us
		30 Rue des Tonneliers
		 67000 Strasbourg	
		
		
		
		
	

	
		 Find us on Google Maps 
		 Call us 
	
	

	
	
	 User rating 
		
	
	
	
```
For the restaurant details, we used the build in two column elements of jQuery Mobile. To create a two column block, we create a block with two child blocks. To create a nice button for the website, we added the data-role=”button” to the a href element, and a rel=”external” so that jQuery Mobile knows that Ajax should not used to open this link, but that this is an external link. For the contact details, we once again used the two column trick. What’s to emphasize here are the buttons. The data-icon=”maps” and data-icon=”tel” will enable us to add custom icons to those buttons. The interesting part about adding a GoogleMap link, is that some mobiles will be able to detect it, and will ask the user if they want to open them using the browser; if the Google maps app is installed on the device. The other interesting part is the href=tel:0388161072 protocol. This won’t work on a classic browser, but Smartphones will be able to open this link in the phone dial box, to directly call the number. The last part is the user rating. For this we will use a simple select menu. The data-native-menu=”false” enables us to style the select using jQuery Mobile, so that we will be able to add some nice stars here too. Here again you will notice that we added the one, two, three, four class for further styling. And here we have a fully functional jQuery Mobile webapp. But this app looks very “JqueryMobile-like”, so we now have to give it a little more styling to make it look nicer.
Next up on Page Two: Adding Some Style
The tutorial is not quite finished yet! There is more to learn over on page two. Noupe

Getting the Most Out of QR Codes Using URI Schemes

designerbooster — Sat, 25 Feb 2012 20:39:57 +0000

Lately, everyone has been talking about the potential of the QR code. It has become the Internet’s equivalent of traditional barcodes (like those you’d find on physical goods at your favorite retail store). Someone can take a quick snapshot of a QR code with their smartphone and immediately have a website up and loaded, so we could print QR codes on paper and physical goods such as business cards, magazine ads and posters in order to lead people to our site. But, more often than not, web developers don’t use QR codes to their fullest potential. In this article, we’ll discuss a technique that will unlock the full potential of QR codes through URI schemes.

How QR Codes Work in a Nutshell

Let’s learn how the QR code mechanism actually works. QR codes, at their core, are specially generated images that work like barcodes. Certain commands (known as responses) are built in, and when a QR code is captured by a camera (usually one on a smartphone or tablet), the image of the QR code is processed and then the built-in response is carried out. A common QR code response is to open a certain website in a web browser on the device that captures the QR code. QR codes look like the above and contain information that can be captured by a camera and interpreted by a smartphone, tablet or computer.

QR-Code Readers

This is where things get interesting. QR-code readers — the apps that scan the codes and perform the actions — are not equal when it comes to functionality. Some are able to recognize QR codes and do all sorts of amazing things, and others can simply open URLs or display text. Most smartphones have the same set of basic features (address book, calendar, texting functionality, alerts and Internet browsing), and a good QR-code reader can cater to all of those. With low-functionality apps in the mix, though, URL-opening is likely the only reliable function that we can expect most QR-code readers will have. Here’s a list of features that QR-code readers are generally equipped with:

Displaying text
Setting up system alerts
Adding events to calendars
Opening URLs in a browser
Collecting contact information (including vCards)
Sending email
Sending text messages (SMS)
Geolocation
Calling other phones
Connecting to WiFi

The Idea: Using URI Schemes

Since browsers can already launch default email clients via a simple mailto URL (browsers have supported URI schemes like these for years), could the same technique be used to offer in-app functionality for other products that have non-native URI schemes and that a QR reader wouldn’t support by default? The answer is yes! If the application supported the scheme, and if the user had the app the QR represented installed, it would work beautifully — and it wouldn’t matter which QR-code-reader was used.

The Possibilities

Here’s a list of some cool things that are possible:

Launching native Apple apps (Mail, Phone, FaceTime, Text, Map, YouTube and iTunes)
Running JavaScript bookmarklets
Opening certain IM clients (Skype, AIM, MSN, GTalk, ICQ and Yahoo)
Opening special applications (IRC tools, feed readers, FTP clients and SVN repositories)
Opening any application that registers a URI scheme when it installs on a platform

What makes this particular technique so amazing is that it doesn’t rely on the QR-code reader being very advanced; all it needs is for the app creator (be it Skype, Evernote or Angry Birds) you want to launch and interface with to use the system development API to register a URI scheme. In the case of Apple, it’s the Cocoa Touch OpenURL method of the shared UIApplication object, and for other platforms (like Android), there will be an equivalent somewhere in the documentation. From scanner to browser to application — the possibilities are endless! Below is a list of some common non-http URI schemes:

Application	URI Scheme or Protocol	Query Strings
Default e-mail application	`mailto:?query`	`Subject`
		`CC`
		`BCC`
		`Body`
Default phone application	`tel:`	N/A
Default SMS application	`sms:`	N/A
Chat Room client	`irc://:query`	`port`
		`channel`
		`password`
Syndication feed reader	`feed:`	N/A
Apple FaceTime	`facetime:`	N/A
Skype client	`skype:?query`	`add`
		`call`
		`chat`
		`sendfile`
		`userinfo`
Google Talk client	`gtalk:query?`	`chat`
Google Talk client	`gtalk:query?`	`call`
Windows Live Messenger client	`msnim:query?`	`add`
		`chat`

voice videoYahoo! Messenger clientymsgr:query?sendimaddfriendsendfilecallcallPhonechatimcustomstatusgetimvAOL Instant Messenger clientaim:query?goimgoawayaddbuddy What does this mean for us? As it stands, there are actually quite a number of applications for the desktop (as well as mobile), which already use URI schemes. Take Skype, for instance. Do you want people to be able to capture a QR code that causes their phones to call you via Skype on their handsets? That can be done (at least on iOS) right now. It can also be used to run several native apps, launch JavaScript bookmarklets (perhaps including apps that run within browsers) and access the usual FTP and IRC protocols (if associated with something). Here are some useful links for developers:

Now that you know a bit more about QR codes and have gotten a brief overview of things you need to know to get started, I’ll outline the steps to the technique below. Note: The technique I’ll be describing below can even be used to execute JavaScript code, so under the wrong set of code-writing fingers, this could be exploited.

Step 1: Choose the Response You Want to Perform

First, decide what you’d like the QR code to accomplish. Obviously, you can use the regular QR-code generator stuff — like sending text messages to phones or sending emails — but let’s try something trickier. We’ll create a Skype QR code that will automatically launch the app and make a voice call to a Skype contact. (This will only work if the user that scans the QR code has Skype installed).

Step 2: Create a URL Using a URL-shortening Service

Many QR-code generators suffer from a particular problem: if you try to put a mailto or other non-http link into them, they sometimes think that an error occurred (this also affects some reader apps). This, of course, won’t get our Skype launcher anywhere near being cross-QR-code-reader-compatible, so we need another solution — and, luckily, a common one exists that can help get this URL into the browser (and help web developers monitor click stats too)! We’re going to use a URL-shortening service. These services are rarely fussy about what you insert into them, and they push out well-formed URLs with the HTTP header required for best-possible compatibility (most QR readers know how to open basic URLs). A URL-shortening service such as TinyURL will turn that unconventional URL into a generally acceptable one. For this QR, we’ll call the Skype contact named echo123 — this contact is the free voice-quality testing contact that Skype offers. For our URL-shortening service, I’ll use TinyURL, but you can use one of the many other URL-shortening services out there such as bitly, is.gd and so on. Just enter your chosen URI scheme into the shortener. This is the result of my TinyURL link conversion:

URL	`skype:echo123?call`
To	http://tinyurl.com/echo123skype

If you click on the URL above, you might see something like the following (if you’re using Google Chrome on Windows):

Step 3: Generate the QR Code

Now take that generated URL — which will actually work if you have the desktop version of Skype installed for Windows or Mac — and generate a working QR code from it. Check that the shortened URL works in your web browser; the link should launch Skype. There is an abundance of choice when it comes to ways of generating QR codes; free tools exist all over the Web. Below are a couple of free generators:

QR Stuff (online tool)
QREncoder (Mac App)

After you’ve generated your QR code, test it. Download one of the available applications for your mobile device (if you don’t already have one) and take a snapshot of the QR code you’ve produced. Below are some free QR-reader products for mobile platforms:

Scan (iOS)
QR Droid (Android)
QR Code Scanner Pro (Blackberry)

What should happen, if you followed the instructions correctly and if you’ve got the Skype app installed, is this:

Your QR code will be identified by the QR reader app
The QR reader app will notice that the QR code contains a URL (thus it will skip the compatibility quirks of the readers)
The TinyURL link will open in the default browser
It will redirect to the Skype-call URI scheme and launch Skype

Pretty amazing stuff for one clever image! The only thing left to do with your wonderful creation is to upload it to the Web (as I have with the finished example below). I recommend, as a best practice, that you consider providing a link to the URL being snapped in the QR image itself (for desktop users). Beyond that, you could spruce up your QR codes with a bit of color or some limited artwork if you’re feeling extra creative.

The Finished QR Code

The above QR code will call echo123 on Skype if you have the app installed.

Conclusion

The power of this technique rests in the opportunity it gives designers and developers. A URI scheme exists between app developers and the browsers that support them (luckily, that’s all of them!). Using a simple redirect (provided by you or a third party) and these already existing and well-supported features, you can launch applications, interact via query codes, execute JavaScript and do all sorts of wonderfully creative things. QR codes are being increasingly adopted and have never been more widely used. With this single technique you can break past most existing limitations. Six Revisions

The Popular Rise of Mobile Studios

designerbooster — Wed, 22 Feb 2012 08:43:04 +0000

Savvy tech consumers are slowly adapting to a world where smartphones and tablet PCs are commonplace. With these new devices comes a revolution of mobile software which we have never seen before. Mobile dev studios are popping up everywhere to showcase and market their latest app ideas. In this article I’d like to go over the concepts behind working in a creative studio. How will projects differ when we’re planning for app development? Mobile labs and studios are like any small business with big aspirations. And the most exciting part is that anybody can start! Many studios run with only 2-4 employees working full time.

Why Design for Mobile?

The mobile marketplace has been thrown together in just a few short years. The original iPhone began development going back as early as 2005 and still commands a large share of the mobile OS devices. Android was originally released later in 2007 and is trailing behind as a close second, followed up by Windows Mobile and Blackberry phones. You should take mobile development into consideration only if you have a personal interest in the area. If you have ideas for apps you should take it upon yourself to build them. Websites are cheaper now and easier to setup with open source CMS solutions such as WordPress. But mobile apps are still fresh and the market has barely been touched. This is why mobile studios are currently growing so rapidly. If you can release one or two good ideas then it’s very easy turning a profit through Apple or Google.

Selective Markets

Unless you are an expert in Objective-C and Java programming it’s unlikely you can publish for both Android and iOS together. Mobile studios who are just getting started should pick an app store based on their own preferences. If you have a team of knowledgeable developers you can get together and build apps much more quickly for all devices. This can include tablet PCs as well. Not every situation will be so lenient, but if you can pull it off I recommend submitting to both of the App Stores for a larger audience. The popular task management software Wunderlist immediately comes to mind. From what I can gather the iPhone/iPod Touch/iPad App Store has a much higher demand for developers. There are simply more devices to build for and users are more willing to spend money for apps. But you can’t go wrong sticking to either marketplace. Pick an idea and just start building!

Speedy App Distribution

Another facet of developing mobile apps is the speed at which you can churn out new ideas. Programming is definitely extensive and requires a lot of dedication for newcomers. However once you’ve completed your first idea you’ll be edgy to jump onto the next one. Many app studios will choose between one of two paths for development. They’ll either focus on a single idea and expand it onto many devices, or alternatively they’ll launch a slew of many smaller apps with less maintenance. If you consider a studio like Cultured Code they have done an excellent job with the former dev environment crafting Things for all iOS devices. When you plan your studio’s creative schedule make sure you consider all of these ideas. Will you and your team be working on many smaller apps or focusing to sell one solid brand? It’s a smart idea to split up tasks based on design and development skills. You’ll find product development to move tenfold when everybody is working on the same page.

Hungry Customers

Mobile apps may be some of the most in-demand software from consumers going into 2012. Almost anybody can setup their own web host and it takes a lot more work to build for mobile devices. As such these smaller studios are getting a ton of attention and reaping the benefits. When you have a consumer base who is frequently shelling out cash for new apps it’s the perfect time to capitalize. Even many of the free applications for iOS and Android are still making money through advertisements and upgrades. You’ll find much less work in the realm of freelance app development. But some higher-end studios are offering freelance services and this trend may pickup when more wealthy companies grow interested in a mobile presence.

The Future for Mobile Labs

The outlook on the horizon is bright for mobile app studios. Developers can earn a small living off just a couple of catchy ideas. And mobile apps are so quick to produce that you can work part-time on a project while still holding down your day job. Compared to the number of design agencies there is still room for growth in the mobile arena. The App Stores are just heating up and already boast quite a considerable number of competitors. If you are dedicated and have ambition then mobile apps are easily the best opportunity for a young developer. If possible try putting together a small team of developers and designer(s) to expedite the workload.

Conclusion + Showcase

In addition to the examples above I want to share some more wonderful mobile lab studios. Developers are hard at work all over the world churning out these apps for your smartphone device. Creative studios have always been popular and now we’re seeing a shift from print & web work into mobile. Let us know your thoughts and if you run a mobile studio please share your link with us in the comments below.

iPhone App Lab

Ecliptic Labs

Ninja Lab Studios

Tapbots

AppThat

Milk Inc.

Gideros Mobile

Sophiestication

Robocat

Halfbrick

Second Gear

Glasshouse Apps

tap tap tap

OneLouder

Nibirutech

App Cubby

jChicken

SayCheezzz

Tangorang Labs

Fusionlab

Apptivity Lab

Smule

PoweryBase

TapMates

Wandake Game Studio

9magnets

Vemedio

Web Design Ledger

Design HTML5 Websites for Desktop and Mobile without Coding

designerbooster — Tue, 07 Feb 2012 20:36:57 +0000

The death of Adobe Flash for mobile was not shocking news for the majority of its proponents, we all saw it coming. With that, HTML5 will definitely gain control of both mobile and desktop websites in a few years. Right now there are a lot of HTML5 template generators, making it easy for designers and developers to create an HTML5 website. A French startup, Eenox, has developed a platform to help create dynamic HTML5 websites without writing a single line of code. If you are familiar with Wix, a Flash website builder with drag-and-drop features, it basically works the same. Eenox is an application that you can use right in your browser. Designing an application/website is easy. It is literally a drag-and-drop, draw and place, kind of application. Among the many features it has, one thing that took me by surprise is how easy it is to use even for a non-technical person. The interface is like storytelling, directing its users what to click, what it’s for, and how to properly do it. You rarely see something like this from applications, but games do it all the time. Below I masterfully tested the application, adding an image and sample text, and a Twitter stream. I have set the resolution for tablet. Every web page created automatically generates a QR code for them. And unlike testing the website to see if it works, which usually entails setting up your localhost (if you work on your local machine), every element is as you see it. No more setting up, just drag, drop and add your content. Several months ago, the talk was about creating a responsive website which can automatically adjust itself based on the screen of the user. Eenox has successfully employed this with every website or application that is made using their platform. Here’s proof of that. Try resizing your browser, and you will see the image and text adapt to your browser’s size. Changing the background color, or the color of any element for that matter, only requires moving some slides through a gradient. You can even download the website you made, and then host it on your web server. There is a free version that you can use to test the application. A paid version starts at $ 99 for every 2 months up to $ 280/mo.

Features of Free Version

Maximum of 3 web pages to download
Maximum of 3 images per page
Limited to 1 web page
Hosting

The free version is pretty limited, hopefully someday the features for the free version will increase. Truthfully, I haven’t had enough of a chance to test it because of the limitations, but I can say that I like how easy it is to use.

Benefits of using the paid version:

Unlimited downloads
25 to 120 web pages
Unlimited image number per page
Hosting
Other Advanced Features
Statistics
SEO
Can publish app on the App Store or Android Market

See image below for the full pricing details: Image was shamelessly taken from their website.

1stwebdesigner - Graphic and Web Design Blog

Will the Browser Wars Invade the Mobile Web?

designerbooster — Tue, 10 Jan 2012 14:38:00 +0000

Editor’s note: The opinions expressed in this article are solely that of the author’s, Arley McBlain. When it comes to the still emerging Mobile Web realm, I think we should all be outraged about the trouble Windows Phone 7.5 can unleash. Like anyone, I was curious what Windows Phone 7.5 (codenamed Mango) — a software update to Microsoft’s mobile device operating system — would bring to the Mobile Web front. I’m a web designer, so things like this can affect me professionally. My real interest in Mango lies in its web browser, IE Mobile 9. How would it hold up? It certainly performs better than its predecessor, but it didn’t take long to start finding rendering issues on some websites, even though these sites were fine on other devices.

A Bit of Background

Until recently, there were arguably only three major players in the mobile device world: BlackBerry, iPhone and Android. These devices still hold a big chunk of smartphone users – 73% of the market share of mobile operating systems in the second quarter of 2011 — Microsoft is trying to keep things relevant with their latest mobile OS. Source: Wikipedia A little competition in the burgeoning mobile industry is good and all, but — and maybe you should sit down for this — when Windows Mobile 7 (the predecessor of Mango) shipped in November 2010, the built-in browser was IE Mobile 7 – a standards-disrespecting jerk of a browser that was released over four years previous. Four years. Think about that. In Internet years that’s like a decade and in mobile technology years that’s like 432 centuries. IE7 is ancient! Sure, it was better than IE6, but it still makes a mockery of web standards, and lacks a lot of great features that all modern browsers have. It feels like a crime to add IE7-specific style sheets to a modern mobile site or app. But that’s the reality. Mango is now released with IE9 adapted to their mobile OS (called IE Mobile 9). Though this is by all measures a modern browser, it’s still rendering pages differently and breaking a beautiful Web.

Why It Matters

It seems as though the Mobile space is beginning to repeat what we have seen from the ongoing desktop browser wars. When IE6 was king, it had over 75% of market share. With IE5.5 combined, it was 95%. What an amazing time it was to make websites: You could create and test a website with one web browser without feeling like your web development responsibilities were being shirked. You could be confident that 95% of Internet users would see the same thing. That bubble burst when people began adopting other browsers, and eventually we got to where we are today. Personally, I try to test a website project on at least 5 specific desktop browsers. It’s a lot more work, particularly if the client needs to support older browsers.

The WebKit Bubble

In Mobile, we are still sort of in that happy bubble! WebKit, a popular open source browser engine, is great. It’s the backbone of the BlackBerry browser (OS6+), Apple Safari (for the iPhone) and the built-in web browser in Android mobile devices. Mobile sites made for these devices will generally look and act the same. (Though you should still test in various platforms and devices.)

Will the Bubble Burst?

Now there’s Microsoft. Please understand that I’m not a hater. I respect the company and their contributions to the way we use technology today. They’ve had an enormous and very positive impact in computing, gaming and Web technologies. Their browser’s unique way of rendering websites, on the other hand, creates problems. For the first time since 2005, we almost had a standard base to build websites on — but I fear that Microsoft carries enough weight and users to shift the balance towards their advantage, and the work going into producing websites will again multiply.

Universal Standards for Mobile Browsers

Windows Phone hasn’t taken over yet, even though the company that developed it carries a lot of weight in the tech world. It’s up to us to pester friends, families and clients into installing some WebKit solution onto their Windows mobile devices. For example, let them know about Zetakey, a WebKit-based browser that can work on Windows mobile devices. Or, if you’re feeling very bitter, you can start adding this to your mobile web designs:

Is that too extreme? Am I saying WebKit should be the sole browser engine that the Mobile Web is built on? No. I only raise this point since, in the Mobile space, we are so close to one universal browser engine right now. I personally would be fine with literally any universal standard. I would honestly rather that IE6 once again be the 95% global standard than to have to keep adapting to the ever-increasing requirements that are being added to the average project. As modern web designers, these are just some of the things we are faced with:

Screens are simultaneously getting bigger and smaller.
We have to take into account standard mouse and keyboard users, touchscreens and accessibility considerations.
We are to be context-sensitive, social, and make use of emerging web technologies like geolocation and responsive web design.

The demands of modern mobile websites and mobile web apps are serious. Wrangling stubborn browsers on top of all of that is ridiculous. Web browsers have been around for nearly twenty years — the fact that two browsers can render the same code radically different is insane. We need to unite and demand a better browser standard. Six Revisions

Redefining Your SEO For Mobile Media

designerbooster — Thu, 08 Dec 2011 14:37:02 +0000

Webmasters already have a really difficult time figuring out how to promote their website for SEO. The search engine algorithms are complex and always changing. No sooner does the owner think he’s mastered the art of SEO and the rules change all over again. The advent of mobile media has made SEO even harder. When they first came out, not too many people used mobile devices to search the web. Today, nearly 40% of visitors use mobile devices for social networking. As a webmaster, you can’t afford to ignore this overwhelmingly important source of traffic. When you develop your website, you need to make sure it is optimized for both desktop computers and mobile devices. Life would be so much easier if mobile devices used the same algorithms and bots to search the web. Unfortunately, mobile devices are more limited in what they can do. Many of the tags, tools and blocks of code used in websites are ignored by mobile bots. Why would search engines make things so complicated? They want to make sure the most relevant data is provided to the user. If a particular site can’t provide the value to a specific mobile device that it provides to other users, it won’t rank as well. This isn’t a limitation of the search engine crawlers, it is intentionally done to improve the experience for all web users. If you want to maximize the traffic to your site, you definitely want to take advantage of the potential from mobile devices. Also, the conversions from mobile devices tend to be much higher than those accessed from the main site. According to a study conducted by Google, 61% of users will call a business after they have found it through a mobile device. Therefore, websites need to take conversions into account just as much as the traffic. This may be due to the fact that more people are trying to find things on their mobile phone that they intend to do right away. At the same time, a study conducted by Google found that 77% of mobile users use their phone to conduct searches. Some people are speculating that mobile media will be the death of the PC in a few years. Personally, I think that is hype. However, mobile searches are clearly going to play a greater and greater role in driving website traffic over the coming months and years. As a website owner, you can’t afford not to capitalize on that.

How Is Mobile SEO Different?

Although my focus in on the differences between mobile SEO and traditional SEO techniques, I think I should emphasize that the two practices are very similar. You don’t need to completely relearn the laws of search engine optimization. Rather, you need to tweak a few things and change your SEO process slightly. First, you will need to make sure your website is well optimized for traditional search engine bots. Afterwards, follow these tips to refine your strategy for mobile search engine bots:

1. Make your site functional for all devices.

The first thing you need to do is approach your SEO as if you didn’t have a specific device in mind. If you optimized your website for a specific screen size , you would be missing key traffic for all other sizes as well. By all means, make sure your site is functional for all users. I can’t think of any reason why you would want to limit your visitors to a single device, so make sure they can all take advantage of it. It’s a wise idea to make sure your site is set up for every major mobile device.

2. Go lighter on content.

When you develop a webpage for a mobile crawler, you are going to need to enhance SEO through conciseness. Articles will need to be lighter on content and you will want to make sure you can still get your keywords in the right places. You will need to balance brevity and conciseness if you want to implement a better SEO policy. Some sources will actually advocate using no more than 150 words for the mobile version of your website.

3. Create a secondary mobile style sheet.

You want to upload a style sheet for your site. You will want to call it mobile.css. If you use this style sheet, you can customize the settings for different mobile devices without having to create entirely new content for each device. You will also need to create an iPhone.css style sheet to optimize for iPhones, which unfortunately don’t look at the mobile.css style sheet. If you are interested in what a mobile.css style sheet should look like, you can find an example here.

4. Make sure your do your coding right.

Coding is always one of the most essential elements of SEO. Since mobile devices look at code differently, you may want to consider using straight XML. Bad coding practices can cause a number of problems for SEO, even more so than regular search engine bots. You can find details on developing a mobile site through our 5-Step Checklist.

5. Realize consumer behavior changes.

One of the things you need to take into consideration with mobile devices is that users search differently. They tend to be more impatient and probably less likely to use long-tail search terms. You want to make sure you optimize your site for users who are looking at these keywords on top of the ones you have already optimized for. You should also make sure you know what types of sites people are looking for when they are on their mobile devices. For example, a study by m-Spatial looked at the most popular searches conducted on mobile phones in the UK. According to this study, they found that the most popular searches were cinema, fast food, drinking and taxis. Clearly, when people are looking for something on their mobile phone, they are going to want to find destinations they would visit while traveling.

6. Create a mobile site map.

Mobile site maps serve the same purpose as regular sites. Submit a mobile site map and make sure you have your mobile site map in your robot.txt file. You can submit a mobile site map through your Google webmaster tools. You can follow the steps outlined by Google. A sample of your mobile sitemap might look like this:

 
    
        http://mobile.example.com/article100.html

As you submit your sitemap, you can use a single sitemap for different markup languages. However, you will need to make sure that you give a different name for each sitemap if you are uploading multiple ones.

7. Keep your site mobile friendly.

Mobile phones hate large files and excessive multimedia files. When you present your site for mobile devices, make sure you keep things as simple and manageable as possible. Search bots will rank your site better if you have smaller files. One of the best practices is to make sure you code in XHTML-MP. The second key element to making your site mobile friendly is knowing that you cannot put a whole bunch of content into it. You need to keep your site as simple as you possibly can. Cesar Keller made a post on Crazy Egg about how too many mobile sites make the mistake of trying to do way too much with their mobile sites. This ends up damaging the user experience and their search engine rankings in the long run.

8. Link the two versions of the site.

One of the biggest concerns with mobile search engines is that they have fewer links available. Link the two versions of the site together with a mobile redirect device. Oftentimes, a mobile bot will be looking for a traditional site. You can redirect it to the version of your site that is ranking better. According to a study conducted by Covario, the main site of one of their clients (Toolfetch) was able to increase traffic by 80% by driving traffic to the mobile site.

9. Use separate urls.

I know this is the opposite of everything you ever heard regarding duplicate content. You have probably always been told to use a single url for your site. If you used different urls, your site would be penalized. According to Pierre Far from Google, there are separate search engine bots for mobile sites and traditional sites. Hence, you will find that you need different urls to optimize your site properly. 1stwebdesigner - Graphic and Web Design Blog

Focus On: Design Trends in Mobile Apps for iOS

designerbooster — Tue, 29 Nov 2011 08:38:49 +0000

Apple’s mobile operating system has gained a huge following in just a few short years. Although it can take months of dedicated study to even begin programming iOS apps, there still seems to be a solid market of intelligent developers. In the last year alone we’ve witnessed the iPad2 and iPhone 4S releases which have both appeared stunning. And along with these advances in technology comes a much larger demand for iOS apps. I’d like to go into a few design trends which have become prevalent in mainstream iOS interfaces. Designers have started following innovative and whimsical methods for constructing beautiful app layouts. And there is a lot to be said of this booming mobile industry!

Offset Center Tab Button

Surprisingly I have run into this feature a lot more in the social network-type applications. The offset tab button is generally placed in the center of a series of tab views in the bottom bar. Foursquare and Instagram are two examples, although there are other designers picking up on the trend. The benefit of this tactic from a metrics perspective is that you’ll see a lot more active sharing using that center button. With Instagram you tap there to snap a new photo, in Foursquare you are sharing a new check-in. This center tab view should represent the key action(s) you’re hoping to get out of each user. Another cool example can be found in Tumblr’s iOS app. This mobile port of the social blogosphere is using the offset center tab just a few pixels in height. It seems like a small effect, yet your attention is constantly attracted to the “Post” link.

Popup Modal Views

Modal boxes have been popular in both desktop and browser-based applications. When developing for iOS these modal boxes are perfect for quickly gathering some user information. These systems work best in a true/false or yes/no format so the user isn’t flustered in dealing with a whole new window. In the example above Tweetbot uses a brilliant modal box design with an outer shadow effect. Another point of notice is how the two buttons have been colored differently – this is to imply that you need to make a choice between the two. In this screen I’m being asked to confirm or deny a spam report(which I politely canceled!).

Link Icons

When designing an iOS user interface you want important bits to stand out from the rest. This is worth stressing in preparation so that your layout doesn’t appear bland by design. Things for iPhone uses some really unique icons to label each of their different scheduling areas. Another one of my favorite examples is Cloudette, an iOS solution for CloudApp. Basically you log in to your account and the home screen displays all your contents in chronological order. The app includes icons next to each file based on the type(URL link, photo, .zip archive). Even if you aren’t a magnificent designer you should be able to find some awesome freebies throughout the web. Having a few icons sprinkled throughout your menus will help to differentiate the many links listed together. They also add onto the beautiful user experience which you would expect in any mobile app.

User Profile Badges

The most popular example of the social badges group has to be Foursquare. We’ve all caught a glimpse of these badge designs and there are plenty to go around! The site’s founder Dennis Crowley has actually collected over 100 different badges! Talk about some real dedication. Adding this functionality into your app brings about an entire gaming mechanism. Your members will be constantly working to unlock badges and show off their hip trendy profile. Im Game is another app released in private beta where you check-in to each video game as you play them. Users who check into specific genres more often can unlock secret badges, along with others means of social gaming. If the badge system doesn’t work in your app I suggest not trying to force it. But collecting user input will keep your member base growing and interested in future products!

Custom Loading Animation

This hasn’t been as popularized as the other trends recently, although there are 2 apps worth noticing. Gowalla’s newest re-design uses a checkered array of moving colors to display when content is being loaded. It’s a really unique animation and certainly along the lines of something I’ve never seen before. Another great example comes from Kevin Rose’s recent publication of Oink app. The user interface is much smaller this time around, as they focus on a tiny loading bar towards the top of each screen. The animation movement is very fluid and I feel the concept has been implemented brilliantly. Take down a few notes from these guys and see if you can come up with your own unique loader.

Pre-Cropped Images

There is a lot more code required to dynamically pull out images of differing sizes. It takes even more programming to crop and maneuver user uploaded content. As such these trends are still limited to app development teams with enough time and patience to implement them. Ballin’ is a great example which pulls data out of Dribbble’s network. The shots are updated usually every 24 hours to include both a thumbnail and full-screen view for when the iPhone is in landscape mode. Altogether this technique is more intensive in programming than actual design. Yet it appears very trendy and flashy, and certainly something which I expect to continue in future mobile apps of 2012.

Conclusion

This guide has introduced some of the latest design trends in iPhone/iPad applications. If you’re an aspiring designer I highly recommend skimming through my previous article on iOS user interfaces in Photoshop. There is a lot to study and practice, but the payoff is certainly worth the effort. If you have any questions or comments please share with us in the discussion area below. Web Design Ledger

50 Free PSD Files for Mobile Design and Development

designerbooster — Mon, 28 Nov 2011 14:55:55 +0000

Smartphones are more and more present in our lives thanks to their purpose: to help us in our day-by-day activities…The number of mobile apps is growing fast and you can find now an app for almost everything. Need a better sleep? Get an app…do you feel like there`s room for more productivity in your activities? get an app…designers are struggling to deliver professional interfaces but yet still friendly just to use the app with pleasure…I want to come in designer`s help by presenting 50 free resources for mobile design and development!

designerbooster » Mobile Content

Responsive Web Design

The Challenge

The Goal

Content Is King!

The Principle

In Practice

Markup

CSS

Content-Driven Process

Breakpoints

How Do We "Pick" Breakpoints?

470px

530px

700px

950px

1170px

1190px

1410px

Getting Ready for Media Queries

Conclusion

QR Codes and Microsoft Tags: New Promotion Generation

More about QR Codes

More about Microsoft Tags

Graphic and Marketing Industry Uses

Call-to-Action and Marketing Campaign Tools

Business Cards, Printed Literature and Web Identities

Other Places Where They Can Be Displayed

Great Use Example: Tesco at the Korean Market

What you need to know to create your own 2D Code

QR CODES Creation Rules

MS Tags Creation Rules

Key differences between QR Code and Microsoft Tag

QR Code PRO and CONS

MS TAG PRO and CONS

Resources

QR Code Resources

QR Code Generators

QR Code Marketing Tools

Microsoft Tag Resources

Conclusion

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

The Concept of the Mini App: Restaurant Picker

Wireframing Our Application.

Home Screen : Choose a Plate

Choose a Town

Choose a Restaurant

Restaurant Details

Building the web-application base

Some jQuery Mobile Basics

What You’d Like to Eat: First Page

Restaurant Picker

What would you'd like to eat?

Some Sushis

A Pizza

A Kebap

A Burger

Some Nems

Something more traditional

In Which Town Do You Want To Eat: Second Page

Restaurant Picker

In which town do you want to eat?

Choose a Restaurant: Third Page

Restaurant Picker

Please choose a restaurant.

Le Mouffetard

Chocolate bar

Restaurant Diona

Tai Shan

Arcade

Restaurant Details: Fourth Page

Restaurant Picker

Le Mouffetard

Contact us

User rating

Next up on Page Two: Adding Some Style

Getting the Most Out of QR Codes Using URI Schemes

How QR Codes Work in a Nutshell

QR-Code Readers

The Idea: Using URI Schemes