Responsive Web Design

Nowadays, as people continue to hoard electronic gadgets for different purposes, it has been necessary for developers to create mobile versions of websites. That way, people will have no trouble accessing those sites whether they are using smartphones, an iPhone, iPad, or even Kindle. In addition, most mobile versions of websites can be viewed at different resolutions too. In the near future, the demand for mobile version of websites or other technological applications is expected to increase. Thus, it is highly important that developers be able to accommodate such need.

Because new resolutions and different types of devices keep popping up, it becomes very hard for the people in web design industry to keep up with all the changes. Creating websites in different versions and at varying resolutions tends to be tedious and impractical. However, this issue places the website at risk of losing visitors if it is not rendered in their preferred version or resolution. Thus, at present, people involved in web design are looking for ways to solve or at least alleviate their problem in creating websites in multiple versions.

RESPONSIVE WEB DESIGN

Responsive web design is type of wed design approach, stating that websites should be developed based on the user’s behavior and environment, which is influenced by screen size, platform, and orientation. This approach involves using flexible grids and layouts, images, as well as expertise in utilizing CSS media queries. Suggestively, the website should automatically switch settings or properties once the users starts using a different electronic device. In short, the website should be created in such a way that it automatically adopts to the changes in the user’s preferences for the used platforms. Through this way, web designers won’t have to create different versions of a website for different devices.

THE PRINCIPLE BEHIND RESPONSIVE WEB DESIGN

The concept of responsive web design is rooted from the principle of responsive architectural design, wherein a room or space automatically adjusts to the changing number of people inside it. In the field of responsive architecture, architects are now experimenting with various embedded robotics and tensile materials combined with different art installations and wall structures, which are capable of bending, flexing, or even expanding when a group of people passes by. The motion sensors are also meant to adjust the room’s temperature and lighting depending on the number of people inside the room. In fact, there are already companies which have been using “smart glass technology,” in which the glass turn’s opaque as the number of people reaches a specific density threshold. This way, companies are able to preserve the privacy of their meetings.

The same principle goes for responsive web design. Instead of creating a web design for specific groups of users, a website should be designed to automatically adjust to the need of the users. In relation to the advent of responsive web design, more and more people are now trying out fluid layouts, media queries, and scripts which can reformat web pages and do mark-up with less effort.

However, responsive web design does not revolve around adjusting the screen resolution or automatically adjusting the images alone. It also represents a new way of thinking about design, and such mode of thinking brings about new ideas that can be further developed in the near future.

  1. ADJUSTING THE SCREEN RESOLUTION

At present, devices now come in different sizes and thus, resolution as well. Likewise, the functions and even the color handled by the screen may vary too. in the more popular devices, including the likes of iPhones and iPad and smartphones, people can use the devices in landscape or portrait mode. With this need for quick change in orientation, web designers should also consider such factor when creating websites.

When designing websites for both landscape and portrait orientations, the different sizes of electronic devices should also be considered. Though screen sizes can be categorized, it is not easy to create a design that is flexible enough to accommodate all screen sizes. In addition, a lot of users do not maximize their browsers, and such would also add to the problem of varying screen sizes.

And with the release of more electronic devices in recent years, addressing the issue on screen size has become more pressing. Thus, to deal with the situation, web designers have come up with some partial solutions.

  1. MAKE EVERYTHING FLEXIBLE

Before, not all websites made use of flexible layouts. In fact, the only things that were flexible in a website were the layout columns and the text. In relation to this, images tended to break the layouts, and even the flexible structural elements had their limits. Basically, previous flexible designs were not the pliant, adjusting by just several pixels. In addition, they could not accommodate the change from a larger computer screen to smaller one in netbooks.

Fortunately, at present, flexibility is very achievable. Web designers can use images that are automatically adjusted and create layouts that will not break. Making websites flexible cannot be considered as the ultimate solution, but it provides people additional means to browse their websites enables them to use their devices in different orientations.

