Our website will be down for scheduled maintenance on Thursday, September 18, at 11 p.m. Pacific Time and should be back up by Midnight. We apologize for any inconvenience.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Installing the tools

From: Mobile Web Design & Development Fundamentals

Video: Installing the tools

Before we can get started developing our mobile web pages, we first have to set up our development environment, and here are the steps we are going to go through. First we're going to need to install some development tools, and you can use whatever HTML/CSS/JS editor you like to use, whether it's Dreamweaver or whether it's BBEdit or TextWrangler on the Mac, or TextPad or whatever on Windows, it doesn't really matter. I am going to be using a tool called Aptana Studio because it's free, and it works cross-platform on both Windows and Mac, but again you can use whatever editor you like, or already used to using.

Installing the tools

Before we can get started developing our mobile web pages, we first have to set up our development environment, and here are the steps we are going to go through. First we're going to need to install some development tools, and you can use whatever HTML/CSS/JS editor you like to use, whether it's Dreamweaver or whether it's BBEdit or TextWrangler on the Mac, or TextPad or whatever on Windows, it doesn't really matter. I am going to be using a tool called Aptana Studio because it's free, and it works cross-platform on both Windows and Mac, but again you can use whatever editor you like, or already used to using.

Your also going to need a web server to test your pages on, and it can either be local or it can be hosted, and we'll show you a quick way to get that installed on your machine. And then there are some additional script libraries and templates that we'll need to download, and you need to save those into your Exercise Files folder. After we get the tools, we'll install the device emulators. Device emulators are really good for testing layout and functionality of web pages, but they're not really good for testing performance because they're running on a hosted computer, and as a result the performance, you're seeing is not really the performance of the real device in the user's hand.

For that you really need to have access to a physical device to test on, or use one of the testing services that are available. But emulators are really good, especially for mobile web development, because in many cases you need to just make sure that your layout and the web page are functioning properly, and emulators are great for that. Emulators are available for Windows phone, Android, iPhone, Opera, and of course many others, like BlackBerry and Palm. In this course, I am going to be showing the Windows phone, Android, iPhone, and Opera ones simply because those are the most popular, and you can get really good platform coverage with those. For example, with Android and iPhone you can get mobile WebKit coverage, which is what BlackBerry and Palm use anyway.

So I'll just be downloading those and using those. After we install the device emulators, we'll see how to set them out and explore how they're used. Then we'll take a look at some really good resources and documentation out on the web for building mobile web pages, and then we'll build and run our first mobile web page. But to start, let's go ahead and get the development tools we're going to need. So I am going to jump over my browser. So here's the web site for Aptana Studio, and this is Aptana version 2. They may be on a different version by the time you get here, but that's the version I am going to use.

To download Aptana Studio--and again this is cross-platform, you can use whatever platform you're using whether it's Mac or Windows, and it runs because it's based on Eclipse. So you simply click on the Download Aptana Studio button and Aptana Studio will download to your machine. So once you've installed it and it's on your computer, you can run it and let's take a quick look at it. Okay, this is Aptana Studio, and you can see that it's pretty much probably like many other web-based IDEs that you're used to using.

Here's the workspace and if we open up a file, you can see that this is the editor space right here, and let's open up another file. Here's a file. It's example HTML file. We'll be seeing this later on in the course, but you can see it's got color coding for HTML code and so on. So this is pretty much the editor that I'm going to be using. There's nothing really too fancy about it. I'll also be editing HTML, CSS, and JavaScript code, and then from here I can run my pages in a set of different browsers to test them out.

So that's Aptana Studio and as you can see, it's just a pretty basic HTML/CSS/JavaScript editor, among other things of course. And you can use whatever editor you want to, as I said earlier, but this is the one I am going to be using throughout this course, and we'll take a look at some other tools we'll be needing later on in this chapter.

Show transcript

This video is part of

Image for Mobile Web Design & Development Fundamentals
Mobile Web Design & Development Fundamentals

46 video lessons · 24628 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.