My three 'tools' for mobile design

Andrew H · 29th Apr 2012, 12:01 AM

I just wrapped up my first mobile design job (I usually do desktop design), and it was a beast!

Lots of custom php and configuring with mysql to fetch product names and prices that I had not expected at the start of the project (started as a $350 job for a simple mobile site, but ended up arund $1,000 with all the extra work that was done configuring for Ecommerce).

So for anyone out there looking to do some mobile sites heres the three tools I used:

1. Redirect script: Detect Mobile Browsers - Open source mobile phone detection (JS version)
2. Device emulator (only emulates screen resolution): Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions
3. A good mobile template: Site Templates - Mobilize - Touch Optimized Mobile Template | ThemeForest

Should probably note that I am in no way affiliated with themeforest or the designer that made that, but I do like the template. But with that being said, you should really research what template you will use, there are ALOT of options. In the end my design really didn't look anything like the template, but having a good template with good CSS framework to start allows you to really 'hit the ground running'.

Hope that helps!

zelgly2 · 29th Apr 2012, 12:16 AM

Thanks for the share.

eternalwarrior · 29th Apr 2012, 12:22 AM

Congrats on your mobile design job. Mobile industry is booming and you have chosen the right path

olivialowrie · 29th Apr 2012, 06:32 AM

Thank you so much. I just opened my blog and I think I will need all of these so that I can make it mobile friendly.

rlhurst · 29th Apr 2012, 07:15 AM

Originally Posted by mcflause

(started as a $350 job for a simple mobile site, but ended up arund $1,000 with all the extra work that was done configuring for Ecommerce).

Can you share what you used for a shopping cart solution?

Andrew H · 29th Apr 2012, 12:33 PM

Can you share what you used for a shopping cart solution?

The client uses paypal for selling auto parts (its one specific part, but for a variety of cars). They already use paypal for their orders on there main website, but it looks ugly with big "PayPal buy now" buttons. So I made a dependent drop down menu, the user picks the 'make' of car (ie:BMW, Bentley, etc), then the 'model' become available. The make,model,price,paypal are all in a database assigned to certain ID's. So when the user selects there make and model they get transferred to a PHP page that check the "?ID=" value in the link and fetches the right information from the Database. This information is filled onto the page and also into the paypal form (using hidden value). The user can then select one of three *shipping options and then be transferred to paypal when they 'submit' the form (ie: "Checkout Now").

So a very custom ecommerce solution. I searched around ALOT and I could not find a light weight ecommerce solution that was good for mobile.

rlhurst · 29th Apr 2012, 02:26 PM

Thanks for sharing that!

thebirddog · 29th Apr 2012, 11:40 PM

Originally Posted by mcflause

The client uses paypal for selling auto parts (its one specific part, but for a variety of cars). They already use paypal for their orders on there main website, but it looks ugly with big "PayPal buy now" buttons. So I made a dependent drop down menu, the user picks the 'make' of car (ie:BMW, Bentley, etc), then the 'model' become available. The make,model,price,paypal are all in a database assigned to certain ID's. So when the user selects there make and model they get transferred to a PHP page that check the "?ID=" value in the link and fetches the right information from the Database. This information is filled onto the page and also into the paypal form (using hidden value). The user can then select one of three *shipping options and then be transferred to paypal when they 'submit' the form (ie: "Checkout Now").

So a very custom ecommerce solution. I searched around ALOT and I could not find a light weight ecommerce solution that was good for mobile.

Hi,

I really need someone to help me out with a m-commerce site for a customer of mine. Would you be interested?

Julian

Andrew H · 30th Apr 2012, 08:50 AM

Hi,

I really need someone to help me out with a m-commerce site for a customer of mine. Would you be interested?

Julian

I sent you a private message

phpguy · 20th May 2012, 06:24 AM

I really like jquerymobile has basic template optimized across devices

nickhumph · 20th May 2012, 08:00 AM

Originally Posted by mcflause

The client uses paypal for selling auto parts (its one specific part, but for a variety of cars). They already use paypal for their orders on there main website, but it looks ugly with big "PayPal buy now" buttons. So I made a dependent drop down menu, the user picks the 'make' of car (ie:BMW, Bentley, etc), then the 'model' become available. The make,model,price,paypal are all in a database assigned to certain ID's. So when the user selects there make and model they get transferred to a PHP page that check the "?ID=" value in the link and fetches the right information from the Database. This information is filled onto the page and also into the paypal form (using hidden value). The user can then select one of three *shipping options and then be transferred to paypal when they 'submit' the form (ie: "Checkout Now").