A man named Ethan Marcotte wrote an article about the issue, and he included a sample web design boasting of a better flexible layout. In his creation, people noticed the perfect combination of fluid grids, fluid images, and mark-ups, which are correctly placed where they are needed.

To give people some idea about some of the techniques that can be used to create fluid images, they should check out for tutorials showing how to hide and reveal portions of images, create sliding composite images, and use foreground images that scale with the layout.

Some online books, including the Flexible Web Design: Creating Liquid and Elastic Layouts with CSS by Zoe, Mickley, Gillenwater provide some noteworthy tutorials regarding the creation of flexible grids and layouts, whereas some of the resources and inspirations that people may find useful can be found in Essential Resources for Creating Liquid and Elastic Layouts.

However, it is not enough that people just learn how to make their websites flexible. They must properly manipulate all the factors that can affect the quality of the flexibility of their design. For example, when designing a logo and resizing it to a smaller size would require keeping the name of the website visible and not cropping it off. During the coding, the used image is then divided into two. One serves as the background and cropped to the desired size, whereas the other one is resized proportionally.

However, when using smart fixes, such as resizing images, people should remember that there is still the tendency for a layout to appear as to narrow or too short. And in such cases, designers should come with ways to correct the layout of their websites.

  1. MAKE THE IMAGES FLEXIBLE

The images are another factor that greatly influence the layout of a website. Luckily, there are various means by people can resize their images proportionately. For example, designers can use max-width of CSS as an easy way of making their images more fluid. People can use this function as long as there no other width-based image styles that can affect it. In return, the images are loaded using their original size. The image is set at a maximum width of 100% of the screen or browser width. This way, the image narrows as the percentage goes down.

Basically, in creating fluid images, the images are set at the maximum first. The dimensions of the images are not specified in the code. Instead, the browser does the function of resizing the image under certain conditions. In relation to this, CSS provides a huge help by serving as guide to the images’ relative sizes.

Another important thing that designers should remember is that max-width is not supported by IE. However, they can use width:100% when using IE-specific style sheets. In addition, when the images are resized at a very small scale in older versions of Windows, they won’t appear very clearly after rendering. In this case, people can use JavaScript to fix the problem.

However, though there are some quick fixes for images in a layout, the most important factors that people should consider are the image resolution and download times. For mobile devices, resizing an image is not that hard. However, when the original image size is measured for larger devices, the download time may be prolonged and additional space may be required.

  1. RESPONSIVE IMAGES BY THE FILAMENT GROUP

The Filament Group introduced a technique, wherein responsive images are taken into account, and images are resized properly and in accordance with the resolution of smaller devices. As a result, additional space is saved since large images are not used.

The method by the Filament Group involves the use of several files, including, JavaScript file (rwd-images.js), the .htaccess file and an image file (rwd.gif), which can be accessed on Github. HTML can be used for referencing the larger and smaller resolution images. In this process, the small image (with the .r prefix) is first clarified to be responsive before adding a reference to the bigger image using data-fullsrc.

With the use of data-fullsrc, the larger-resolution image (largeRes.jpg) loads for any screen that is wider than 480 pixels, whereas for smaller screen, only the smaller image (smallRes.jpg) will load.

An inserted base element coming from the JavaSCipt enables the page to separate the responsive images. The images are then redirected if necessary. As a page loads, all files revert to their original forms and the large or small images are the ones that are loaded.

However, when using other methods, some higher-resolution images should be downloaded. This is especially true when a certain website is flooded by images.

The Filament Group technique is compatible with the more popular browsers, including IE8+, Safari, Chrome, and Opera, and the mobile versions of such browsers. For older versions of the browsers and for Firefox, the responsive image can be resized but the different resolutions are all downloaded, which really does not help in saving space.

  1. AVOID IPHONE SIMULATOR IMAGE RESIZING

One perk of using iPhones and iPod Touch is that the web designs on such devices are automatically rescale to fit the screen. In most cases, the full design just shrinks proportionally to the size of the small browser. In relation to this, what the user should do is to just zoom in and out as he sees fit.

However, one pertinent issue has been associated with the iPhone simulators. A lot of people noticed that when a site is made based on the principles of responsive web design, the images still changes in proportion with the page despite the fact that they were customized for the tiny screen. As a result, people noticed the scaling down of text and other elements of the websites.

In resolving this problem, the Apple-specific meta tag can be used. The meta tag is placed below the website’s <head>section.

Meanwhile, when the initial-scale is set to 1, the default resizing of the images is taken over, and their width just appear the same in relation to the device’s width.

  1. CUSTOM LAYOUT STRUCTURE

When the image sizes should be changed to large degree, the layout should be changed entirely. Still, the designers may ought not to make any changes on most of the styles.

Take, for example, a style sheet having the main structural elements, including #wrapper, #content, #sidebar, #nav, as well as the colors, background, and typography. Likewise, other elements, such as the flexible widths and floats, may also be included.

When a style sheet caused the layout to appear narrow, short, expanded, or tall, a new style sheet may be used. The new child style sheet will absorb all the things that are included in the default style sheet and proceed with redefining the layout’s structure.

  1. MEDIA QUERIES

Designers are recommended to use CSS3 because it accommodates all the media types found in CSS2.1, including screen, print and handheld, but with some addition perks, such as max-widthdevice-widthorientation and color. Devices that are made with the help of CSS3 should be able to support different media features. Thus, people should consider using CSS3 features for their media queries. However, older computers that do not support CSS3 cannot be used in media queries.

In the code for media queries, when a browser displays a page on the screen that measures 480 pixels or lower, then shetland.css is loaded.

In addition, CSS3 also now include orientation (portrait vs landscape), device-widthmin-device-width, and others.

It is possible to create multiple style sheets and basic layout alterations that fit the ranges of widths. In addition, multiple media queries can be used altogether in a single style sheet.

  1. CSS3 MEDIA QUERIES

Some specific features of CSS3 media queries can be very useful with the creation of responsive web designs. Thus, it is just as important that designers learn a thing or two about them.

  1. min-width and max-width 

min-width is used for setting the minimum width size of the screen or the browser for certain set of styles or style sheet. Any value that is below the set limit is expected to be ignored.

Meanwhile, max-width does the opposite function of min-width. Any value that is higher than the set maximum value will not be used in media queries.

To utilize the media queries efficiently, the queries should be all included in just one CSS style sheet.

Under normal circumstances the min-width and max-width can be used for both the screen size or browser width. However, there are instances when the media query is specific for the width of certain device. In such cases, the min-device-width and max-device-width can be used when considering a device with specific dimensions.

For example, in iPads, the media query property, orientation, is specifically used. The values used for this feature are either landscape or portrait. In the case of iPhones, using the min-device-width and max-device-width would be enough.

Aside from using the media queries singularly, they can be used in combination. For example, the min-device-width and max-device-width can be used in defining a range for a specific style (around 800 to 1200 pixels). This practice can be used when aiming to display specific contents or entire sidebars in layout.

Designers may also link to a separate style sheet specific media queries. This is favorable when they are giving more importance to the organization of the website and not necessarily to the efficiency. However, using a separate style sheet may be better for devices which do not switch orientations or screens with browsers that cannot be changed manually.

In the case of iPad, whose orientation can be switched, the media queries may be all placed in just one style sheet, which would also prove to be more efficient in the long run.

The same goes for a standard computer screen whose browser can be resized. Manually resizing would require including all the media queries in just one style sheet in order to achieve maximum efficiency.

Still, it won’t hurt if designers choose to define their media queries in a standard HTML link tag.

  1. JAVASCRIPT

