Mobile web development – Building great mobile web experiences

Mobile web development – Building great mobile web experiences

This is a series of posts which are simply my notes from a online course I took up on ‘Mobile Web Development: Building Mobile Web Experiences’, CS256 on Udacity.com, which is offered in participation with Google. Here is the link to the course.

Course Home Page on Udacity.com

Goes without saying that reading notes can never compare to taking the course yourself. Many thanks to course instructors – Chris Wilson, Peter Lubbers & Sean Bennett.

If you are really interested, stop reading further and just click on the link to the course above and get started like I did.

——————————

Building great mobile web experiences

Mobile is clearly big deal and for quite some time, I have wanted to understand more about building for mobile than my past few years in the internet industry have taught me.

What was this course about? To quote from Udacity itself, ‘This course is for experienced front-end web developers who’d like to learn what it takes to create great mobile experiences. In order to succeed in this class, you should be comfortable with HTML, CSS, and Javascript, and should have experience creating web apps, either professionally or for fun’.

I have some very basic understanding of html and css but I am not a web developer. I am however, very interested in being part of building great online products. So while being able to code is still just a daydream, for now, I hope that these notes

  • Will help ensure that I do not forget the amazing stuff I have picked up in this course.
  • Should be useful for professionals / students who understand the internet space, are interested in the tech aspects of it but are neither programmers nor domain experts on building online products.

This course essentially highlights the aspects that need to be focused upon when building for mobile web rather than desktop and should serve as a basis to understand both the challenges and the opportunities on mobile better.

I have deliberately chosen to ignore those aspects of the course which require familiarity and expertise with writing code and have rather focused on parts which would be useful from a overall mobile product / business perspective.

Mobile Developer tools

As a first step, if you are using the Chrome + Android combination, you would use the Chrome developer tool – to analyze & debug your mobile app

Getting started

  • Connect your machine to your mobile with an USB cable
  • Turn on developer mode on your mobile
  • Turn on USB debugging on your mobile

Lets now begin to understand the key elements of building a great mobile web experience. In the following posts, following topics are covered.

  • Responsive design, given the wide array of mobile handsets displays in terms of screen sizes, dimensions & pixels.
  • Ensuring delivery of responsive images
  • Optimizing user input and leveraging the touch interface
  • Leveraging the various sensors on mobile
  • Building for offline scenarios and taking care of data storage related issues

You can read them in any order though.

ps: to find all posts related to this post, searching for ‘mobile web development’ should help.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.