Responsive Web or Mobile Sites?

 

It is reported that about 10% of Internet traffic was caused by mobile web browsing in 2012 while there was only 4% in 2011. With the Smartphone penetration rising globally, “not designing for mobile is an inexcusable and cardinal web design sin.”

 

To meet customer needs and develop new web technology, designers have developed different kinds of web technology and concepts. Ethan Marcotte raised the concept of Responsive Web Design in 2010 which has become the most popular trends in web design nowadays. This design concept has not only solved the problem of web browsing by phone but also provided the root technologies to view web using arrays of different kinds of devices. However, there’s another situation that designers make a web which is specially tailored for mobile phones. BBC sites are a major example.

On March 27th, 2012, Chris Russell released the news on BBC Internet Blog that they adopted a new approach to creating web applications – called responsive design.

Is this site really “Responsive”? With this question in my mind I opened the BBC news on laptop and lessened the size of my browser, all the content in this page stayed the same. Then I used my Ipad and Iphone to open it. The Ipad page mostly mirrored the page on laptop but the iphone page was definitely different from the one on laptop. Then I found the URL on my mobile was actually “m.bbc.co.uk/news”. “Creation of the mobile site was driven by consumer demand, as in an average week 13.3m users worldwide use their mobile or tablet to visit the BBC News site and apps-around one-third of total visitors to BBC News Online.”(img1&2)

I can not stop thinking whether this is a responsive design or not. There are quite a lot debates about this topic online as well. In Ethan’s article of Responsive Web Design, he put forward media queries to define how the layout should be when screen is within a certain width. This means that when people browse websites on their phones the content they see is the same as what they can see from laptop sites. Here is an  example: the following codes of Media Queries define that this stylesheet should be used when the screen width is maximumly 480px.

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

However, the definition of RWD is quite vague. Even << .net>> magazine reported BBC News as Top 4 of the Top 25 responsive sites in 2012. “Designed with a mobile-first mentality, it scales to meet different device characteristics beautifully.”

I don’t deny that this mobile site is well designed. Firstly, it looks quite neat and clear since there is only one vertical division and different pieces of news are in order including images and videos. Secondly, designers are considerate to put two separate tabs on top. They are “Top Stories” and”Most Read” which help readers save a lot of time in finding popular pieces of news. Thirdly, there is a “Section” icon which links users to different part of the website including worldwide region, different areas such as business or education, and magazine area. Fourthly, if you enter a specific news page, the characters are just fine to read and the layout is simple. It took me around 2 seconds to play the embedded video. (I’m using keysurf wifi and it’s 100.0 mbps).(img3&4)

On the other hand people argue that BBC News site is actually not a responsive web design. “The site is ‘responsive’ in that it responds to being viewed on different devices, displaying content in a way that’s appropriate to that screen, but it doesn’t look like it’s been coded as one ‘responsive design’ site.”

I stand in a neutral position in this argument since from Ethan’s article of Responsive Web Design he said that “That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach”, “we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things. ” However I personally see more flaws of this mobile site. First of all, there is much information which has been deleted on mobile sites. For example, on the laptop version, we can see many sub-tabs under Home tab including “special reports” and to the right there is watch/listen“section and “Features” section. All of this guides are deleted on mobile sites. Secondly, from the page I just mentioned above of the mobile page when entering a specific piece of news, we cannot find analyst’s comment on this incident or event, we can not see the related news’ link from other sites, neither. Moreover, as for the news “Chris Huhne admits perverting the course of justice”, there is a “Chris Huhne’s timeline” which can help readers understand his characteristics more on the laptop version. But there’s nothing on the mobile page. Thirdly, even though the simple and fast design can save people’s time when they are holding a phone, but there is a great chance that people are using phone to kill time. The more information the website can provide, the longer the readers stay on it. The more the website functions, the more satisfied are the users. Fourthly, it would take more time to design a mobile site rather than to only design a website with fluid grids since the mobile page is actually another new page with totally different codes. Thus responsive design is more effective.(img5&6&7&8)