JavaScript is very useful as back up for devices that cannot run CSS3 media queries. In addition, it can be used in older version of browsers (IE5+, Firefox 1+, Safari 2), because it is already pre-installed and ready for enabling CSS3-related media queries. For those who are already using CSS3, they should just copy the library and it paste in the mark-up: css3-mediaqueries.js.

For those who prefer a more hands on method, they can try using a jQuery snippet, which can be used in detecting a browsers width and in adding the necessary changes to the style sheet.

In reality, JavaScript and CSS media queries can be used in various combinations. However, designers should not rely on media queries alone. They are nothing but just a viable option for providing pure CSS-based solutions in responsive web design.

  1. SHOWING OR HIDING CONTENT

It is possible to shrink things accordingly and make the necessary arrangements on the elements as the screen that is being used becomes smaller. However, transforming a content of a large screen to something that would fit a smaller screen does not always lead to something good. Thus for mobile environments, various practices, such as simpler navigation, a more focused contents, using lists or rows instead of multiple columns, may be used wisely.

In relation to the things mentioned above, a designer must be able to carefully choose the content that should be hidden or shown in a specific device. And such is very easily accomplished, thanks to display: of CSS.

When using display: none, the HTML blocks all the element that should be hidden in a style sheet or in detecting the browser width via JavaScript. Aside from hiding or showing content on smaller screen, the same can be done on the default style sheets when bigger screen are considered. One perfect example is replacing the hidden content with navigation leading to that content or using an entirely different navigation structure.

Meanwhile, visibility: hidden hides the contents, where display removes it. For smaller devices, designers can forgo keeping the mark-up on the page to avoid unnecessary scrolling or breaking the layout.

Hiding and showing content enables the necessary elements of a website to be arranged in a way that would fit screens of different sizes and device types. However, when the screen that is considered is smaller, the elements should be properly rearranged to fit the mobile guidelines. One way of doing this is using a script or alternate style sheet to increase the white space or substitute the image navigation sources with something that is more useful in mobile platforms.

10. TOUCHSCREENS AND CURSORS

Touchscreen devices are also now making arounds everywhere. For the smaller devices, giving them touchscreen functions is not that hard. However, noticeably, touchscreen laptops and desktops, just like the HP Touchsmart tm2t, are now also available in the market.

Logically, devices with touchscreens are designed differently compared with computers that have cursor-based interactions. In addition, the capacities of such devices may very as well. Fortunately for designers, they will have no trouble in creating design for touchscreen or cursor-based electronics.

In the case of touchscreens, the device with such capability won’t be able to display CSS hovers. A touch of the user is equivalent to a click. Thus, designers cannot use CSS hovers for defining links in touchscreen devices.

However, designers can do some research and learn some ways by which they create designs that work well for touchscreens and will not compromised the cursor-based usability of the device.

11. PRESENT APPLICATIONS OF RESPONSIVE WEB DESIGN

A lot of websites today created based on the principles of responsive web design. The variety in them would be most likely in terms of structure and style. Several solutions can be used in different browsers, with some even capable of adjusting the size of the elements without necessarily having to consider the dimensions of the browser.

  1. ART EQUALS WORK

Art Equals Work is a sample website that is created through responsive wed design. The website can accommodate differing browser widths, but when the browsers becomes narrow or is accessed using a device with a smaller scree, then the layout switches, and the formal is adjusted to make the website more readable and user-friendly. Notably, the sidebar disappears, and user can access the navigation tool on the top. In addition, the text is rendered in a larger font, which benefits the practice of vertical reading.

  1. THINK VITAMIN

The approach used in Art Equals Work can also be noticed in Think Vitamin. The sidebar and top bar are absent when the site is viewed in a smaller screen, and the navigations becomes simpler and can be accessed directly above the content. The same goes for the logo of the website. Though the logo basically looks the same, it is modified to suit the vertical orientation of the device. In relation to this, the tagline can be seen below the main icon. Moreover, the white space surrounding the content is more prevalent on larger screens, but is adjusts accordingly when the site is viewed on smaller screens.

Post navigation