CS420 Official Handouts

Table of Contents

No.

Why Responsive Web Design?

Importance of Performance · Analyzing Performance · Touch Interaction · Simple rules for touch UI · Click Delay · Supporting Touch · Mouse Emulation · Getting Started With Touch Events · Adding Mouse Support · Pointer Events · Pointer Code Example · Input Introduction · Regular Expression Validation · Two Important Features of Input · Input in older browsers · Wrapping in Label · telecolon URL · Sensors on mobile · Camera Access · Capture Extension

Welcome to CS420 - Web Development for Portable Devices. This course develops the ability to apply familiar HTML, CSS, and JavaScript skills to the mobile web, an environment that has become a major part of everyday web use. The emphasis is on understanding how portable screens, changing network conditions, processing limits, touch interaction, mobile input controls, media, and device capabilities affect the way a web experience should be designed and implemented. The discussion therefore begins with the mobile web itself and then moves through the tools, layout techniques, interaction models, form controls, performance concerns, and device capabilities needed to build for portable devices. The objective is not to replace HTML, CSS, or JavaScript, but to apply them with a clear understanding of the environment in which a mobile page is viewed and used.

Topics To Be Covered:

•  5) Mobile Development Tools
•  7) Using Development Tools on Mobile
•  8) Reverse Port Forwarding
•  9) Mobile Tools for iOS
•  10) Mobile First
•  11) Constraints of the Canvas

Mobile web development uses the same foundation as ordinary web development, but the context is different. A page must remain readable, usable, and efficient across narrow screens, changing orientations, different pixel densities, touch input, and varying network conditions. This topic builds that foundation step by step. A mobile page must present the most useful information without forcing the user to navigate a desktop-sized canvas. Development tools make it possible to inspect the real page on a device, while viewport settings and fluid dimensions allow the layout to follow the available screen. These ideas prepare the page for the responsive rules introduced later.

The mobile web uses the same core web technologies, but the design must be considered from the perspective of portable devices and mobile users.

The term mobile web does not describe a separate set of web technologies. It describes web content and applications viewed in the context of portable devices, where screen size, orientation, input method, connectivity, and device capabilities can differ substantially. A useful definition therefore focuses on the conditions in which the same web platform is being used.

Mobile users generally need essential information and functions quickly, so clarity, accessibility, and careful content selection become central design concerns.

Mobile web development is ordinary web development with additional constraints and opportunities. It continues to use HTML for structure, CSS for presentation, and JavaScript for behavior, while also considering mobile-oriented browser features and APIs. Smaller screens, variable bandwidth, and limited processing resources require careful prioritization. These constraints encourage a mobile-first approach in which the most important parts of the user experience are made clear before enhancements for larger screens are added. The course concentrates on the platform fundamentals required by a mobile web developer rather than teaching a particular framework or a native-application wrapper. This keeps the principles applicable even when development tools and libraries change. Mobile users commonly visit a page to reach a specific piece of information or complete a focused task. Content and navigation should therefore be clear, accessible, carefully selected, and quick to reach.