Web Interface Design

Learn How to Build Responsive Websites with HTML, CSS, and Media Queries

Back to classes

Choose a class
  • Basics of Responsive Design

    In This Lesson You Will Learn

    • what the differences are between desktop and mobile browsers.
    • to adapt the behavior of the viewport.
    • what is meant by liquid layouts and flexible images.
    • how to test mobile websites.

    One fundamental challenge that we face in modern web design is the large variety of devices that are used nowadays to surf the net. A website that looks good on a large desktop monitor is sometimes almost unusable on a smartphone’s small touchscreen display. There may be different reasons for this:

    • Conventional websites often had a fixed width of e. g. 980px. This is obviously far too big for small smartphone screens. Most smartphones shrink these websites so that they can fit as much as possible into the browser window. As a result, the text is barely legible any more and the interface elements are so tiny that they can no longer be used. Web layouts for mobile devices should not have a fixed width, but need to adjust to the width of the relevant display.

    • The layout of traditional websites appears in landscape format on desktop monitors. They mostly have horizontal menu bars and arrange the content in several columns laid out alongside each other. On the other hand, smartphone displays primarily use portrait format, which means that menus and content should be arranged underneath each other instead.

    • Using a touchscreen with your fingers is a hugely different experience to the conventional method of using a mouse. Many of the established interface elements are too small or plainly unsuitable for touchscreens. It is difficult to touch them with your fingers or they do not respond the way you want.

      One of the main reasons for this is that touchscreens obviously do not have a :hover feature. Although this feature is emulated by most mobile browsers, it behaves, all the same, differently than on desktop devices. For instance, a dropdown menu that opens via :hover can’t be closed again on a touchscreen because there is no mouseout event.

      When operating mobile interfaces, it can often be more a case of using gestures (swipe, pinch and zoom) rather than clicking/tapping. This means, for instance, that the well-established Next and Back buttons can be omitted in image galleries, slideshows etc. if the user can swipe to carry on scrolling through images instead.

    Therefore, modern web layouts need to be flexible as they have to adapt to the different screen sizes. So, we talk about adaptable designs or reactive designs, i.e. responsive designs, to use the proper term.

    The basic principle is that any device — whether a desktop PC or smartphone — displays the identical content, i.e. the same HTML documents. Only the presentation is adapted for the relevant device. This means that you must ensure more than ever that content (HTML) and design (CSS) are kept absolutely separate!

    CSS is used to provide the actual responsive capability. It uses what are known as media queries to help you define layout alternatives for different screen sizes.

    Apart from using Responsive Design, there are obviously other options available for providing web content for mobile devices. One option is to design a completely independent website that can be accessed via a different URL (often beginning with mobile or just m instead of www), or else to develop native apps for specific devices. Responsive Design is, however, one of the most powerful (and cost-effective) options available.

    But, first of all, there is one problem to be resolved that is a basic prerequisite for Responsive Design: the difference in the way how the viewports of desktop and mobile browsers behave.

    5.1Adapting the viewport

    The viewport is the area within a browser window that contains the actual website (without the title bar, address line, tab bar, etc.). This viewport behaves differently on desktop and mobile browsers if a website is too large to fit in completely. On desktop PCs scrollbars are created, whereas in mobile browsers the website is shrunk so that as much of it can be seen as possible. This, obviously, usually results in the text being barely legible any more. Users need to use their fingers to zoom in again on parts of the webpage.

    In iOS and many other mobile devices, the viewport’s width is scaled as standard to exactly 980px. This means that webpages are made so small that 980 pixels in them can fit in the viewport (this value applied for a long time as an average standard width for websites).

    We need to stop this behavior. The basic prerequisite for Responsive Design is that the viewport always retains the original size of the relevant device. In other words, one pixel on the webpage corresponds to one device pixel.

    Interestingly, this is not done (yet) using CSS, but in HTML using a meta-tag:

    The keyword device-width ensures that the viewport is adapted 1:1 to the device’s actual width. In theory, you could also specify fixed pixel values for the width, but this is not a very sensible thing to do in practice.

    initial-scale=1.0 and shrink-to-fit=no prevent the website being scaled automatically by the browser.

    Yet another value that you could theoretically use, apart from width=device-width, initial-scale=1.0 and shrink-to-fit=no would be user-scalable=no. This would completely deactivate the manual zoom function using two fingers. But this is rarely a good idea in practice because why should you block this feature for users?6


    6 This specification is intended more for apps that use the device’s native interface elements. These interfaces must generally not be zoomed.

    This meta-tag only affects mobile devices (smartphones and tablets). It has no effect at all on desktop browsers.

    In the foreseeable future, this meta-tag will be replaced by an appropriate CSS at-rule. But this is currently (July 2016) only supported by versions of Internet Explorer ≥ 10 with the prefix -ms-:

    Example

    You will find in the viewport folder in the support material for this course an HTML file of the same name that just contains an image. In the CSS definitions in the head it was only ensured that the body did not have any margin and any padding which could influence how the file is displayed.

    The image has an original width of 320px. This corresponds exactly to the width of a conventional iPhone display in portrait format.7 Therefore, the image ought to actually fill the whole screen of an iPhone. But as you can see on the left in fig. 20, the image still seems much smaller. The browser scales the HTML file again to 980px. However, the meta-tag provides us with the desired result: the width of the webpage corresponds to the width of the display (figure on right).


    7 This also applies to iPhones with a retina display. Although these devices operate internally with a significantly higher resolution, images are interpolated to the default resolution.

    Fig. 20 On the left the webpage has no viewport meta-tag, on the right it has one.

    From now on, you must insert this meta-tag in the head of every one of your HTML files. You cannot use Responsive Design without doing this!

    ×

    Responsive Web Design

0

Demo mode: Learning progress will not be saved.

Register to save your learning progress