All in all mobile sites have their benefits since it is easier to serve a dramatically limited experience through a separate site. The responsive ones have their limitation too, you can take a look at Barack Obama’s official election campaign site, it contains too massive amount of content that the result on phone is extremely long pages.

But I personally prefer the web with fluid grids, flexible images and media queries in the code.

References:

uxmag.com/articles/combining-responsive-and-adaptive-strategies-to-solve-mobile-design-challenges

www.bbc.co.uk/blogs/bbcinternet/2012/03/news_mobile_responsive_design.html

econsultancy.com/uk/blog/10956-bbc-news-embraces-responsive-design-for-new-mobile-site

alistapart.com/article/responsive-web-design

www.netmagazine.com/features/top-25-responsive-sites-2012

econsultancy.com/uk/blog/10977-what-is-responsive-design-and-do-you-really-need-it

www.netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites

en.wikipedia.org/wiki/Responsive_web_design#History

mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/

Web Design For Accessibility

The concept of progressive enhancement (basic conceptualization is the separation of HTML, CSS and JavaScript) has become a hop topic for responsive website design. It can be simply define as the technique of building websites with strong foundations so that it’s accessible to the wide range of browsing situations (different devices)

The three separate layers (HTML, CSS and JavaScript) are useful for the accessibility of the websites, the web developer can at least be sure that all browsers and devices will be able to render the content and it is consider as the most important part of website.

Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. For example, when a site is coded with semantically meaningful HTML, with textual equivalents provided for images and with links named meaningfully, this helps blind users using text-to-speech software and/or text-to-Braille hardware. Such as Jaws screenreader (See demonstration on www.youtube.com/watch?v=C4SUIjggyN8), it makes blind users to access the webpage easily by listening to the options it gives. Another example of using JAWS screenreader is by Robin Christopherson (www.bbc.co.uk/accessibility/best_practice/case_studies/robin.shtml)

The webpage also need to be accessible by some other disabilities users such as poor sight or colour blind, according to BS 8878:2010, it is suggested text and images large and/or enlargeable, links are underlined (or otherwise differentiated) as well as coloured. Below is what web accessibility aims to address.

  • Visual: Visual impairments including blindness, various common types of low vision and poor eyesight, various types of color blindness;
  • Motor/Mobility: e.g. difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as Parkinson’s Disease, muscular dystrophy, cerebral palsy, stroke;
  • Auditory: Deafness or hearing impairments, including individuals who are hard of hearing;
  • Seizures: Photoepileptic seizures caused by visual strobe or flashing effects.

        Cognitive/Intellectual: Developmental disabilities, learning disabilities (dyslexia,        dyscalculia, etc.), and cognitive disabilities of various origins, affecting memory, attention, developmental “maturity,” problem-solving and logic skills, etc.

Besides the concept of Accessibility, there is going to be code example for developing website on the final draft.

Reference:

BS 8878:2010 Web accessibility – Code of Practice

The W3C’s WAI Web Content Accessibility Guidelines 2.0

Adaptive Web Design

www.bbc.co.uk/accessibility/best_practice/case_studies/robin.shtml

www.currybet.net/cbet_blog/2010/06/future-of-web-design-inclusive.php

sixrevisions.com/web-development/progressive-enhancement/

This is a draft of the article, I plan to add at least another feature and some images.

The good, the bad and the ugly

Of the new HTML5 and CSS3 features

By Kristin Yordanova

The fast incoming features from HTML5 and CSS have the capacity to turn around the industry of web designing and coding into a near spaghetti western disaster. And one of the vastly ongoing trends is the responsive website, which again changed the rules of the game.

The vicious circle of constant user demands growth and the reply in the form of new techniques and rules, has open the door to new exciting possibilities for designers. However keeping up with the upcoming features can turn into a “Catch me if you can” situation, but don’t worry this is where html5please.com, css3please.com and caniuse.com come to the rescue. These resourceful websites focus on the new features, give their verdict on how they should be used, and whether or not to use them at all. So we decided to put them to the test.

