designerbooster » Mobile http://www.designerbooster.com designerbooster.com: boost your creativity with the right design resources at hand. Tue, 19 Mar 2013 07:10:19 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jQuery Mobile Tutorial: Creating a Restaurant Picker Web App http://www.designerbooster.com/featured/jquery-mobile-tutorial-creating-restaurant-picker-web-app/ http://www.designerbooster.com/featured/jquery-mobile-tutorial-creating-restaurant-picker-web-app/#comments Thu, 08 Mar 2012 20:46:46 +0000 designerbooster http://www.designerbooster.com/?p=4005 jQuery Mobile Tutorial: Creating a Restaurant Picker Web App
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, [...] Related posts:
  1. jQuery Mobile First Look: Book review and Giveaway
  2. 36 Restaurant and Food Logos to Increase Your Appetite
  3. Tutorial – Creating Awesome Christmas Invitation Poster in Photoshop
]]> jQuery Mobile Tutorial: Creating a Restaurant Picker Web App
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. Restaurant Picker : creating a JqueryMobile web app from scratch and styling it. 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 :

qrcode for the demo

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

Homescreen: 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

Choose a town wireframe 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

Choose a restaurant wireframe 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

Restaurant details wireframe 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 : 
<!DOCTYPE HTML>

<HTML>

<head>

<meta charset="UTF-8">

<title>Restaurant Picker</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="jquery.mobile.structure-1.0.1.CSS" />

<link rel="stylesheet" href="jquery.mobile-1.0.1.CSS" />

<script src="js/jquery-1.7.1.min.js"></script>

<script src="js/jquery.mobile-1.0.1.min.js"></script>

</head>
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 
<body>

<div data-role="page" id="home" data-theme="c">

<div data-role="content">

<div id="branding">

<h1>Restaurant Picker </h1>

</div>

<div class="choice_list">

<h1> What would you'd like to eat? </h1>

<ul data-role="listview" data-inset="true" >

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="sushis.jpg"/> <h3> Some Sushis</h3></a></li>

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="pizza.jpg"/> <h3> A Pizza </h3></a></li>

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="kebap.jpg"/> <h3> A Kebap</h3></a></li>

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="burger.jpg"/> <h3> A Burger</h3></a></li>

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="nems.jpg"/> <h3> Some Nems </h3></a></li>

<li><a href="choose_town.HTML" data-transition="slidedown"> <img src="tradi.jpg"/> <h3> Something more traditional</h3></a></li>

</ul>

</div>

</div>

</div><!-- /page -->

</body>

</HTML>
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 <div data-role=”page” id=”home” data-theme=”c”> 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 <ul> element. data-inset=”true” is here to style the list as an inset list (with rounded corners and padding around it). Each list element <li> that contains an <a href> 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: First page

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

<div id="choisir_ville" data-role="page" data-add-back-btn="true">

<div data-role="header">

<h1> Restaurant Picker</h1>

</div>

<div data-role="content">

<div class="choice_list">

<h1> In which town do you want to eat? </h1>

<ul data-role="listview" data-inset="true" data-filter="true" >

<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Amiens <span > 3 </span></a> </li>

<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bastia <span > 2 </span></a> </li>

<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Belfort <span class="ui-li-count" > 5 </span></a> </li>

<li><a href="choose_restaurant.HTML" data-transition="slidedown"> Bordeaux <span class="ui-li-count" > 1</span></a> </li>

…

</ul>

</div>

</div>

</div><!-- /page -->

</body>
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: Second page

Choose a Restaurant: Third Page

We will name this page choose_restaurant.HTML and below is what the HTML code will look like. 
<body>

<div id="choisir_restau" data-role="page" data-add-back-btn="true">

<div data-role="header">

<h1> Restaurant Picker</h1>

</div>

<div data-role="content">

<div class="choice_list">

<h1> Please choose a restaurant.</h1>

<ul data-role="listview" data-inset="true" >

<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau01_mini.jpg"/> <h2> Le Mouffetard</h2> <p> 4 stars </p></a></li>

<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau02_mini.jpg "/> <h2> Chocolate bar </h2> <p> 4 stars </p> </a></li>

<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau03_mini.jpg "/> <h2> Restaurant Diona</h2> <p> 1 star </p> </a></li>

<li><a href="restaurant.HTML" data-transition="slidedown"> <img src="restau04_mini.jpg "/> <h2> Tai Shan</h2> <p> 3 stars </p> </a></li>

