Web Design for Mobile eCommerce
4.4 (6 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
107 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Web Design for Mobile eCommerce to your Wishlist.

Add to Wishlist

Web Design for Mobile eCommerce

Learn How to Design an Awesome Mobile eCommerce Website
4.4 (6 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
107 students enrolled
Created by Bernie P.
Last updated 1/2015
Current price: $10 Original price: $20 Discount: 50% off
3 days left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Find out best designs & layout for mobile eCommerce site
  • How to Design Forms for Mobile eCommerce
  • How to Design Login and Registration Pages for Mobile eCommerce
  • How to Design Product Pages for Mobile eCommerce
  • How to Design Shopping Cart Pages for Mobile eCommerce
  • How to Design Checkout Pages for Mobile eCommerce
  • Proper Navigation for Mobile eCommerce
  • Proper Mobile eCommerce Layouts
  • Homepage Design for Mobile eCommerce
View Curriculum
  • basic knowledge of eCommerce

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.

Who is the target audience?
  • Anyone looking for an easy and affordable way to build a Mobile-friendly E-Commerce Site
  • Developers
  • Web Designers
  • eCommerce website owners
Students Who Viewed This Course Also Viewed
Curriculum For This Course
25 Lectures
2 Lectures 05:57
Mobile eCommerce
3 Lectures 15:10

In this lesson you’ll learn about eCommerce for mobile. This is a huge sector, currently worth over $200 billion and still increasing.

Preview 03:28

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.

Preview 05:30

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.

The Transformation of eCommerce
Mobile eCommerce User Interface
3 Lectures 35:14

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.

Mobile eCommerce Layouts

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.

Proper Navigation for Mobile eCommerce

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.

Forms for Mobile eCommerce
eCommerce Pages
4 Lectures 29:09

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.

Login and Registration Pages

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.

Product Pages

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.

Shopping Cart Pages

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.

Checkout Pages
A Mobile eCommerce Project
5 Lectures 32:58

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.

Mobile eCommerce Project Plan

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.

Wireframing: Login and Registration Pages

In this lesson you’ll build a wireframe of the homepage and product page. These are two essential parts of our project.

Wireframing: Homepage and Product Page

In this lesson we will build the shopping cart page.

Wireframing: Shopping Cart Page

In this final lesson you’ll build the checkout page.

Wireframing: Checkout Page
Designing the eCommerce Mobile Site
7 Lectures 01:37:50

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.

Creating the Project Assets

Designing the Homepage: Header, Search and Banner

In this lesson you’ll take the wireframes you’ve built in the previous chapter and use them to design the homepage.

Homepage Design

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.

Homepage Design Part 2

Designing the Category Page

In this lesson you’ll design the category and product pages based on the wireframes you’ve built previously.

Category Page Design

Designing the Product Page

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.

Product Page Design

Designing the Shopping Cart Page

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.

Shopping Cart Page Design

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.

Checkout Page Design
1 Lecture 02:34

Conclusion and Homework

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.

About the Instructor
Bernie P.
4.3 Average rating
16 Reviews
561 Students
2 Courses
Web Developer

I’m a web developer. I specialize in both web development and design. I spend my whole day, practically every day, experimenting with HTML, CSS, C#, PHP and JavaScript; dabbling with Python and Ruby.

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.