Using CSS borders in HTML has changed significantly moving away from the boring dotted to new border-image. However it is not supported by all browsers and within these, as you would have thought falls IE. Firefox, Chrome and Safari don’t need additional prefixes added to the code, but in order to avoid the image fall back flat when opened in an Opera, iOS and Android you need to add the respective prefixes –o and –webkit.

Although the code might seem a bit tricky when handled at first it is easy to get used to. All you need to remember is that when specifying the border-image values you’re doing so in a strict order of top, right, bottom and left. Another new feature is that values can also be determined by percent and not only pixels.

border-style: solid;

border-width: 27px;

-webkit-border-image: url(your_image.jpeg) 27 repeat;

-o-border-image: url(your_image.jpeg) 27 repeat;

border-image: url(your_image.jpeg) 27 fill repeat;

This new feature of CSS3 is fairly easy to use, however to make matter even more simple border-image.com is set up to edit and illustrate how your border will look and provide you with the code. Just don’t forget to remove the –moz prefix, which is no longer needed since Firefox supports this code up to 3 generations back.

Although not a brand new feature of CSS3 the @fontface is worth taking a look at when thinking about your frontend design. Even though custom fonts are now supported by most browsers, it is a good idea to use web safe fonts as a fallback option for users IE 9- and the Blackberry users, which don’t support that feature at all. Just specify the font that you would like to use and its location and you are ready to go.

@font-face

{

font-family: NameofCustomFont;

src: url(ThisGreatFont.ttf’),

url(ThisGreatFont.eot’);

}

However in order to make sure you have a fallback option as well you need to add those at the end as well.

div

{ font-family: “NameofCustomFont”, Palatino, Ariel, Times;

}

Even though fallback fonts are a good option, they could sometimes change the layout look, by not fitting in as expected. But not to worry! The creators of html5please.com have thought of that as well and produced the Modernizr Javascript, which detects if a certain feature is supported by the browser. You’ll need to download Modernizr and add it to the <html>, and from then on it will inspect the browsers compatibility with certain features. In the case of font face, where it is not supported it will add a no-fontface. From there it is very straightforward to find the right fallback font and adjust it.

It is worth mentioning HTML5 new input features, which excite us with the idea to make input options easier to integrate in our design, but in reality, fail to impress. While some of the browsers like Chrome and Opera support these new features, sadly most of the browsers don’t.  In the case of input color, we’re looking forward to the time when all browsers will support it, and there will no longer be need of a complex Javascript to create a color palette. However for users of Chrome and Opera, the solution of the HTML5 input color is to just add the code below

<input type=”color”>

and test to see the results on your browser.

The progress of HTML5 features is also presented in its new progress bar tag. An easy input to the code

<progress value=”52″ max=”100″>

</progress>

makes it accessible for users to view to progress time of a certain task, but it will require Javascript to synchronize the time shown. Even though adding a progress bar can be very straightforward, because the supporting browsers provide their own design for it, the novelty lies in the option of customizing that look.

EXAMPLE : Progress bars in different browsers.

From fancy fonts, background images and speedometers, HTML5 now allows you to make your progress bar as complicated as you want. However with the new trends in responsive websites, which are a clean-cut design, we don’t recommend having complex images as a progress bar. But for a more elaborate view on the matter take a look at the “Cross browser HTML5 progress bars in depth” post on useragentman.com.

The new HTML5 and CSS3 features are exciting on many levels, but most because they seem to be simple to implement in your design. However you need to keep in mind to always check the supporting browsers for each feature and to be on the safe side by providing fallback options.

 

Fluid grid draft

Birth of Responsive web design

With the popularity of 3G and Wifi, more and more people start to using mobile phones, iPad or other mobile devices to surf on the Internet. Thus, web designers have to face a dilemma: how to show the same page on different screen sizes?