<li><a href="restaurant.HTML" data-transition="slidedown"> <img src=" restau05_mini.jpg"/> <h2> Arcade</h2> <p> 2 stars </p> </a></li>

</ul>

</div>

</div>

</div><!-- /page -->

</body>
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: 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. 
<body>
<div id="restau" data-role="page" data-add-back-btn="true">

	<div data-role="header">
		<h1> Restaurant Picker</h1>
	</div> 

	<div data-role="content">
	<div class="ui-grid-a" id="restau_infos">
		<div class="ui-block-a">
		<h1> Le Mouffetard</h1>
		<p><strong>  Restaurant bar in the center of Strasbourg</strong></p>
		<p> On the menu: </p>
			<ul>
				<li> Milkshake with chocolat</li>
				<li> Planchettes </li>
				<li> Leek pie </li>
			</ul>
		</div>
		<div class="ui-block-b">
		<p><img src="restau01.jpg" alt="jeannette photo"/></p>
		<p><a href="http://www.google.fr" rel="external" data-role="button"> See our website</a></p>
		</div>
	</div><!-- /grid-a -->
	<hr/>

	<div class="ui-grid-a" id="contact_infos">
		<div class="ui-block-a">
		<h2> Contact us</h2>
		<p>30 Rue des Tonneliers</p>
		<p> 67000 Strasbourg	</p>
		</div>
		<div class="ui-block-b">
		<img src="01_maps.jpg" alt="plan jeanette"/>
		</div>
	</div><!-- /grid-a -->
	<div id="contact_buttons">
		<a href="http://maps.google.fr/maps?q=jeannette+et+les+cycleux&hl=fr&sll=46.75984,1.738281&sspn=10.221882,18.764648&hq=jeannette+et+les+cycleux&t=m&z=13&iwloc=A" data-role="button" data-icon="maps"> Find us on Google Maps </a>
		<a href="tel:0388161072"  data-role="button" data-icon="tel"> Call us </a>
	</div>
	<hr/>

	<div id="notation">
	<form>
	<label for="select-choice-0" class="select"><h2> User rating </h2></label>
		<select name="note_utilisateur" id="note_utilisateur" data-native-menu="false" data-theme="c" >
		   <option value="one" class="one"> Not good at all </option>
		   <option value="two" class="two">Average </option>
		   <option value="three" class="three">Pretty good </option>
		   <option value="four" class="four"> Excellent </option>
		</select>
	</form>
	</div>
	</div>

</div><!-- /page -->
</body>
Last page 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]]> http://www.designerbooster.com/featured/jquery-mobile-tutorial-creating-restaurant-picker-web-app/feed/ 0 The Popular Rise of Mobile Studios http://www.designerbooster.com/featured/popular-rise-mobile-studios/ http://www.designerbooster.com/featured/popular-rise-mobile-studios/#comments Wed, 22 Feb 2012 08:43:04 +0000 designerbooster http://www.designerbooster.com/?p=3783 The Popular Rise of Mobile Studios
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 [...] Related posts:
  1. BoonEx Mobile Apps for iOS and Android
  2. Will the Browser Wars Invade the Mobile Web?
  3. The 7 Most Popular Online Project Management Tools
]]> The Popular Rise of Mobile Studios
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. featured image - iPhone 4 black 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. Google Headquarters with the 'droid 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. Official Wunderlist application web design 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. Things for iPhone app website under Cultured Code 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. Big Bucket Software website 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

iPhone App Lab

Ecliptic Labs

Ecliptic mobile labs

Ninja Lab Studios

Ninja Lab Studios page

Tapbots

Tweetbot Tap Bots

AppThat

AppThat new mobile studio

Milk Inc.

Kevin Rose's Milk mobile lab

Gideros Mobile

Gideros Mobile

Sophiestication

Sophiestication mobile iOS app

Robocat

Robocat mobile apps

Halfbrick

Halfbrick mobile apps company

Second Gear

Second Gear Mac OSX and iOS Studio

Glasshouse Apps

Glasshouse mobile apps

tap tap tap

tap tap tap studio

OneLouder

Nibirutech

Nibirutech iPhone apps translation

App Cubby

App Cubby website design

jChicken

jChicken apps

SayCheezzz

SayCheezzz King Camera app

Tangorang Labs

Tangorang iPhone iOS games

Fusionlab

iPad Fusionlab web design

Apptivity Lab