So a very custom ecommerce solution. I searched around ALOT and I could not find a light weight ecommerce solution that was good for mobile.

I'm launching an m-commerce development site..I've been trying to find a m-commerce solution so I can create the sites, like a CMS or similar, but can't find anything!

If I can't find anything, I'll develop them.. but obviously something to create them fast and efficiently would be brilliant.

I wonder how someone like mobi-cart.com offers sites for no set-up fee. They must have an automated system that pulls the API and products.. but there are dozens of e-commerce CMS'... hmm maybe a csv file upload?

How many hours did it take you to do the shopping cart?

Andrew H · 21st May 2012, 12:45 PM

How many hours did it take you to do the shopping cart?

I have actually gotten a lot of pm's about this mobile ecommerce site. I should clarify that it was really a super simple ecommerce site, with a paypal redirect for handling pretty much everything except product selection and shipping. I stored all the products in the database with the product price and used drop downs to fetch them and fill in the hidden paypal fields before submitting the form and transferring to PayPal.

I might in the future, if I get some time, try to put together a simple ecommerce script based on jquery mobile because this seems really popular. Maybe it might be my first WSO?? who knows.

WillR · 21st May 2012, 06:38 PM

No need to reinvent the wheel.

Opencart.com (free) now has a mobile framework available.

Use the Mobilizer iphone emulator and visit this url to see an example:

OpenCart Mobile Framework demo

Here is more info on the mobile framework:

Extensions - Opencart Mobile Framework v1.3.8

M Mark · 3rd Jun 2012, 04:46 PM

Is there a free online mobile testing platform that actually shows how someone's site appears on multiple devices by simulating itself as a mobile device? Just starting to figure this stuff out as a new way to earn income helping offline clients....thanks

tycoonms · 4th Jun 2012, 03:02 PM

awesome info man, I was just trying to learn how to build one for my consulting site. I hate to offer mobile services (that i outsource) and i dont have a mobile version of my site

tmoby · 4th Jun 2012, 04:52 PM

Sick template - just what I was looking for. Seems like the perfect framework to start with!

beewock · 8th Jun 2012, 05:12 AM

There's also a CSS framework call Less Framework to create a responsive web design using media query. It helps me a lot.

Less Framework 4

WillR · 12th Jun 2012, 10:05 PM

Originally Posted by M Mark

Is there a free online mobile testing platform that actually shows how someone's site appears on multiple devices by simulating itself as a mobile device? Just starting to figure this stuff out as a new way to earn income helping offline clients....thanks

The best tool for this is:
Mobilizer | Springbox

crasher · 12th Jun 2012, 10:52 PM

awesome, thanks for your sharing

oildrops · 13th Jun 2012, 07:10 AM

Will - thanks for sharing.

Now one can offer mobile shopping cart solutions to potential clients!

This is HUGE!

MikeR

James Andy · 14th Jun 2012, 02:45 AM

It’s great to see your post and congrats for this mobile design job.

Evolve91 · 17th Jun 2012, 12:06 PM

Thanks for this post. I'm not doing mobile as of yet but I know its something I need to get up to speed on as I know very little about it. Its a service I'd like to offer but have it outsourced.

bizadpros · 17th Jun 2012, 04:32 PM

Great ideas presented here. WillR (and yes, I use his products) actually has presented some good points here and solutions.

The mobilizer is a great tool.

Those using google chrome, get this extension QR-Code Tag Extension and all you do (in google chrome) is go to the site you want to see, and Chrome creates a QR code...then just use your smartphone with a QR reader and view the site.

The point is chrome creates the QR Code to s specific site for you to view on your own smartphone. This is in addition to the mobilzer and other tools.

I viewed the site WillR recommended for ecommerce and it looks great on my smartphone - don't re-invent the wheel....

rsdimitrov · 18th Jun 2012, 10:15 AM

To contribute to the thread. My three top tools are:

1. Opera Mobile Emulator
This got me started even when I didn't have a physical device at my disposal.