For example, phones have small screens, and the width is usually less than 600 pixels; PC has big screen, which is up to more than 1000 pixels generally, and some are 2000 pixel even. It is not easy to show same content on different screen sizes with a satisfied effect

The solution for many websites is that providing different pages for different devices. For instance, specializing in providing a mobile version, a iPhone version or iPad version. Although doing this way can guarantee the results, it leads to more trouble to maintain several versions, and even will greatly increase the complexity of the architecture design if a website has several portals. Also, in spite of working in one website version from one portal, the content cannot appear in a satisfied way when we change the window size.

Therefore, it has been envisaged since very early whether we can design once for universally application, which means one page can adapt to different screen sizes automatically, and automatically adjust the layout according to the width of the screen.

In 2010, Ethan Marocotte came up with the word “ Responsive web design”, which also named “ Adaptive web design”. It refers to the web design that can automatically identify the width of the screen and make the appropriate adjustments.

He produced an example for a hypothetical magazine, which contains the six roles’ headshots. (d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html) If the screen is larger than 1300 pixels wide, six pictures will lie side by side in a row. If the screen width ranges between 600 pixels and 1300 pixels, the layout of six pictures will change into two lines. If the screen width ranges from 400 pixels to 600 pixels, the navigation bar will move to the top of the page. If the screen width is smaller than 400 pixels, six images will move into three rows. (Use www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/ to test)

Fluid Grid – One of the Three Major Elements in RWD

  • What is fluid grid?

Fluid grid is one of the three necessary elements in responsive web design (the other two are media queries and flexible image). Fluid grid requires that page elements use relative units (such as percentage or EM), rather than absolute units (such as pixels).

This idea came from Ethan Marcotte. When writing code, Ehtan Marcotte realized that, whenever a complex grid has been designed to meet customer demands, customers, as well as the client user, always required a fluid layout. However, at that time, almost all of the grid-based designs are fixed width strictly. So he thought to build fluid grid.  The idea is to use the relative size, combined with the percentages and EM, to get corresponding width by simple segmentation, which is same as the pixel width in fixed-width design.

  • Fluid grid VS fixed grid

Fluid grid is created through the intelligent usage of div, percentages and simple mathematical calculations. Fixed layout has a fixed-width container, and each inside module is also width fixed rather than percentage. Importantly, the container cannot be moved. No matter how the visitor screen resolution is, the pages display the same width as other visitors. Compared with the fixed grid layout, the main part of the fluid grid layout is set with a percentage width, so it can be automatically adaptive to the various screen resolutions of users.

However, many designers still prefer fixed grid layout, because it has a lot of advantages. In terms of design, fixed grid layout is easier to customize, and there will be no trouble of pictures, forms, videos, and other fixed width content, because it has the same width in all browsers. Moreover, it does not need min-width or max-width in fixed grid, so all the browsers can support it. Nevertheless, it will leave a big blank in fixed-width layout for users who use the high resolution screens; also, the vertical scroll bar and horizontal scroll bar will appear when the screen resolution is too small.

Fluid grid layout just can overcome this defect of the fixed grid layout. The blank area around the pages is same in all screen resolutions and browsers in fluid grid layout, leading to a more beautiful visual appearance. If the design is appropriate, it also can avoid horizontal scroll bar appears in a small screen resolution. In addition, for the users, fluid grid layout looks more friendly because it is automatically adaptive to users’ settings.

Of course, compared with the fixed grid, fluid grid also has some drawbacks. For instance, in the fixed grid layout, we can ensure what the designers see is that the users see; however, in the fluid grid layout, it is hard for designers to control the users seeing, and may ignore some errors, because the layout looks fine in designers screen resolution. Besides, in the particularly large resolution, the content will be stretched into a very long line, and becomes difficult to read.

How could Fluid Grid Work?