Apptivity Labs

Smule

Smule mobile iPhone apps

PoweryBase

mobile iPhone app studio PoweryBase

TapMates

Tapmates mobile iPhone lab

Wandake Game Studio

Wandake Game Studio mobile designs

9magnets

9magnets design studio

Vemedio

Vemedio software for Mac and iPhone Web Design Ledger]]> http://www.designerbooster.com/featured/popular-rise-mobile-studios/feed/ 0 Design HTML5 Websites for Desktop and Mobile without Coding http://www.designerbooster.com/web-design/design-html5-websites-desktop-mobile-coding/ http://www.designerbooster.com/web-design/design-html5-websites-desktop-mobile-coding/#comments Tue, 07 Feb 2012 20:36:57 +0000 designerbooster http://www.designerbooster.com/?p=3582 Design HTML5 Websites for Desktop and Mobile without Coding
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 [...] Related posts:
  1. 20 Inspirational HTML5 Websites with 3D Flavor Added
  2. Not Your Parent’s Mobile Phone: UX Design Guidelines For Smartphones
  3. 50 Free PSD Files for Mobile Design and Development
]]> Design HTML5 Websites for Desktop and Mobile without Coding
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]]> http://www.designerbooster.com/web-design/design-html5-websites-desktop-mobile-coding/feed/ 0 Will the Browser Wars Invade the Mobile Web? http://www.designerbooster.com/design-articles/will-browser-wars-invade-mobile-web/ http://www.designerbooster.com/design-articles/will-browser-wars-invade-mobile-web/#comments Tue, 10 Jan 2012 14:38:00 +0000 designerbooster http://www.designerbooster.com/?p=3209 Will the Browser Wars Invade the Mobile Web?
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 [...] Related posts:
  1. Use CSS3 Media Queries To Create Mobile Version of Website
  2. BoonEx Mobile Apps for iOS and Android
  3. 29 Simple yet Intuitive Mobile Web Designs
]]> Will the Browser Wars Invade the Mobile Web?
Will the Browser Wars Invade the Mobile Web? 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: 
<!--[if IEMobile]><style>*{display:none;}</style><![endif]-->
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]]> http://www.designerbooster.com/design-articles/will-browser-wars-invade-mobile-web/feed/ 0 Redefining Your SEO For Mobile Media http://www.designerbooster.com/featured/redefining-seo-mobile-media/ http://www.designerbooster.com/featured/redefining-seo-mobile-media/#comments Thu, 08 Dec 2011 14:37:02 +0000 designerbooster http://www.designerbooster.com/?p=2812 Redefining Your SEO For Mobile Media
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 [...] Related posts:
  1. Use CSS3 Media Queries To Create Mobile Version of Website
  2. BoonEx Mobile Apps for iOS and Android
  3. 29 Simple yet Intuitive Mobile Web Designs
]]> Redefining Your SEO For Mobile Media
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: <?xml version=”1.0″ encoding=”UTF-8″ ?> 
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">
    <url>
        <loc>http://mobile.example.com/article100.html</loc>
        <mobile:mobile/>
    </url>
  </urlset>
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]]> http://www.designerbooster.com/featured/redefining-seo-mobile-media/feed/ 0 Focus On: Design Trends in Mobile Apps for iOS http://www.designerbooster.com/featured/focus-design-trends-mobile-apps-ios/ http://www.designerbooster.com/featured/focus-design-trends-mobile-apps-ios/#comments Tue, 29 Nov 2011 08:38:49 +0000 designerbooster http://www.designerbooster.com/?p=2693 Focus On: Design Trends in Mobile Apps for iOS
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 [...] Related posts:
  1. BoonEx Mobile Apps for iOS and Android
  2. 50 Free PSD Files for Mobile Design and Development
  3. Not Your Parent’s Mobile Phone: UX Design Guidelines For Smartphones
]]> Focus On: Design Trends in Mobile Apps for iOS
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. iPhone 4S White model 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. Instagram iOS app tab bar 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. Offset iOS UI tab design from Tumblr 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. Tweetbot modal popup box 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. Things for iPhone and iPod Touch 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). Cloudette icon design list 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. Foursquare display badges - trophy case 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. Private beta iOS ImGa.me app 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. Gowalla loader animation box 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. Oink iOS loader bar animation

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' Dribbble app view screen 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]]> http://www.designerbooster.com/featured/focus-design-trends-mobile-apps-ios/feed/ 0 50 Free PSD Files for Mobile Design and Development http://www.designerbooster.com/featured/50-free-psd-files-mobile-design-development/ http://www.designerbooster.com/featured/50-free-psd-files-mobile-design-development/#comments Mon, 28 Nov 2011 14:55:55 +0000 designerbooster http://www.designerbooster.com/?p=2690 50 Free PSD Files for Mobile Design and Development
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? [...] Related posts:
  1. BoonEx Mobile Apps for iOS and Android
  2. 30 Free Professional and Useful UI PSD Files
  3. Not Your Parent’s Mobile Phone: UX Design Guidelines For Smartphones
]]> 50 Free PSD Files for Mobile Design and Development
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! fuel

