Designing a website that looks and works great on mobile phones can be a tough challenge.
In this course, Web Design for Mobile eCommerce, you will learn the essentials of web design for mobile ecommerce. This course breaks down the essential criteria in designing a killer mobile ecommerce website.
Let's face it, smart phones are everywhere. And more and more people are using their phones to shop online.
In fact, more people now use mobile phones and tablets to visit online stores than using computers. It is estimated that by 2017 the mobile ecommerce will be worth over $700 billion.
Mobile use of the internet is exploding and has already overtaken desktop access. Millions of people are already purchasing goods from either a mobile or tablet device. The disparate screen sizes and range of devices available is overwhelming, but it’s a challenge online retailers need to address.
For many ecommerce merchants — it is not enough to have just an ecommerce website. An ecommerce website should be optimized so that it is mobile-friendly as well.
More and more companies are optimizing their websites for mobile. And many ecommerce sites have reported triple digit growth in revenue after making a mobile-friendly site, so as a web designer you have to stay up-to-date.
In addition, Google has clearly said that it will rank sites that are mobile friendly higher than those that aren’t. For the consumer on the go or away from the desktop, it’s an absolute must that your site is accessible and readable, with simple navigation, easy checkout and visual clarity.
The Web Design for Mobile eCommerce course will not only teach you all the basics of mobile eCommerce, but it will also show you the correct way of designing eCommerce websites for mobile.
In this lesson you’ll learn about eCommerce for mobile. This is a huge sector, currently worth over $200 billion and still increasing.
Having an eCommerce website seems pretty complicated, but it needn’t be. Thanks to some very well thought out platforms, selling products online is now easier than ever. In this lesson you’ll learn about some of the most popular eCommerce solutions out there.
In the last couple of years, eCommerce has become simpler to use thanks to some pretty big leaps in technology. From innovative payment systems to better mobile devices, this lesson will give you an insight into how technology helps us purchase goods more quickly and easily.
When it comes to mobile, layouts become incredibly important. Why? Because there’s very little screen real estate we can use. In this lesson you’ll learn what separates a good layout from a bad one and see a couple of examples.
In this lecture you’ll learn about proper navigation patterns for mobile. This is an aspect which is often overlooked, but plays a huge role in conversion rate and, ultimately, in the success of a website.
When buying products online there’s always one thing that stands between you and that product. Forms. Want to register? You need a form. Want to log in? You need a form. Want to check out? You have to fill in a form and enter your personal information. So, in this lesson you’ll learn about how to properly use forms inside a mobile eCommerce website.
Now that you have some understanding of what eCommerce does, it’s time to take a closer look at the structure of an eCommerce site. In this lesson you’ll learn about login and registration pages. Let’s begin.
This lesson will teach you about the product-related pages. These can vary from site to site, but you usually find a homepage that shows a collection of products, then a category page and a single item page.
The shopping cart is present in almost all eCommerce websites. It’s just like the shopping basket you get in the supermarket, and it will show you everything you’ve ordered at any given time. Let’s see how it’s done.
The checkout page is the last piece of the puzzle, the final destination for the shopper. It’s the page where you actually place your order, so let’s take a look at a few examples and see how it’s done.
In this chapter we’ll start planning a simple mobile eCommerce project. So, let’s begin with a project briefing and take it from there.
In this lesson you’ll start wireframing the login and registration pages. For that, you can use any kind of design or mockup software. Or, even simpler, use a piece of paper.
In this lesson you’ll build a wireframe of the homepage and product page. These are two essential parts of our project.
In this lesson we will build the shopping cart page.
In this final lesson you’ll build the checkout page.
In this lesson you’ll learn how to design the project assets: typography, forms, buttons, and a color scheme. These will really help you later when designing because they offer a strong base on which you can build.
In this lesson you’ll take the wireframes you’ve built in the previous chapter and use them to design the homepage.
Designing the Homepage: Categories and Footer
In this lesson you’ll finish designing the homepage you started previously. The only things left to complete are the categories and footer.
In this lesson you’ll design the category and product pages based on the wireframes you’ve built previously.
The product page is a really important milestone in this design. It’s a key part of the conversion process, so let’s take a look at the wireframes and design it.
We’re very close to finishing our mobile project and we continue with the shopping cart page. So in this lesson you’ll learn how to design it.
Designing the Checkout Page
In this final lesson you’ll learn how to design the checkout page. This is actually a set of four pages, each one corresponding to a specific step in the checkout process.
Welcome to the final lesson of this course where you’ll receive your assignment. You’ve been designing a mobile website based on a set of wireframes, and you might have noticed that some of the elements are missing. To give you an example: where is the icon that takes the user to the account area? It’s your assignment to find that out, and to help you I’ve provided you with the wireframes and design files used in this course, as well as a short list of things you should consider doing. You can find them all in the source files.
I build websites that delight and inform. I create beautiful, usable, professional websites using best practice accessibility and the latest W3C web standards guidelines, resulting in semantic and seo friendly XHTML and CSS. All my websites are lovingly hand coded.
For building websites my weapons of choice are Photoshop and Fireworks for creating layouts, then Coda to produce clean semantic XHTML and CSS. I code to XHTML strict 1. I also use Flash for animations and sometimes full Flash sites. My CMS of choice is Wordpress.
I’ve designed user-friendly interfaces for web projects of all size. Some designs have been featured on Mashable, Design Meltdown and Best Web Gallery. I’ve also published articles at places like SitePoint and Fadtastic, collaborated on projects with Smashing Magazine, and released my own free and paid web products.