In the previous chapters, we learned about forms: what forms are, how we can validate them, how we can improve the look and feel of a form, and how to store the information collected with the help of forms into a database. But, with the enhancement of technology, different devices with different screen resolutions require different layouts. So, in this chapter we will learn how to make our forms responsive.
In this chapter, we will cover the following topics:
- What is responsive design
- What are media queries
- What are fluid grids
- How to make our forms responsive
- Guidelines for making responsive forms more effective
The term responsive design was introduced in May, 2010, by Ethan Marcotte, a writer and web designer, in an article called Responsive Web Design that was published on A List Apart.
Basically, responsive design means how the content is displayed on the various screens, such as mobiles, tablets, or desktops. An approach by which a website or a particular page dynamically adjusts itself according to particular screen resolution to give the best user experience is responsive design. It ensures great user experience as it works independently across various devices and resolutions.
Using fluid, proportion-based grids, flexible images, and CSS3 media queries, a site designed with responsive web design automatically adapts the layout to the particular device resolution.
Web design once used to be simple. Web designers would design for the most popular desktop screen size, create a single layout that works for most of the devices, which allowed us to easily divide our design into a various number of grids so that we can have a well-laid, cohesive, and harmonic page.
But with the enhancements in technology and the introduction of various devices, such as smart phones, tablets, or even mini laptops, the whole experience of web layout and design was changed.
Change in Web has also changed the way people use the Internet. In earlier approaches to web design, it was difficult to use the Internet in mobile devices as the particular website, which was designed for desktops, had scrolling and had to zoom in or out for reading the text and wasting time. For example, pages viewed in a desktop might have links that are text-based and compact which are difficult to click on. But with responsive design, we can tackle these problems with the available features and capabilities of HTML5 and CSS3.
If that website or page were responsive, the text would be larger, all the content would fit on the screen, and the navigation would be mobile-optimized.
The breakpoints in responsive web design are the browser widths that have a media query declaration to change the layout of the website or web page once the declared range is achieved.
Google recommends building smartphone-optimized sites and it supports the following three configurations:
- The sites which are designed to be responsive serve all devices on the same set of URLs, with each URL rendering the same HTML to all devices and just utilizing CSS to change how the page is rendered on the device
- The sites which dynamically serve all devices with the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device
- There are sites which have separate mobile and desktop URLs
Some benefits of using responsive designed websites are as follows:
- Using a single URL for a particular content makes it easier for users to interact with, share, and link the content.
- Rather than developing and maintaining multiple websites for desktop and mobile, we just need one website to develop and maintain that works on all kinds of devices.
- Loading time is reduced as no redirection is needed to get the device-optimized view. Moreover, user agent based redirection can degrade a website's user experience and is more error-prone.
- It is future friendly; this means it allows us to adapt to new technologies and progressively enhance our website as time goes on.
Apart from changing the layout, there is a lot more to responsive design. We can go beyond the viewing size of the device and can focus on the functionality or capabilities of a device. In cases, where our website uses hover functionality but we need to change it for touch screen devices that do not support hover functionality, we can serve different images or crop images on changing the screen resolution. Moreover, we can check whether we can trace the location of the device or whether the device is working on the Internet, or WIFI, and many more.
The layout of a web page depends on or we can say is controlled abstractly by the following web languages:
- HTML
- CSS
- JavaScript
HTML describes what the content is, CSS is responsible for how the content looks, and with JavaScript we can do some really cool things, such as fallback mechanism. The website is designed to work for various screen sizes and devices which adapts and changes itself depending on the conditions using content first approach. This is achieved by using media queries that allow us to have specific CSS, used for custom fitting of layouts according to our need. We will look into media queries later in the chapter.
Different devices have different screen resolutions in landscape and in portrait mode. Here are some devices and device-supported screen resolutions in landscape as well as in portrait view:
|
Devices |
Portrait View |
Landscape View |
|---|---|---|
|
iPhone 3G/3GS |
320 x 480 |
480 x 320 |
|
Samsung Galaxy S Duos |
480 x 800 |
800 x 480 |
|
iPhone 4 |
640 x 960 |
960 x 640 |
|
iPad |
768 x 1024 |
1024 x 768 |
|
Devices |
Resolutions |
|---|---|
|
Most Netbooks |
1024 x 600 |
|
MacBook Air 08 |
1280 x 800 |
|
Some Laptops |
1366 x 768 |
|
MacBook Pro 15" |
1440 x 900 |
Apart from these resolutions, today's latest devices, such as Samsung Galaxy S4 or iPhone 5, have very high resolutions in mobile device segment.
Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parseable.
Meta elements are typically used to specify page description, keywords, author of the document last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
For responsive design, to set the viewport width and initial scale on mobile devices, the following <meta> tag is generally used. In spite of responsive design, we can use this tag for non-responsive design too before we finalize our fit or restart approach. In fact, if we are building a responsive website or any mobile website, we still want this following tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">