DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. Mobilizing websites with responsive design and HTML5

Mobilizing websites with responsive design and HTML5

Mikko Ohtamaa user avatar by
Mikko Ohtamaa
·
Dec. 16, 12 · Interview
Like (0)
Save
Tweet
Share
5.63K Views

Join the DZone community and get the full member experience.

Join For Free

This is a blog post series tutorial for adapting your existing websites for mobile devices without building a separate mobile site. It shows, with examples, how with little changes in your HTML, CSS and Javascript code you can deliver much nicer user experience for small screen and mobile devices. You can make existing HTML designs more mobile friendly with selective CSS loading and HTML5 tags. Selective CSS loading with CSS3 media queries allow you to change layout depending on the browser screen size: this kind of layout is called responsive design.

The tutorial is divided to several, functionality specific, blog posts, each with screenshot examples, explanations and links for more in-depth information.

The tutorial was written in a conjunction with a consulting project for a Finnish public sector organization. As the one of the funding sources is Finnish tax money, including some of my very own pennies, it was a common interest to get the information born in the consultation project published.

Below is an example what one can accomplish.

The site landing page before any mobilization was done; the site is using the default desktop styles on mobile devices:

The site after HTML and CSS adjustments:

1. Prerequisites

Prerequisites for understanding this tutorial are

  • Basic HTML, CSS and Javascript knowledge
  • Some understanding how the process of HTML5 evolution and browser feature support work

2. Table of contents

The tutorial contents is outlined below. I’ll keep linking to new blog posts as I finish writing them. Stay tuned, by following the RSS feed or Twitter.

  • Introduction(part 1)
  • Working on HTML(5) for mobile sites (part 2)
    • There is no HTML5; there is only HTML
    • Strategies for building a mobile site
    • Tools for mobile site building
    • Spoofing the development browser as mobile
    • User agent detection
    • Native apps
  • Considerations when mobilizing a legacy website (part 3)
    • Applying a hint of responsiveness on an existing layout
    • Minizing code changes and risks associated with them
  • Setting mobile browsing viewport (part 4)
  • Mobile site CSS with CSS3 media queries  (part 5)
  • Resizing images in responsive mobile design (part 6)
    • Server-side image resizing solutions
  • Styling HTML forms for mobile screens (part 7)
    • Shortcutting unnecessary user choices
    • HTML5 <input> element enhancements
  • Zoom-on-orientation-change fix for WebKit mobile browsers ( part 8 )
  • Mobile web browser testing overview (part 9)
    • Accessing different mobile browsers on devices and simulators
    • Desktop web browser testing
    • URL shorteting
    • IFRAME based simulators
  • Testing mobile sites on iPhone and its simulator (part 10)
  • Testing mobile sites on Android and its emulator (part 11)
  • Testing mobile sites on Firefox Mobile and Opera Mini (aftermarket browsers) (part 12)
    • Opera Mini
    • Opera Mobile
    • Firefox Mobile (a.k.a. Fennec)
  • Testing mobile sites on Nokia Series 60, Series 40 and Meego (part 13)
  • Testing mobie sites on Windows Mobile (Mango, others) (part 14)
  • Conclusion (part 15)
HTML mobile app Design

Published at DZone with permission of Mikko Ohtamaa, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • AIOps Being Powered by Robotic Data Automation
  • What Java Version Are You Running? Let’s Take a Look Under the Hood of the JDK!
  • Cloud-Based Transportation Management System
  • Distributed Stateful Edge Platforms

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: