Blog - Latest

Hover On Link For Summary

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Number of Articles found:17


No Titles Publish Date
1 Internet Security Scams And Phishing2016-04-24 17:16:34
2 Responsive Website Design2016-04-24 17:15:25
3 Website Design2016-04-24 17:18:21
4 Relational Databases2016-04-24 17:20:53
5 Security On The Internet2016-04-24 17:21:43
6 SearchEngine-Optimisation2016-04-24 17:23:02
7 Graphic Design2016-04-24 17:24:57
8 Backend Applications2016-04-24 17:29:41
9 Brand Protection On The Internet2016-04-24 17:48:45
10 Social networks and their hidden dangers2016-04-24 17:51:17
11 Fundamental Research With Projects2016-04-24 17:51:43
12 HTML52016-04-24 17:50:50
13 Facebook SocialNetworks Traffic2016-04-24 17:50:22
14 Audio On The Web2016-04-24 17:49:51
15 VideoOnTheWeb2016-04-24 17:49:16
16 E-commerce Payplal Integration2016-04-18 10:31:02
17 The Web And The Internet Explained2016-04-24 17:52:10














Blog Posts On Site Design

Our Blog Post

Post Title

Post Title

Website Solutions


Responsive Web Design

How It Came About

A very clever chap called Ethan Marcotte wrote an article about responsive design on A List Apart. The article proposed addressing the ever-changing landscape of devices, browsers, screen sizes and orientations by creating flexible, fluid and adaptive Web sites. Instead of responding to today's needs for a desktop Web version adapted to the most common screen resolution, along with a particular mobile version (often specific to a single mobile device), the idea was to approach the issue the other way around - a very brilliant piece of lateral thinking. The genius was to say, why not use flexible and fluid layouts that adapt to almost any screen. And that article written in May 2010 started a revolution that has changed literally everything about how you consume information on the web.

To emphasise this point, Google has just recently announced it will be relegating site on it result page that are not optimised for the mobile platform - link here.Thus if you are a stake holder in an enterprise still procrastinating about overhauling your old website think again. It is rather getting harder and harder to justify putting it off because now you will be punished (ranking,traffic etc.) for not doing so. This is a diminishing return strategy that will invariably put you at a disadvantage. You better act now.



Core Concepts

Three key technical features are at the heart of responsive Web design:
  1. Media queries and media query listeners
  2. A flexible grid-based layout that uses relative sizing
  3. Flexible images and media, through dynamic resizing or CSS

Truly responsive Web Design requires all three features to be implemented.

The key point is adapting to the user's needs and device capabilities. Suppose a mobile user will be viewing your site on a small screen. Taking the user's needs into account doesn't just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you'll present the information in a different order. Don't assume the user won't need access to all the site information because he or she is on a mobile device. You might need to change the fonts or interaction areas to respond better to a touch environment. All these factors influence responsive Web design.

While mobile devices are changing the display landscape, with the appearance of more and more small screens, don't forget what's happening at the other end of the spectrum. Displays are also getting larger and larger. Having to serve both segments shouldn't stop designers from being innovative on either.

1-Media Queries

Starting with CSS 2.1, media types were used to apply CSS for both screen and print. You might remember these media types:

<link rel="stylesheet" type="text/css" href="style.css" media="screen" ></link>
<link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" ></link>



That was it end of story. Today though, this has been significantly improved on by the W3C media queries in CSS3, taking them a gigantic step forward.

Today, you can use media queries to scope styles to specific capabilities, applying different styles based on the capabilities that match your query. You can even combine queries that test for several features by using semantic operators such as AND and NOT. Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more.

There are three ways to implement media queries:

  1. Use the @import rule to import style rules from other style sheets:
  2. Put media queries directly in the style sheet:
  3. Include a query in a linked style sheet's media attribute:


Because of the (cascading) nature of CSS, default styles are defined at the top with the media query matching rules and styles below. Styles defined at the top will be cascaded to the matching styles in the rule, or even completely overwritten. If a document has more than one css style sheet applied to it, precedence will be given in their order of execution. The cascade (in css )defines an ordered sequence of style sheets where rules in later sheets have greater precedence than earlier ones.

The images shown below present an example of a responsive web design approach that uses media queries. Fig1 and Fig2 both show a desktop using the chrome broswer in two different resolutions. Fig3 shows the same responsive site on an android Smart Phone, also with the Chrome Browser.The same outcome is attained with other browsers(Internet Explorer,Firefox , Safari and Opera)Smartphones using other operating systems (windows and apple OS X) also rendered the content correctly.

Fig1



Fig2


Fig3

Media Query Listeners

Taking media queries a step further, the CSS Object Model (CSSOM) working group at the W3C also created media query listeners, which provide an API for responding to media query changes. Instead of having to poll for changes or load several versions of a resource, you can use the API, for example, to download images only of a particular size when a media query match is triggered.

A Word about the Viewport

When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen. So do you think there isn't a way of getting the real resolution? Actually there is, in the viewport meta tag. The viewport meta tag controls the logical dimensions and scaling of the mobile browser's (chrome-less) window. Setting the width equal to the device-width works around the problem: Other viewport settings include maximum-zoom and initial-scale.