Mobile Graphic User Interfaces

Android 2.3 GUI

android-2.3

Android 2.2 GUI

android-2.2

Iphone 4 GUI

gui

Android GUI PSD

androidguipsd_v1.0

Iphone Dark UI Kit

iphone-ui-kits

Iphone 4 GUI

ios4

iPad GUI

ipad-gui

Palm Pre GUI

palmprepsd

Icons

Maps and Video Icons

cool

Mini Iphone Icon

mini-icon

Nintendo Icons for Iphone

nintendo-icons

More Iphone Icons

more-icons

Replacement IOS Icons

replacement-ios-icons

Clock and Movie Icons

clock-iicons

Contacts and Cydia Replacement Icons

236-big

Camera App Icon

camera

Contacts, Settings, Photos, and Mail Replacement Icons

4icons

Voice Memos and Facetime Replacement Icons

voice

MineCraft Icon

minecraft

Some more icons

icons

Social Iphone Icons

facebook

Cute Twitter Icon for Iphone

twitters

Winterboard

winterboard

Android Icons

Androids_Icons_Shape_Pack

Miscellaneous Mobile Elements

Instagram

Instagram

Rolling Counter

counter

User Bubble

user-bubble

Recorder UI

recorder

Contact List

contact-list

iPhone Application Interface

app-interface

Iphone App Wood Interface

wood

Iphone Interface with Slider

slider

Maps, Pins and Tooltips

maps

On/Off Switches and Toggles

toggles

Calendar

calendar

Iphone Feed App

feed-app

Football Iphone UI

football-ui

Iphone Background Template

iphone-background-template

iPhone4 Retina Display Wallpaper Templates

designmoo_iphonewallpaper

Iphone Tab Bar Icons

tab-icons

Iphone Backs

iphone-backs

iPhone 4 Template

iphone

Android Checkboxes

android-checkboxes

Calendar Datepicker

date

iPad ListView/GridView

ipad-lstview

Iphone App

app

Timer

timer

App Interface

take

Dark Mobile Menus

menus

Fuel Station Finder App

fuel Web Design Blog, Web Designer Resources]]> http://www.designerbooster.com/featured/50-free-psd-files-mobile-design-development/feed/ 0 29 Simple yet Intuitive Mobile Web Designs http://www.designerbooster.com/web-design/29-simple-intuitive-mobile-web-designs/ http://www.designerbooster.com/web-design/29-simple-intuitive-mobile-web-designs/#comments Sat, 26 Nov 2011 14:37:28 +0000 designerbooster http://www.designerbooster.com/?p=2665 29 Simple yet Intuitive Mobile Web Designs
There is no doubt mobile web has taken the world by storm. Even more people today are equipped with smartphones running on iOS or Android, both of which provide exceptional web browsing platforms. And this number is only expected to increase as the average population wages and growth rate expands. However the process of designing [...] Related posts:
  1. jQuery Mobile First Look: Book review and Giveaway
  2. BoonEx Mobile Apps for iOS and Android
  3. Comment to win a HP EliteBook 8740w Mobile Workstation
]]> 29 Simple yet Intuitive Mobile Web Designs
There is no doubt mobile web has taken the world by storm. Even more people today are equipped with smartphones running on iOS or Android, both of which provide exceptional web browsing platforms. And this number is only expected to increase as the average population wages and growth rate expands. However the process of designing and coding a mobile template can be very tedious. I’m hoping to provide a creative outlet in this gallery of 29 intuitive mobile designs. These are websites rendered in mobile browsers which have specific templates in place for these devices. Check out my examples below if you’re in need of creative ideas for your own design. Or alternatively let us know your thoughts in the discussion area below.

Digiti

 

Microsoft