2. Android Emulator (comes with the SDK)
The old Androids (2.3, 2.2) are the most widespread versions of the platform, yet their browser is the most problematic. Avoiding their pitfalls with strategically placed JS saved me hours of answering support emails.

3. MobileESP
The most comprehensive mobile detection solution to be used server-side. You don't bog the mobile client with useless code and also manage to do some page shifting or even serving completely different content for mobiles. After all, the true "mobile first" design should start on the server: shaving, http requests, useless code from every asset and page. This is how you can get 10-27 times faster load times of pages on mobile compared to their desktop versions (again measured on mobile).

As for iPhone: designing in Chrome and keeping the window narrow enough (if using fluid design (and you SHOULD be)) is good enough for previewing a website. Safari renders the pages 99% identical with the way Chrome does.

One last tip: resources.
Read this seminal work by Luke W.
A Book Apart, Mobile First

This is what got me started, gave me pointers and debunked many mysteries in the process of designing.

In the end you have to create a responsive mobile theme (to fit to a couple of mobile devices) instead of a desktop theme with mobile resolution breakpoints. Start your project on the right foot and you'll see that creating a mobile version of a page is not that hard.

Hope this helps

29th Apr 2012, 12:16 AM	#2
zelgly2 HyperActive Warrior War Room Member Join Date: 2009 Posts: 162 Thanks: 7 Thanked 20 Times in 20 Posts	Re: My three 'tools' for mobile design Share on: Thanks for the share.

29th Apr 2012, 12:22 AM	#3
eternalwarrior skype: itsmenasif Join Date: 2011 Location: 49.8380° N, 105.8203° E Posts: 619 Thanks: 257 Thanked 104 Times in 99 Posts	Re: My three 'tools' for mobile design Share on: Congrats on your mobile design job. Mobile industry is booming and you have chosen the right path

29th Apr 2012, 06:32 AM	#4
olivialowrie Warrior Member Join Date: 2012 Posts: 3 Thanks: 0 Thanked 0 Times in 0 Posts	Re: My three 'tools' for mobile design Share on: Thank you so much. I just opened my blog and I think I will need all of these so that I can make it mobile friendly.

29th Apr 2012, 02:26 PM	#7
rlhurst I Do Voice Over Work War Room Member Join Date: 2011 Location: Oregon Posts: 581 Thanks: 34 Thanked 129 Times in 96 Posts	Re: My three 'tools' for mobile design Share on: Thanks for sharing that!
	I do voice over work... here's a SAMPLE

20th May 2012, 06:24 AM	#10
phpguy Warrior Member War Room Member Join Date: 2011 Posts: 22 Thanks: 1 Thanked 1 Time in 1 Post	Re: My three 'tools' for mobile design Share on: I really like jquerymobile has basic template optimized across devices

21st May 2012, 06:38 PM	#13
WillR Digital Marketer War Room Member Join Date: 2010 Location: Australia Posts: 12,475 Thanks: 1,984 Thanked 8,187 Times in 4,079 Posts	Re: My three 'tools' for mobile design Share on: No need to reinvent the wheel. Opencart.com (free) now has a mobile framework available. Use the Mobilizer iphone emulator and visit this url to see an example: OpenCart Mobile Framework demo Here is more info on the mobile framework: Extensions - Opencart Mobile Framework v1.3.8
	. ➨ Here's How to Make Your First $177 Online This Week Using the Piggyback Method... .

3rd Jun 2012, 04:46 PM	#14
M Mark Active Warrior Join Date: 2010 Location: West ... Posts: 48 Thanks: 2 Thanked 2 Times in 2 Posts	Re: My three 'tools' for mobile design Share on: Is there a free online mobile testing platform that actually shows how someone's site appears on multiple devices by simulating itself as a mobile device? Just starting to figure this stuff out as a new way to earn income helping offline clients....thanks

4th Jun 2012, 03:02 PM	#15
tycoonms The Magnetic Marketer Join Date: 2012 Location: Florida Posts: 59 Thanks: 13 Thanked 17 Times in 15 Posts	Re: My three 'tools' for mobile design Share on: awesome info man, I was just trying to learn how to build one for my consulting site. I hate to offer mobile services (that i outsource) and i dont have a mobile version of my site

4th Jun 2012, 04:52 PM	#16
tmoby HyperActive Warrior Join Date: 2011 Location: TBA Posts: 277 Thanks: 6 Thanked 88 Times in 33 Posts	Re: My three 'tools' for mobile design Share on: Sick template - just what I was looking for. Seems like the perfect framework to start with!