Flexible Grids

A flexible grid-based layout is one of the cornerstones of responsive design. The term "grid" is used rather freely and doesn't imply a requirement to implement any of the available grid frameworks. What it means here is using CSS for positioning and for laying out margins and spacing, and for implementing various Web layout types in a new way. Layouts and text sizes are typically expressed in pixels. Designers love pixels. Photoshop loves pixels. But a pixel can be one dot on one device and eight dots on another. So how do you approach responsive Web design if everything is pixel-based? You might not like the answer: You stop using pixel-based layouts and start using percentages or the em for sizing.

By basing text sizes, widths and margins on percentages or on the em, a unit of measurement based on a font's point size, you can turn a fixed size into a relative size. This means you'll need to do a little math to achieve a flexible grid and text size system. But the formula for calculating the em is very simple:

target ÷ context = result
Let's say the normal context for the body font size is 16 pixels. If the designer specifies that the H1 should be 24 pixels, you can calculate the following:

24 ÷ 16 = 1.5
This results in the following CSS style:

h1{
font-size: 1.5em;
}

Always take the context into account. Continuing with the previous example, if you have an element inside the H1 that needs to be 12 pixels, you use the current H1 as the context. The context is now 24 pixels, so the context calculation for "H1 a" is:

12 ÷24 = 0.5
And the CSS style is: h1 a{ font-size: 0.5em; }

You can also use percentages. The calculation algorithm is the same; you just end up with percentages.

Flexible grids use this approach. You can find several frameworks to help you craft your grid, such as Fluid Grid System, Fluid 960 Grid System (a fluid version of 960 Grid System)or Bootstrap sleek, intuitive, and powerful front-end framework. Moreover, several groups within the W3C have submitted new specs for better flexible grids, with some useful results.

CSS3 Grid Layout

The CSS3 Grid Layout (also known as Grid Alignment or, simply, the Grid), brings a typical grid system to CSS, similar to what XAML or Silverlight developers may be familiar with. At the time of this writing, the spec is an "Editor's Draft." It allows for defining regions in a layout, with columns and rows, spanning, spacing, padding, grid templates and more, enforcing full separation of concerns between HTML elements and CSS. Unlike HTML tables that are content, the Grid allows for placing HTML primitives into grid regions separate from actual content.

Combining the CSS3 Grid with media queries creates a powerful solution for building fluid, responsive applications.

The Grid specification is a welcome addition for implementing responsive web designs. Two other new CSS specifications are also worth mentioning: the Flexible Box Layout Module (Flexbox) and The Multi-column Layout Module. Both show a great deal of promise for designing responsive Web sites.

Flexbox, currently a working draft at the W3C, adds support for four new layout modes: block, inline, table, and positioned. It enables you to lay out complex pages with relative position and constant size, even when screen sizes change.

The multi-column layout module is currently a candidate recommendation at the W3C. This solution is for content that you need to lay out in columns and that flow from one column into the next. You can view an interactive example of multi-column layout in this lab.

Flexible Images and Media

The final aspect of responsive Web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.

Scaling in CSS is pretty simple to implement for both images and video. You can set the media element's max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size.

img, object {
max-width: 100%;
}


An alternative to scaling images is cropping them with CSS. For example, applying overflow:hidden allows you to crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment.

Having several options to scale and crop images in CSS might not be enough. Do you really need to take up all of a visitor's mobile bandwidth because you don't have a smaller version of an image? To better serve users, flexible images might mean using an alternative image or even no image at all. Folks in the Web design community are coming up with solutions based on JavaScript and cookies, and you can expect more of this as responsive Web design evolves and becomes the basis for many quality Web sites.

Legacy Browsers

What about older browsers that don't support media queries? What about Internet Explorer before version 8, which has issues with scaling images? Solutions in the form of polyfills can help. Here are some useful examples.

  • css3-mediaqueries.js by Wouter van der Graaf: code.google.com/p/css3-mediaqueries-js/- link
  • Response.js: github.com/scottjehl/Respond - link
  • Fluid images: unstoppablerobotninja.com/entry/fluid-images/ - link


Closing Remark

Jumping on the responsive Web design wagon isn't something to take lightly. Take into account what you need to achieve, and consider whether catering to a specific version of a desktop or mobile device makes the most sense.

Responsive Web design is in its early stages. Web designers will continue to offer different opinions and recommend directions related to whether to build for mobile first, how to fit these decisions into the design process, whether to slice up the comps into all the different screen sizes, and so forth. And as more and more screen sizes and form factors arrive, the conversation will continue.

HTML and CSS standards are evolving to help Web designers deal with these issues. It's clear that some form of responsive Web design will be used to meet the challenges, and it's equally clear that standards will continue to evolve as better ways of handling the changing world of devices and browsers are discovered.


Post No.1

Leave a Comment       View comments  |  currently:  4






Search our Blog



Recent Posts

  • E-commerce Implementation    comment:  1

  • Greenpeace Activists Set Free    comment:  1

  • TERROR ATTACKS IN RUSSIA    comment:  1

  • Branding    comment:  1

Categories

Archive