Web Design for Mobile eCommerce

Learn How to Design a Killer Mobile eCommerce Website
4.8 (4 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.
87 students enrolled
Instructed by Andi Paul Development / E-Commerce
$20
Take This Course
  • Lectures 25
  • Contents Video: 3.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2015 English

Course Description

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.

What are the requirements?

  • basic knowledge of eCommerce

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
Introduction
Preview
01:14
Getting Started with eCommerce
Preview
04:43
Section 2: Mobile eCommerce
03:28

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

05:30

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.

06:12

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.

Section 3: Mobile eCommerce User Interface
13:53

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.

06:38

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.

14:43

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.

Section 4: eCommerce Pages
05:59

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.

07:45

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.

09:24

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.

06:01

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.

Section 5: A Mobile eCommerce Project
04:49

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.

07:36

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.

10:17

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

03:12

In this lesson we will build the shopping cart page.

07:04

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

Section 6: Designing the eCommerce Mobile Site
15:57

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.

17:34

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.

13:08

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.

16:22

Designing the Category Page

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

14:27

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.

07:32

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.

12:50

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.

Section 7: Conclusion
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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Andi Paul, 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.

Ready to start learning?
Take This Course