8th Jun 2012, 05:12 AM	#17
beewock WordPress Expert War Room Member Join Date: 2012 Posts: 36 Thanks: 17 Thanked 14 Times in 8 Posts	Re: My three 'tools' for mobile design Share on: There's also a CSS framework call Less Framework to create a responsive web design using media query. It helps me a lot. Less Framework 4

12th Jun 2012, 10:52 PM	#19
crasher Warrior Member Join Date: 2012 Posts: 7 Thanks: 0 Thanked 0 Times in 0 Posts	Re: My three 'tools' for mobile design Share on: awesome, thanks for your sharing

13th Jun 2012, 07:10 AM	#20
oildrops HyperActive Warrior War Room Member Join Date: 2005 Location: , , . Posts: 199 Thanks: 7 Thanked 62 Times in 55 Posts Blog Entries: 19	Re: My three 'tools' for mobile design Share on: Will - thanks for sharing. Now one can offer mobile shopping cart solutions to potential clients! This is HUGE! MikeR
	------------------------------------------------------------------------------------------------------------------- Discover How a pack of Thieves Conquered the Black Plague and how You Can Use this Knowledge Today! -------------------------------------------------------------------------------------------------------------------

14th Jun 2012, 02:45 AM	#21
James Andy Active Warrior Join Date: 2012 Posts: 75 Thanks: 0 Thanked 2 Times in 2 Posts	Re: My three 'tools' for mobile design Share on: It’s great to see your post and congrats for this mobile design job.

17th Jun 2012, 12:06 PM	#22
Evolve91 HyperActive Warrior Join Date: 2010 Location: Far, far North Posts: 110 Thanks: 88 Thanked 53 Times in 39 Posts	Re: My three 'tools' for mobile design Share on: Thanks for this post. I'm not doing mobile as of yet but I know its something I need to get up to speed on as I know very little about it. Its a service I'd like to offer but have it outsourced.

17th Jun 2012, 04:32 PM	#23
bizadpros Active Warrior Join Date: 2011 Location: Texas, United States Posts: 78 Thanks: 70 Thanked 38 Times in 37 Posts	Re: My three 'tools' for mobile design Share on: Great ideas presented here. WillR (and yes, I use his products) actually has presented some good points here and solutions. The mobilizer is a great tool. Those using google chrome, get this extension QR-Code Tag Extension and all you do (in google chrome) is go to the site you want to see, and Chrome creates a QR code...then just use your smartphone with a QR reader and view the site. The point is chrome creates the QR Code to s specific site for you to view on your own smartphone. This is in addition to the mobilzer and other tools. I viewed the site WillR recommended for ecommerce and it looks great on my smartphone - don't re-invent the wheel....

18th Jun 2012, 10:15 AM	#24
rsdimitrov Warrior Member Join Date: 2012 Location: Plovdiv, Bulgaria Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts	Re: My three 'tools' for mobile design Share on: To contribute to the thread. My three top tools are: 1. Opera Mobile Emulator This got me started even when I didn't have a physical device at my disposal. 2. Android Emulator (comes with the SDK) The old Androids (2.3, 2.2) are the most widespread versions of the platform, yet their browser is the most problematic. Avoiding their pitfalls with strategically placed JS saved me hours of answering support emails. 3. MobileESP The most comprehensive mobile detection solution to be used server-side. You don't bog the mobile client with useless code and also manage to do some page shifting or even serving completely different content for mobiles. After all, the true "mobile first" design should start on the server: shaving, http requests, useless code from every asset and page. This is how you can get 10-27 times faster load times of pages on mobile compared to their desktop versions (again measured on mobile). As for iPhone: designing in Chrome and keeping the window narrow enough (if using fluid design (and you SHOULD be)) is good enough for previewing a website. Safari renders the pages 99% identical with the way Chrome does. One last tip: resources. Read this seminal work by Luke W. A Book Apart, Mobile First This is what got me started, gave me pointers and debunked many mysteries in the process of designing. In the end you have to create a responsive mobile theme (to fit to a couple of mobile devices) instead of a desktop theme with mobile resolution breakpoints. Start your project on the right foot and you'll see that creating a mobile version of a page is not that hard. Hope this helps