Andrew H

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

Thanks for the share.

eternalwarrior

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

olivialowrie

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

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

Andrew H

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

Thanks for sharing that!

thebirddog

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

I sent you a private message

phpguy

I really like jquerymobile has basic template optimized across devices

nickhumph

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?

Increase Page Conversions by 72% through the most underrated marketing tool out there!

Andrew H

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

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

[FREE Video] How to Get Your First Paying Client

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

tycoonms

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

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

beewock

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

The best tool for this is:
Mobilizer | Springbox

[FREE Video] How to Get Your First Paying Client

crasher

awesome, thanks for your sharing

oildrops

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!
-------------------------------------------------------------------------------------------------------------------

James Andy

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

Evolve91

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

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

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