The 'Progressive Enhancement' and 'Graceful Degradation' principles are behind its design. It consists of user interface elements and programming constructs that provide consistent functionality across a large variety of mobile and desktop web browsers.
JQuery Mobile is a user interface system built on the popular JavaScript framework jQuery. See the original reference for further details. Most of the discussion in this section has been borrowed from the documentation in.
For the purposes of this tutorial, our scope will be limited to the considerations above. Of course, a typical real-life application will have additional or different design concerns.
Support for multiple devices/browsers: Applications should have consistent look-and-feel and behavior across supported devices and browsers.Missing fields should be easy for the user to find. Error handling: If the user forgets to enter a required field in the form, submission should fail with a warning dialog.
There will be no need to open multiple network connections to download pages several times. Once the page is downloaded into the browser, different sections of the page will be shown to the user depending on the particular context. All user interface constructs, such as error dialog and confirmation pages, will be part of the html page. Short response time: It is preferred for the web application to contain a single html page with a simple user interface.Design Considerationsīefore going into technical details, let us talk about main considerations driving the design of the application.
The application in this tutorial has been tested against an Android 2.2 device and an iOS 4.1 device. JQuery Mobile framework supports a variety of browsers including iOS devices, Android devices, Blackberry OS 6, and webOS (for a support matrix, see ). Conclusion and next stepsįurther resources to help you take your next steps.Figure 1. Prepare your content for devices with multiple screens. Media featuresĪ round-up of all the ways that media features let you respond to devices and preferences. User interface patternsĬonsider some common UI elements that adapt to different screen sizes. Prepare your pages for different input mechanisms mouse, keyboard, and touch. AccessibilityĮnsure that your website is available to everyone. ThemingĪdapt your designs to match user preferences such as a dark mode. Use SVG for scalable responsive iconography. The picture elementĮxercise more creative control over your images. Give your visitors the most appropriate images for their devices and screens. Make your text legible and beautiful, no matter where it appears. Micro layoutsīuild flexible components that can be placed anywhere. Macro layoutsĭesign page layouts using a choice of CSS techniques. Prepare your designs for different languages and writing modes. Media queriesĪdapt your designs to different screen sizes using CSS media queries. If you’re completely new to making websites, there's an introduction to HTML and another course to help you learn CSS.įind out where responsive design came from. A basic understanding of HTML and CSS should be enough. This course is created for beginner and intermediate designers and developers. By the end, you’ll also have an understanding of what the future might hold for responsive design.Įach module has demos and self-assessments for you to test your knowledge.
From there, you’ll learn about responsive images, typography, accessibility and more.Īlong the way you’ll find out how to make websites responsive to user preferences and device capabilities. The first few modules will ease you in with a history of where responsive design came from and a look at the fundamentals of responsive layouts. This course takes you on a journey through the many facets of modern responsive web design.