In order to overcome some problems in the fluid grid layout, we can use simpler design. The less fluid layout depends on pictures and difficult technology, the easier it is for the production and maintenance. Use simpler design and code, the compatibility issues can be better prevent, detect and resolved.

In addition, in order to allow the fluid layout has fixed-width when the screen resolution is very large or very small, to avoid the page being too large or small to read, we can use min-width and max-width.

Some Fluid Grid Layout Design Examples

Example design by Ethan Marcotte

Dustycartridge.com

Palantir.net

Dressresponsively.com

Simplebits.com

Design for touching

Design for touching

As Aaron Gustafson described in his book that thinking of the user not the browser is what the term “progressive enhancement” is about, we also need to consider how to show our care about our users. For the current users, the approaches of accessing to the website are various: laptops, tablets with different screen sizes, touching mobile phones, etc. And as forecasted, the mobile devices are becoming the largest share in following years. Jake Rocheleau, field in web designer, believed that mobile users aren’t on keypad phones like BlackBerrys anymore. (www.hongkiat.com/blog/responsive-for-mobile-screens/) The reason we need to consider interaction design in the mobile devices twice is mainly because the differences between the ordinary interface design of web and the design of mobile devices.

 

Web

Mobile

Outputs

Relies on browsers

Relatively smaller screen

Inputs

Mouse and keyboards

Fingers and thumbs

Style

Limited by the browser and network performance

Limited by hardware and operation platform

Application Scene

Home, office, café, and other indoor space

Indoor, outdoor, in cars, horizontal or portrait screen

What are the users’ needs?

Understanding users is the foundational step, whether for mobile users or laptop users, when we do web design.

The most common needs of mobile users can be concluded into two points.

1)    They want to get more information in the narrow screen.

Mobile devices can provide service any time and place; however, users still cannot loss quantity of information. At the same time, the relationship between every block in the mobile devices may not so clear or obvious as that in laptop screens. So the problem about limited screen should be solved in design.

2)    Easy to use.

Users always hold their phones on one hand to control the screen and a thumb have limited range and flexibility. The hot zone of the screen is at the bottom of it on the side opposite the thumb. And other area is not easily to reach.

Fingers are bigger than mouse. If controls like drop-down list, link button are not resized in mobile devices, fingers cannot hit them accurately.

 

How to improve the design to meet users’ needs and satisfy them?

1)    Create “infinite” space in the limited space.

a)     Show different status in a same area.

b)    Show different tips or functions in a same area.

c)     Hide web decoration outside the central stage.

Many website are designed as full-screen page to cater to the wider screens nowadays. Some websites still use the central stage as the important area and decorate the area on either hand. When the width of devices is becoming smaller, the first thing is to reduce the decoration on both sides.

EXAMPLE

www.designweekportland.com/ & www.thesearethings.com/

d)    Hide additional functions.

e)     Rearrange horizontal menu.

If the horizontal menu (or global navigation) is arranged fully in a whole line of the full site, it should be rearranged when the width of the screen is less than 960px. The general solution is to put them into a drop-down box floating on the top layer.

EXAMPLE Time.com & www.macdonaldhotels.co.uk/

f)     Consider common visual stream

Visual stream means the eye tracking when users scanning a web page. Generally, it is from top to bottom and from left to right. This is the famous visual mode, “F” mode, defined by Jakob Nielsen. So the information should be arranged from top to bottom according to their importance.

(Jakob Nielsen’s finding)

2)    Design operation area.

The easy thing we can do for the controls is to enlarge them. We can enlarge the textbox, button, tabs and almost every things need touching. However, we can use some techniques to do these things in some case.

First is “page break”. We always use “1” “2” “3” “4” as a link button for users to click. When it comes to mobile devices, I think “last page” and “next page” are easy to touch. We can also design a gesture like swipe for flipping over.

EXAMPLE:

(The second is relatively larger for touching)

In mobile devices, we always put items in dropdown box. Or we find it is inconvenience to touch calendar control in the web page. Here, we can make full use of selector inside mobile devices.