Creative Carlos

Paterniti Design

A List Apart

Urban Outfitters

Erskine Design

Dr. Pepper

Webdesigner Depot

fxnine

Hooppps

Cedric’s Showcase

Panera Bread

Buza Gift Shop

Siblify

Geek Squad

Mr. Biggo

Yahoo! Mobile

Denon Graphics

PoshCSS

yyoga

last.fm

Plank Design

MailChimp

Digg v4 Mobile

Vimeo

Cartoon Network

Woork

American Eagle

DesignM.ag]]> http://www.designerbooster.com/web-design/29-simple-intuitive-mobile-web-designs/feed/ 0 Use CSS3 Media Queries To Create Mobile Version of Website http://www.designerbooster.com/featured/css3-media-queries-create-mobile-version-website/ http://www.designerbooster.com/featured/css3-media-queries-create-mobile-version-website/#comments Mon, 14 Nov 2011 14:36:55 +0000 designerbooster http://www.designerbooster.com/?p=2524 mobile-site
The good thing about CSS3 is that it brings about various promises and solves many problems. But it also has a bad side to that it does not support Internet Explorer 8. Web developers and designers have a good reason to get motivated by this and at the same time get annoyed. The article below [...] Related posts:
  1. 10+ Free HTML5-CSS3 Website Templates
  2. 30 Must Read Infographics on Social Media
  3. Not Your Parent’s Mobile Phone: UX Design Guidelines For Smartphones
]]> mobile-site
The good thing about CSS3 is that it brings about various promises and solves many problems. But it also has a bad side to that it does not support Internet Explorer 8. Web developers and designers have a good reason to get motivated by this and at the same time get annoyed. The article below will show a method which makes use of a portion of CSS3 not supported by Internet Explorer 8.  These things do not matter much as the modules have one of the most functional places that have support with small devices like Android and iPhone. We are now going to discuss certain CSS rules and its functions in crafting the iphone edition by taking the help of CSS3. Taking a look at an easy example will make it clearer for you. This article also explains how to create a stylesheet on small screen devices on your site and also adding stylesheets from small devices to other websites.

Queries on Media

The print stylesheet is made for websites and the page is usually printed. You can also create your desired stylesheets to bring it to work if you made a print stylesheet ever before. These purpose were made possible by CSS2 type of media. The various media types will allow you to select a certain type of media and you can go for handheld, print and many others. But what should be noticed is that these particular types of media were never supported by devices, with only the print media type in work and the others not often seen. A Media Query does the work in CSS3 and is extending it further. They give more importance to the competency of the device they work on rather than searching for the types. These can be used for checking different kind of things like the height and width of the device, height and width of the browser, the resolution, orientation of the phone whether it is in portrait or landscape mode. For some conditions CSS can be written particularly if the browser is compatible with media queries. One can detect if the user has a smartphone of some kind and give them a certain outline for it. To make this example work, a web conference in UK had taken an initiative to open their website for the conference held in 2010 where the media queries was used in a big way. The site has been made in such a way so that it fits well in a small space and with the content again revised to make it easier to access. The design resembles the iPhone, but it is actually not so. In a similar way on Android phone it shows Opera Mini. TechStars is doing good work by making use of  media queries and marking the competency of the various devices which were almost thought of as impossible.

Media Queries for creating stylesheet for phones

We can start off with a very easy example. You can see the two column design below. Now if this is to be read on phone easily, the whole design can be made linear in a single column. The header area is also made small for easy accessibility of the readers so that they do not require passing through the header before entering a new account. For using media queries one needs to have interchanging segment of CSS in a single stylesheet. For aiming small devices, one can try the subsequent syntax:
@media only screen and (max-device-width: 480px) {}
After this we have to add the alternating CSS in the wavy brackets for the smaller screens and the width devices. The cascade helps in overwriting the rules of the different styles as placed for desktop browsers before in CSS. The previous rule will be overwritten if this particular section comes at the end in your CSS. For this reason some things need to be added to make linear designs and a small header in graphic. They are the following:
@media only screen and (max-device-width: 480px) { div#wrapper { width: 400px; } div#header { background-image: url(media-queries-phone.jpg); height: 93px; position: relative; } div#header h1 { font-size: 140%; } #content { float: none; width: 100%; } #navigation { float:none; width: auto; } }
Another background image has been used in the code above and header height has also been reduced. The navigation and the content have been set and the width settings overwritten in the stylesheet before. The settings are done only for devices of small screen.

Using media queries to link a separate stylesheet

To make few changes you can add certain codes for the devices. This turns out to be a fine way of using media queries. But in case of a lot of changes or if too much overwriting is there in the stylesheet, and you want the styles totally changed both for small screen gadget and desktop browsers, you can link them in diverse stylesheets which will also help the CSS to remain separate. For adding different stylesheet with your main one, you can make use of the cascade for writing the rules again. The following method can be followed:
<link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width: 480px)” href=”small-device.css” />

