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
$45
Take This Course
  • Lectures 81
  • Contents Video: 3 hours
    Other: 2.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 9/2012 English

Course 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>

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

Udemy Mobile Websites Promo
03:05
Article
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 
Section 1: Designing for Mobile
Lesson Introduction
00:37
Article
  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…
Article
  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…
Reviewing the New York Times and Boston Globe Websites
Preview
05:01
Section 2: Flexible Grids
Lesson Introduction
01:18
Article
  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/Inflexible Demo Reviewed
05:10
Article
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 /…
The Flexible JazzCal Site Reviewed
06:29
Article
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…
Solution to Pickup Soccer Site Exercise Reviewed
06:19
Article
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…
Solution to Making Pickup Soccer Flexible Reviewed
05:19
Section 3: Flexible Images and Other Media
Lesson Introduction
01:13
Article
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 Reviewed
05:39
Article
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…
Flexible Images in Pickup Soccer Exercise Reviewed
03:10
Article
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…
Article
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 Exercise Reviewed
05:26
Section 4: Media Queries
Lesson Introduction
01:07
Article
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 Reviewed
07:11
Article
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…
Article
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 Exercise Reviewed
05:55
Article
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 Exercise Reviewed
05:25
Section 5: The Viewport
Lesson Introduction
00:47
Article
  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 Reviewed
06:07
Article
  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…
04:42

 

Section 6: HTML5: Mobile Specific
Lesson Introduction
00:53
Article
  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 Reviewed
04:43
Article
  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…
06:11

 

Article
  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 Reviewed
05:54
Section 7: GeoLocation API
Lesson Introduction
00:50
Article
  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 Reviewed
06:02
Article
  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 and the GeoLocation API Reviewed
05:31
Article
  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 Reviewed
05:49
Section 8: Consolidating the Web with Native Extensions
Lesson Introduction
01:04
Article
  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…
Custom Icons & Hiding Browser UI Reviewed
05:11
Article
  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…
Accessing the Accelerometer Reviewed
06:43
Article
  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…
Article
  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 Reviewed
05:11
Section 9: Video
Lesson Introduction
00:54
Article
  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…
Video on Mobile
06:09
Article
  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 Exercise
04:33
Section 10: jQuery Mobile
Lesson Introduction
01:25
Article
  jQuery Mobile Mobile Focus jQuery Mobile is "a unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation." With thoroughly tested code that works consistently across all major phone platforms, support for…
Article
  The Basics The Page Model Pages in jQuery Mobile site are represented by with jQuery Mobile enabling Ajax-based transition between pages. You can organize pages into different files or all in the same file (with multiple s); regardless, jQuery Mobile will enable Ajax transitions between the differ…
Article
  Drag-and-Drop Code Builder A useful tool in learning to write jQuery Mobile code is the drag-and-drop UI builder (from Codiquq) right on the jQuery Mobile home page . Select some options from the top menu, drag to the screen, set text or configure as needed, and voila: clicking the Download HTML b…
The Codiqua WYSIWYG Code Builder
03:49
Article
Gestures Like all JavaScript frameworks, jQuery Mobile offers support for event handling - convenient ways to respond programmatically to user interaction with our pages. Usefully, this includes touch events - responding to finger taps and swipes to change pages, open dialogs, etc. Here are the touc…
Gestures Reviewed
07:43
Article
  Handling Orientation Change Mobile phones, unlike desktops and laptops, often change orientation: we tilt our phones from vertical (portrait) to horizontal (landscape) orientation. Web pages and apps that respond to orientation changes are more useful and more interesting. jQuery Mobile makes easy…
Handling Orientation Change Reviewed
07:28
Article
Pickup Soccer with jQuery Mobile Duration: 25 to 35 minutes. Let's use the jQuery UI builder to create a mobile-optimized page for the Pickup Soccer site. We'll add a simple header and footer and use a "collapsible-set" element to let the user pick from a few different content choices: Visit the jQu…
Article
What about Desktops? As mentioned above, jQuery Mobile is a mobile-centric library, emphasizing UI widgets and presentation specifically for smartphones and tablets. But (as also mentioned above), jQuery Mobile certainly works fine for desktop browsers. Offering a better desktop experience is easy e…
Section 11: Framework: Foundation
Lesson Introduction
00:57
Article
  Foundation: A Responsive Grid Framework Wouldn't it be nice if we could avoid the specifics of all of those grid layout percentage widths and media queries, and concentrate on higher level layout considerations? If typography, buttons, forms, and other UI elements started from some good-looking CS…
The Foundation Framework Reviewed
06:48
Article
  A Foundation Layout for Jazz Calendar Let's use Foundation to render a new layout for the Jazz Calendar site: we'll use a large background image and off-to-the-right main content on desktops, and a more straightforward design on phones: Open the file FrameworkFoundation/Demos/jazzcal.html in your…
Foundation Layout for the Jazz Calendar Site Reviewed
04:36
Article
  A Foundation Layout for Pickup Soccer Duration: 15 to 25 minutes. In this exercise, you will realize a new design for the Pickup Soccer site using Foundation, presenting the site differently for mobile and desktop users: For desktop users, let's present the the site as a smaller left column - with…
04:38

 

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Webucator Training, 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?

Ready to start learning?
Take This Course