Ever wonder what makes a mobile Web experience really positive? This course shows you how to build mobile Web apps that draw users into your content on their smartphones and tablets.
Here are key skills you're acquire in this class
The course covers both technique, and design, so that you can build mobile Web apps that are as appealing as they are functional. It consists of six sessions, each with video lectures, detailed notes, and sample code.
In this lecture, we'll examine examples of successful Web apps, and identify features that make them particularly useful and attractive to visitors. You'll come away with a good sense of the features available to you as a Web app developer, and how to make the best use of them.
In this lecture, I'll break down the skills you'll be drawing on to build Web apps. I'll provide you with resources to strengthen or catch up on any gaps in your HTML skillset needed to build Web apps. And I'll help you accumulate and organize free online resources needed to build mobile web apps.
Here, I'll break down just how Web apps are actually built, and preview how we'll do that. Wait! We won't just "preview" that, we'll build our first Web app page.
You might be surprised to learn that most multi-page mobile Web apps are actually a single HTML page! I'll explain why that is, and how that works, in this lecture. And then I'll walk you through what looks and feels like a multi-page Web app.
Here we'll set up a structure that allows us to integrate unlimited "pages" into our Web app.
High resolution and larger mobile devices have created a demand, and capacity for multi-column designs in Web apps. I'll show you how to design effective ones - starting with tabbed navigation bars.
Collapsible sets -- more powerful than just collapsible blocks -- are an effective way to present a lot of content in a small space. I'll show you how Boston's Logan Airport does that in their mobile site, and then walk you through how to do it yourself.
The CSS that makes up mobile Web apps is insane -- too insane to customize by hand even if you're a CSS guru. The solution: jQuery Mobile ThemeRoller. We'll define custom themes here.
Having built a custom theme, the next step is to download it and install on in your mobile Web app. We do that here.
Mobile app themes actually include multiple color sets. I'll walk you through how to apply those.
A basic implementation of columns in mobile design is a tabbed navigation bar. We build that here.
Don't use tables to design mobile Web app layouts with columns and rows... let me show you how to do it with grids and blocks in a way that provides a better experience for mobile users. We do that here.
Why do mobile apps normally avoid multiple-columns? And how has the evolution of larger and more high resolution smartphones and tables impacted that? When, and how, should you design with columns?
Here I'll review key concepts we covered in class, add a couple important new tips, and point you towards additional resources.
David Karlins is the author of HTML5 and CSS3 For Dummies; Developing Mobile Websites With HTML; co-author of Building Websites All-In-One For Dummies; and author of thirty other books on Web Design. His syndicated online courses are taught through thousands of colleges and universities around the world. David's design clients have ranged from Hewlett Packard to the Himalayan Fair.