Media Queries Testing

Now you can test the CSS yourself if you possess an Android gadget, iphone or any other gadgets that has browser supporting the media queries. To view the code you need to upload it in your desired place. Now if you are to test a device which you actually don’t own, you can take the help of a brilliant site named ProtoFluid. It gives you a form to put your URL and you can see the layout as in the browser of an iPad. iPhone or any other kind of gadget. It can be a local URL. The screenshots given is from the TechStars site we had earlier seen on ProtoFluid through iPhone. The window size can also be given if you possess a certain device which is to be given for testing. You will get to know the dimensions of the screen. For using ProtoFluid, the media query needs to be altered as done for incorporating max-device-width and the max-width. This shows the working of media query on a standard desktop browser but on a very small window.
@media only screen and (max-width: 480px), only screen and (Max-device-width: 480px) {}
When the updating of the code is done as shown above, you should refresh the page to drag the window in to view the format altered and hitting 480 pixels. When the width of the view port hits the entered value, the media queries start reacting. ProtoFluid is now ready for testing. You can take the help of various tools like FireBug to give a squeeze to your design. Now this is not possible on the iPhone. But you give it a try to bring the look of your format in various devices. Overall ProtoFluid is easy to use and makes testing easier. By removing the query part of the max-width before you are live you can keep your site away from switching formats if anyone is dragging the window narrower. This effect occurs for people not only with small browsers but with small gadgets also.

Fitting an existing site

The above case has been shown in a very easy way for demonstration of the method. This procedure can be used to fit a previous site with the edition of a small screen gadget. The alternate edition of the format make the CSS hold a big name in the market. For experimentation, I have taken my business to apply the procedure to my format.

The desktop format

My business website consists of a multi-column format. The homepage comprises of a permanent width 3 column layout and is a bit different from the others. This particular design is quite old and so it did not have media queries when made.

New stylesheet added

A number of modifications have to be made to make the format linear. For this reason I need to add a different stylesheet with the help of media queries for loading the stylesheet after the present stylesheet. It should be seen that the max-width is not more than 480 pixels.
<link rel=”stylesheet” type=”text/css” media=”only screen and (max-width: 480px), only screen and (max-device-width: 480px)” href=”/assets/css/small-device.css” />
For creating a new stylesheet, the default stylesheet is taken for the site and saved as small-device.css. This begins as a duplicate of my main stylesheet. After this certain rules are to be overwritten and the unwanted parts are removed.

Reducing the header

To make my small gadgets look attractive, first I will put the logo in appropriate place to see if it has fitted properly on screen. The logo makes the background image and for this reason, I have the option of loading logos in the same stylesheet. There is a short top area for the logo to be placed with a different background body of the image.
{ background-image: url(/img/small-bg.png); } #wrapper { width: auto; margin: auto; text-align: left; background-image: url(/img/small-logo.png); background-position: left 5px; background-repeat: no-repeat; min-height: 400px; }

Linear Format

The next thing to do is to make the format linear and show it in one column. The desktop format is made with the help of floats.  I just need to search for the rules which make the columns float, set these to width: auto and. float: none. This makes the columns drop one after the other.
.article #aside { float: none; width: auto;}

Organizing

After reaching this stage one can just look at the format in ProtoFluid and add a twist to insert some padding and margins to the places that are loaded up and not in columns. Using Firebug for ProtoFluid makes the work easy because the way I do my work usually means playing with Firebug until I am satisfied with the result. At last the CSS is copied in the stylesheet.

Experimenting with iPhone

