When designing responsive websites, we can either create our own layout or use a grid system already created for use, such as Bootstrap. It’s critical therefore that we set the right viewport for our design and that we allow it to scale up or down in size, irrespective of the device-we will explore this in more detail. If we don’t tell it that the viewport area has been shrunken in size, it will try to shoe horn all of the content into a smaller size, which doesn’t work very well! This is all part of setting a viewport-browsers frequently assume we want to view content as if we’re on a desktop PC. Now, let’s take a look at the same text, but this time with a viewport directive set:Įven though this is a simple example, do you notice any difference? Yes, the title color has changed, but more importantly the width of our display has increased. This example was created from displaying some text in Chrome, in iPhone 6 Plus emulation mode, but without a viewport. To see what a difference not setting a viewport can have, take a look at this example screenshot: This means that the browser should render the width of the page to the same width as the browser window-if, for example, the latter is 480px, then the width of the page will be 480px. There is a temptation to reach for JavaScript (or a library, such as jQuery) to set values, such as viewport width or height: there is no need, as we can do this using CSS: If we’re working with desktops, then it is usually the resolution this is not the case for mobile devices. Controlling the viewportĪ key part of RWD is working with the viewport, or visible content area on a device. We will cover each in more detail later in the book, but for now, let’s have a quick overview of the elements that make up RWD. There are several key elements involved-in addition to viewports, these center around viewports, flexible media, responsive text and grids, and media queries. A key part of this is understanding the viewport or visible screen estate available to us-in addition, there are several key elements that make up RWD. Now that we’ve been introduced to RWD, it’s important to understand some of the elements that make up the philosophy of what we know as flexible design. This is what responsive web design is all about-producing a flexible design that adapts according to which device we choose to use in a format that suits the device being used. We can clearly see the same core content is being displayed (that is, an image of the book, the buy button, pricing details and information about the book), but element such as the menu have been transformed into a single drop down located in the top left corner. The mobile view for the same website shows this if viewed on a smaller device: Go ahead and browse to this is what we will see as a desktop view: The best part of this is that we can use this technique without the knowledge or need of server based/backend solutions-to see it in action, we can use Packt’s website as an example. This will contain fluid, flexible images, proportion-based grids, fluid images or videos and CSS3 media queries to work across multiple devices and device resolutions-the key to making them work is the use of percentage values in place of fixed units, such as pixels or ems-based sizes. We develop a single website that uses a single code base. This ensures that the users get the best experience while using the website. It is an approach in which a website or a webpage adjusts the layout according to the size or resolution of the screen dynamically. The property of water is that it takes the shape of the container in which it is poured. To understand what this means, let’s use water as an example. If one had to describe Responsive Web Design in a sentence, then responsive design describes how the content is displayed across various screens and devices, such as mobiles, tablets, phablets or desktops. Getting started with Responsive Web Design In this article by Alex Libby, Gaurav Gupta, and Asoj Talesra, the authors of the book, Responsive Web Design with HTML5 and CSS3 Essentials we will cover the basic elements of responsive web design ( RWD).
0 Comments
Leave a Reply. |