3)    Guide users through visual design.

(reference: webstyleguide.com/wsg3/7-page-design/3-visual-design.html)

Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral.

Define functional regions of the page.

Group page elements that are related, so that you can see structure in the content.

The Wild World of Responsive Media

The Wild World of Responsive Media
By Will Thomas

Content is the key to any website. Without meaningful, reliable and easy-to-access content, a website is just a collection of shapes and colors. Great for an art project – not so great as a resource. But content doesn’t just revolve around text. Font choice, size and color make a huge difference on a user’s experience with the written word; but a key to the overall takeaway value from a website comes from the right combination of text and media.

Users of the web aren’t what they were a decade ago, or even 5 years ago. The proliferation of fast, inexpensive wireless networks; mobile devices with immense computing power; and the overwhelming demand for tablets have forced the web to change venues. Or, at least, get a little bit more flexible with how it is formatted.

Gone are the days of the Yahoo Geocities-styled, flashing colors, morphing cursor, marching ants and terrible gradient background single page website. Today’s web is [predominantly] clean, clear and accessible on a variety of devices. This is where the term responsive comes in.

A responsive website, at its most basic, is a site in which the aspects of content, layout and navigation remain similar, yet vary depending on the viewing platform.

EXAMPLE w/ Screenshot: Time.com uses responsive techniques to tailor its content to display well on different devices.

More than just creative reordering of text boxes and font sizing go into a properly responsive site. Since the content is more than just textual, images, videos and even ads must be taken into account.

Dynamic Fonts

To begin understanding scalability of content, however, the most fundamental place to begin is with the text itself. For a news website, making sure that a user can read the written word the journalists have crafted is important, whether it is on a desktop computer at home, a laptop at work, or a mobile phone or tablet in between.

Font sizing on the web has two major groups: Static and “Dynamic”. Static sizing is exactly as it sounds; no matter what, a static unit remains the same regardless of the viewing platform. Some common examples of static font units are pixels (px) and points (pt). They both operate similarly and representation a fixed size. For instance, a font size of “12px” will display as twelve pixels on every screen. In a perfect world, where devices are standardized and twelve pixels display the same way on every screen this is not a problem. That perfect world doesn’t exist.

It comes down to the fact that different screens have different pixel densities, meaning one screen with given dimensions may have more pixels per inch than another screen with the same dimensions.

EXAMPLE w/ Graphic: Over time, Apple has similar screen dimensions on its iPad models, but with varied pixel densities. Early iPad models had a resolution of 1024×768 pixels @132 Pixels Per Inch (PPI). Later models with the same size screen have a resolution of 2048×1536 pixels @ 264 PPI. The new iPad Mini uses a screen of smaller dimension with the same resolution as the early larger models, but with an intermediate pixel density of 163 PPI.

It’s easy to see how a font displaying at twelve pixels (or similarly with points) would display differently depending on particular iPad model. Given this restriction, developing a website with static font units is a death knell. Thanks to the constant advancement of web technologies, there are solutions to this issue.

The easiest way to go about minimizing cross-platform/cross-device issues relating to font size is to use one of two units: Percent (%) or Ems (em).

These units rely on the relationship between at least one other fixed sizing somewhere else on the page. An initial font size (let’s say 12px) may be set for the large-format version of a page, perhaps in the body class of a CSS style sheet. By doing so, the base unit (em or percent) is set to twelve pixels. Larger text can then be coded as anything larger than 1em (using decimals) or 100% (using percentages). Smaller text can be coded similarly.

For example, the body text set at 12px could be coded as 1em or 100%. Headings could then be coded as 1.5em or 150%, depending on what works for the page.

EXAMPLE: body { font-size: 12px}…h1 {font-size: 1.5em}…OR…h1 { font-size: 150%}