After I had finished with my stylesheet and was ready for uploading it, I wanted to test it in an actual gadget. First I checked with the iPhone to see that the site showed zoomed out and not zooming in. The Safari developer site gave me the solution. It said to insert Meta tag on the top of the website to fix the view port width with the device.
<meta name=”viewport” content=”width=device-width” />
When the Meta Tag is added the website will show zoomed in one the single column. The fit was easy to display and it also means that you can add the mobile edition of your own website easily. For example if I was constructing a site from the beginning I would prefer   media queries to make the process simpler. If you consider the orders of linear column you can utilize the images given at the background wherever it is possible. These can be buttoned with CSS or with liquid images. The desktop format had case studies on the homepage which was not easy to relate with a touch screen mechanism. This made me check with JavaScript whether the browser was tapered and it began the carousel. To stop the loading of carousel was a good solution for small gadgets. A little more time would make me write the carousel with a different way for mobile users especially for touch screens

Supporting Media Queries in old browsers

The above article explains how media queries are important for devices that have local hold. Only if you need iPhone support and used to mobile browsers like Opera Mini, you need not worry about browsers which are non-supportive. For using media queries in browsers, you should know there are various methods using JavaScript to give help to the browsers like Internet Explorer 8 and Firefox preceding 3.5. Internet Explorer 9. You can begin using CSS3 when using Media Queries. Browsers supporting media queries support other CSS3 properties also to give the polished effect when displayed on iPhone or other mobiles.

CSS3 Media Queries Examples

Stephen Caver

Sparkbox

mobile-site

Food Sense

The Boston Globe

Think Vitamin

Sasquatch! Music Festival

Internet Images

Staffanstorp

Seminal Responsive Web Design Example

Naomi Atkinson

Forefathers Group

Spigot Design

New Adventures In Web Design Conference 2012

Queness]]> http://www.designerbooster.com/featured/css3-media-queries-create-mobile-version-website/feed/ 0 BoonEx Mobile Apps for iOS and Android http://www.designerbooster.com/featured/boonex-mobile-apps-ios-android/ http://www.designerbooster.com/featured/boonex-mobile-apps-ios-android/#comments Tue, 08 Nov 2011 20:44:27 +0000 designerbooster http://www.designerbooster.com/?p=2385 BoonEx Mobile Apps for iOS and Android
Until back a few years ago, creating you own social network with a small budget was virtually impossible. This market was available only for large players like Facebook and MySpace, and that because the development of a social networking platform implies a vast amount of knowledge and resources. All that changed when Boonex released Dolphin. [...] Related posts:
  1. Top 10 : Must-Have iphone Apps for a Graphic Designer
  2. Nine Excellent Online Apps For Web Designers And Developers
  3. jQuery Mobile First Look: Book review and Giveaway
]]> BoonEx Mobile Apps for iOS and Android
Until back a few years ago, creating you own social network with a small budget was virtually impossible. This market was available only for large players like Facebook and MySpace, and that because the development of a social networking platform implies a vast amount of knowledge and resources. All that changed when Boonex released Dolphin. Dolphin was an open source social networking that worked right “out of the box”. You just needed to install and configure it and that was it … you had a social network. In recent years the mobile market experienced a boom initiated by the release of the iPhone, iOS and the “app-driven mobile experience” and that meant a new world opened for developers and entrepreneurs. The mobile social networking apps market is still its early days and that is why Boonex released Boonex mobile, a mobile social networking software. Boonex Mobile BoonEx is the only company in the industry to offer open-source applications for both iPhone and Android that you can rebrand, customize and submit to app stores as your own. BoonEx Mobile Apps are closely integrated with Dolphin and offer a unique platform for expanding your social network reach to the mobile devices of your site’s members. The iOS and Android apps are nearly identical in terms of looks and functionality. A great thing about both apps is that, being open-source, you can modify them, add functionality, change the design and UI, add extra modules and more. Some of the features available in both apps are :
  • homepage with alerts
  • member profiles and friends browsing
  • sending/receiving site messages (Mailbox)
  • photos upload from device libraries
  • photos upload straight from camera
  • member photos browsing
  • full-screen photos viewer with auto-rotation
  • member videos browsing and playback
  • member music browsing and playback
  • connection to multiple Dolphin-based sites
  • remembering login info for multiple sites
  • instant status message updates
  • GPS-based location updates
  • friendship requests accepting/declining
  • location-based and keyword-based search
  • multilingual interface
On the usability and reliability side, in our experience with the apps these have proven to be very strong and easy to use. The speed was good even on the 3GS model, and both performed great on the latest versions of the iOS and Android operating systems. Website : Boonex mobile website. CrazyLeaf Design Blog]]> http://www.designerbooster.com/featured/boonex-mobile-apps-ios-android/feed/ 0