Developing Mobile Websites
4.0 (2 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.
141 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Developing Mobile Websites to your Wishlist.

Add to Wishlist

Developing Mobile Websites

Learn how to use HTML5, CSS, JavaScript, and other tools to create mobile websites from the experts at Webucator.
4.0 (2 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.
141 students enrolled
Published 9/2012
English
Price: $45
30-Day Money-Back Guarantee
Includes:
  • 3 hours on-demand video
  • 39 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Description

In this “Developing Mobile Web Sites: How to Make a Mobile Website “class, you will learn to use HTML5, CSS, JavaScript, and other tools create websites that are responsive: sites that adapt their layout to the client device being used, whether it be a Smartphone, tablet computer, or desktop computer/laptop. You will learn to use CSS media queries, mobile-friendly HTML5 features, JavaScript enhancements, and various frameworks to build websites that look as good on an iPhone or Android as they do on a desktop or laptop computer.

Take this Developing Mobile Websites course and learn how to make a mobile website.

</p>
Students Who Viewed This Course Also Viewed
Curriculum For This Course
81 Lectures
05:36:16
+
Udemy Mobile Websites Promo
2 Lectures 03:11
Udemy Mobile Websites Promo
03:05

Before you begin the course, please take a moment to check out the link below to setup your computer and download your exercise files. http://www.webucator.com/help/wiki/index.cfm/MBL101 
Class Files
00:06
+
Designing for Mobile
4 Lectures 10:18
Lesson Introduction
00:37

  Responsive Design: Good for All Devices Responsive web design is the process of building Web pages to work well for all viewing environments: whether users access our sites on an iPhone or Android smartphone, an iPad tablet, a small laptop, or a desktop computer with a huge monitor, we want the si…
Preview 02:33

  The New York Times and Boston Globe Web Sites Duration: 10 to 20 minutes. In this exercise, you will evaluate how the Web sites for two major American newspapers differ in responsiveness. Can you find the code behind the differences in the sites' behaviors? Your work on this exercise - and on work…
Preview 02:07

+
Flexible Grids
9 Lectures 36:30
Lesson Introduction
01:18

  The Flexible Grid: A More Responsive Layout Strategy The Case for Flexible Responsive Web design is the process by which we craft the markup and stylesheets for a site to adapt to the user's environment. Users viewing our site on a smartphone, a tablet device, a laptop with a small screen resoluti…
The Flexible Grid: A More Responsive Layout Strategy
07:05

The Flexible/Inflexible Demo Reviewed
05:10

A Better Jazz Calendar Let's now apply the same process to the Jazz Calendar page - open the file FlexibleGrids/Demos/jazzcalflexible.html in your browser. We'll use a width of 90% for the outermost (#container) div. The container div (#main) inside of #container gets a width of 93.75%, since 900 /…
A Better Jazz Calendar
01:43

The Flexible JazzCal Site Reviewed
06:29

The Pickup Soccer Site Duration: 20 to 30 minutes. In this exercise, you will create the first page of a site dedicated to listing local soccer (football, if you aren't in the US!) games - a place for folks to find pickup games at local fields where anyone can join in the game. The recreational socc…
The Pickup Soccer Site
02:21

Solution to Pickup Soccer Site Exercise Reviewed
06:19

Making Pickup Soccer Flexible Duration: 20 to 30 minutes. Let's apply the same process to the Pickup Soccer page that we did to the Jazz Calendar page: we'll change a fixed-width design into a more flexible, percentage-based design. Keep in mind the key rule here: percentage widths are calculated by…
Making Pickup Soccer Flexible
00:44

Solution to Making Pickup Soccer Flexible Reviewed
05:19
+
Flexible Images and Other Media
8 Lectures 20:02
Lesson Introduction
01:13

Flexible Images and Other Media Improving the Jazz Calendar Site The updates to the Jazz Calendar site we made in the previous lesson took a static, fixed-width, pixel-based design and turned it into a more flexible, percentage-based page. But a quick examination of the page - especially when one re…
Flexible Images and Other Media
02:34

Flexible Images and Other Media Reviewed
05:39

Fixing Images in Pickup Soccer Duration: 10 to 15 minutes. In this exercise, you will edit the Pickup Soccer site to learn how to scale image widths dynamically. Open FlexibleImages/Exercises/flexiblesoccerimages/index.html and FlexibleImages/Exercises/flexiblesoccerimages/css/style.css. Edit the CS…
Fixing Images in Pickup Soccer
00:29

Flexible Images in Pickup Soccer Exercise Reviewed
03:10

Flexible Widths for Embedded Video Duration: 10 to 15 minutes. We consider now an interior page for the Pickup Soccer site - the "About Us" page. mocked up with some greeking text. We include a video - an embedded YouTube video of cool soccer tricks, appropriate for our audience. Of course, in the a…
Flexible Widths for Embedded Video
00:47

Flexible Background Image in the Pickup Soccer Site Duration: 10 to 15 minutes. In this exercise, you will add a graphic background for the right column of the Pickup Soccer site to match this design: Open the files FlexibleImages/Exercises/flexiblebg/index.html and FlexibleImages/Exercises/flexible…
Flexible Background Image in the Pickup Soccer Site
00:43

Flexible Background Image in the Pickup Soccer Site Exercise Reviewed
05:26
+
Media Queries
8 Lectures 28:06
Lesson Introduction
01:07

Media Queries Targeting Widths and Devices with CSS3 Media Queries Our Jazz Calendar site is more and more flexible: we've used a percentage-based layout to scale the site independent of the browser window's size, and we've applied CSS to scale images and other fixed-width elements. But the design s…
Media Queries
04:12

Media Queries Reviewed
07:11

Adding Media Queries for Pickup Soccer Duration: 20 to 30 minutes. Let's use media queries to fix a few things on the Pickup Soccer site. The top (white) nav has never worked well once the browser window is resized too small (it slides under the logo when the container runs out of room to float it r…
Adding Media Queries for Pickup Soccer
01:21

Linearizing the Pickup Soccer Site Duration: 20 to 30 minutes. In this exercise, you'll update the Pickup Soccer site again, this time presenting the sidebar under the main column at widths under 520px, as shown: Open MediaQueries/Exercises/sidebarnotfloated/index.html and MediaQueries/Exercises/sid…
Linearizing the Pickup Soccer Site
01:31

Linearizing the Pickup Soccer Site Exercise Reviewed
05:55

Pickup Soccer - For Phones Duration: 20 to 30 minutes. In this exercise, you will update the Pickup Soccer site for mobile devices - we'll use media queries to display the site like this on a phone: Open MediaQueries/Exercises/devicewidth/index.html and MediaQueries/Exercises/devicewidth/css/style.c…
Pickup Soccer - For Phones
01:23

Pickup Soccer - For Phones Exercise Reviewed
05:25
+
The Viewport
5 Lectures 13:36
Lesson Introduction
00:47

  The Viewport Our Jazz Calendar site is getting better and better - our flexible design now benefits from media queries to target both window widths and device widths. But the scale of the site, when viewed on a mobile device, leaves a bit to be desired - even the smartphone-specific media queries…
The Viewport
01:21

The Viewport Reviewed
06:07

  Scaling the Pickup Soccer Site Appropriately for Devices Duration: 10 to 15 minutes. In this exercise, you will use the viewport tag to control the initial zoom and scaling of the Pickup Soccer site on smartphone devices. Open Viewport/Exercises/viewporttag/index.html and Viewport/Exercises/viewpo…
Scaling the Pickup Soccer Site Appropriately for Devices
00:38

 

Scaling the Pickup Soccer Site Appropriately for Devices Reviewed
04:42
+
HTML5: Mobile Specific
7 Lectures 22:20
Lesson Introduction
00:53

  New HTML5 Features Forms Our mobile sites will need to accept user input - registration forms, comment forms, and the like to ask users to send us, via form fields, some information. HTML5 makes available a set of new form input types and attributes that enhance the user experience. Keep in mind t…
New HTML5 Features
01:47

New HTML5 Features Reviewed
04:43

  Local Storage Like cookies, HTML5 local storage offers a mechanism for storing key/value pairs locally, within the client browser, even after you navigate away from the page, close the browser, etc. Unlike cookies, these data are never sent back to the server. In addition, HTML5 offers session sto…
Local Storage
01:32

 

Local Storage Reviewed
06:11

  Registration Form for Pickup Soccer Duration: 20 to 30 minutes. In this exercise, you will create a registration form for the Pickup Soccer site: Open the file HTML5MobileSpecific/Exercises/soccer/index.html in your file editor and in your browser. Add a form and input fields for name, phone, emai…
Registration Form for Pickup Soccer
01:19

Registration Form for Pickup Soccer Reviewed
05:54
+
GeoLocation API
7 Lectures 27:53
Lesson Introduction
00:50

  The GeoLocation API One can easily see the value of location-aware Web sites; increasingly, we rely on our phones to find the nearest gas station, restaurant, or shopping center. As we move through this lesson, we will explore how location-aware code might enhance the user experience for visitors…
The GeoLocation API
03:38

The GeoLocation API Reviewed
06:02

  Google Maps In the demonstrations below and the next few exercises, we'll make use of the Google Maps API. See the Google Developers Maps page for lots more information about what one can do to integrate maps into your pages. Jazz Calendar : Finding Nearby Gigs Let's build a page for the Jazz Cale…
Google Maps
02:18

Google Maps and the GeoLocation API Reviewed
05:31

  Adding a Location-Aware Page to the Pickup Soccer Site Duration: 20 to 30 minutes. In this exercise, you will use the GeoLocation API to offer visitors to the Pickup Soccer site a way to find pickup games near their current location, as shown in the screen shot: Open ClassFiles/GeoLocationAPI/Exer…
Adding a Location-Aware Page to the Pickup Soccer Site
03:44

Adding a Location-Aware Page to the Pickup Soccer Site Reviewed
05:49
+
Consolidating the Web with Native Extensions
8 Lectures 27:44
Lesson Introduction
01:04

  Integrating with the Home Screen - Custom Icons iPhone and other devices offer users the ability to add a shortcut/bookmark to a Web page on their home screen; our job as developers is to provide a custom icon that best represents our site or page. Including a line of code in the head of each page…
Integrating with the Home Screen - Custom Icons
04:06

Custom Icons & Hiding Browser UI Reviewed
05:11

  Using the Accelerometer Both the iPhone and the Android expose accelerometer data from the phone through JavaScript. On the iPhone, the window.ondevicemotion event handler gives the device's current acceleration via the accelerationIncludingGravity.x and accelerationIncludingGravity.y values. To i…
Using the Accelerometer
01:12

Accessing the Accelerometer Reviewed
06:43

  Adding Home Screen Icon and Address-Bar Hiding to the Pickup Soccer Site Duration: 10 to 20 minutes. In this exercise, you will add a custom icon for a page on the Pickup Soccer site and add JavaScript to hide the address bar. Open ConsolidatingWebNativeExtensions/Exercises/soccer/index.html in yo…
Adding Home Screen Icon and Address-Bar Hiding to the Pickup Soccer Site
01:13

  PhoneGap Accessing Camera, Contacts, Calendar, and More - But Not Yet Lots of smartphone features, for instance the current location through the GeoLocation API and the accelerometer, are accessible via client-side JavaScript. But sadly, many other phone features - like the calendar, contacts, and…
PhoneGap
03:03

PhoneGap Reviewed
05:11
+
Video
5 Lectures 18:40
Lesson Introduction
00:54

  Optimizing the Video Experience for Mobile Optimizing for Mobile As the percentage of traffic to our Web sites from users on mobile devices grows, so too, of course, does the percentage of users viewing video from mobile. Before we delve into file formats, HTML5 code, or JavaScript, let's spend a…
Optimizing the Video Experience for Mobile
05:20

Video on Mobile
06:09

  Soccer Video Duration: 20 to 30 minutes. In this exercise, you will add several videos to an interior page on the Pickup Soccer site. The following screen shots shows the page on an iPhone - the screen capture on the left is the top of the page and the screen capture on the right is the bottom of…
Soccer Video
01:43

Soccer Video Exercise
04:33
2 More Sections
About the Instructor
Webucator Training
4.1 Average rating
32 Reviews
751 Students
12 Courses
Global training company. Trained over 26,000 students. Thousands of student testimonials.
  • Founded in 2003.
  • Webucator provides technical and business training.
  • Webucator is a Microsoft Certified Partner for Learning Solutions (CPLS)
  • Webucator is a Registered Education Provider (R.E.P.) approved by PMI to issue professional development units (PDUs) for its training courses.
  • Webucator has a GSA Contract (GS-35F-0556S).
  • We have provided training to over 70% of the Fortune 100 companies (See Partial Client List).
Why should you choose us?