The flexibility of this kind of coding allows for different style sheets or different media queries to simply change the initial font sizing for the page (ie. the body { font-size: __px } tag) and the relationship between the rest of the text on the page will remain the same. Headings will still be roughly the same size difference from body text, etc.

It must be noted, however, that pixels are not the only units that can be used in as the basis by which the other units are related. All the units have a rough equivalent, 1em = 12pt = 16px = 100%. Many designers will set the body font size as a percent and use ems to scale from there.

Other options exist, such a JavaScript libraries and other such plugins, but none are as simple as using dynamic units.

In addition to font sizing, it is important to consider the font face used to display the content. The use of various devices with different fonts installed adds to the difficultly of uniform display of text. One way around this issue is through the use of embedded fonts. Using the @font-face CSS code, or an online font library like Google Web Fonts adds a bit of load time to a page but reaps many benefits of cross-device display conformity.

Dynamic Images

In the world of the responsive web, images are one of the biggest pains when it comes to sizing. How does a designer maintain the use of a text-content-related image on a page that may be viewed on a hundred different devices with varying screen sizes and resolutions?

Well, the first and easiest test is to make sure that the image is important and adds meaning to the content no matter what device displays it. Once that first test is passed, it is important to make sure that that image is of a widely compatible format, such as JPEG or PNG. If the image is still deemed worthy of display, chances are it will find itself living in a DIV. An easy way to keep images behaving nicely with their parent DIVs is to utilize CSS’s “max-width” function. Using “max-width”, an image with a dimension of 800×600 pixels is only allowed to display at its full size if the DIV in which it is contained is large enough.

This method is especially handy when DIV dimensions are coded using percentages of a given screen. Simply put, if the desktop version of a site has a container DIV with a width of 960 pixels, the 800×600 pixel image will display at its full size. If that page is designed to scale when the window is smaller, lets say 500 pixels in width, the entire image will still load inside the DIV instead of getting cropped; it will simply display at a smaller dimension.

This is the simplest way to make sure images remain responsive, but it does not account of every issue. For instance, a mobile device using a 3G connection does not load image-intensive pages as quickly as most wired or WiFi connected desktops. It may be important to consider loading a smaller resolution (and therefore smaller file size) image when a page is viewed on a mobile device.

A good way to get around this problem is through the use of the “adaptive-images.php” script. It uses a modified .htaccess file to force web browsers looking for images to load to use the supplied .php function instead. It finds the appropriately sized image from the server and displays it. The best part is it doesn’t require you to re-code any of your existing HTML/CSS. Using PHP and a bit of JavaScript, Adaptive Images uses the original high-resolution image and creates/links to smaller versions by itself. This is a modification of Filament Group’s content-aware image function, but is a bit more straightforward and simpler to implement. The major drawback is that you need PHP running on your server. It also won’t work with content delivery networks. A ColdFusion version of Adaptive Images is also existence, but if you’re still using CF you’ve found your first problem.

Dynamic Video

In many ways, it makes sense to think that scaling a video player in a responsive website would work in much the same manner as an image. This is both true and false. True HTML5 video will indeed scale like an image, using the appropriate HTML or CSS code.

EXAMPLE: HTML – OR CSS – video { width: 100% !important; height: auto !important;}

That is great if you are using HTML5 video. Not only will it display in most modern browsers and on most computing platforms and mobile devices, but it will also scale like an image. The issue rears its ugly head when you start dealing with video hosted by YouTube or Vimeo using an iframe.

That’s where jQuery comes in. It allows you to remember the aspect ratios of the videos that are loaded on a page and when it is rescaled, the videos are scaled accordingly to fit the given width of the parent element.

If you have the ability and bandwidth to host HTML5 compliant video on your server, do it. If not, the JavaScript solution will work, even if it is a little clunky.

All in all, responsiveness is crucial in any site that is intended for widespread use. Any site that is worth using is going to have some kind of multimedia as part of its content. Such content isn’t outrageously difficult to set up correctly and will provide a much more rewarding user experience.