Responsive Web Design II

In this post, I will provide a summary of posts that I read about Responsive Web Design and links to good articles that should be read entirely.

Let’s start with the summary of the Ethan Marcotte’s article about Fluid Grids. Ethan shows how to transform a pixel-based layout in a percentage-based layout. Here are the main points:

• "The design had to be fluid and resize with the browser window."

• Using em

We take the target value for each element’s font-size in pixels and divide it by the font-size of its container (that is, its context). We’re left with the desired font-size, expressed in relative, em-friendly terms.

target / context = result

If we assume the body’s default type size to be 16px, we can plug each desired font-sizevalue into this formula. So to properly match our header to the comp, we divide the target value (24px) by the font-size of its container (16px): 24 ÷ 16 = 1.5
So the header is 1.5 times the default body size, or 1.5em, which we can plug directly into our stylesheet.

If we could treat font sizes not as pixels, but as proportions measured against their container, we could do the same with the different elements draped across our grid.

We can use the same proportional analysis to transform pixel-based column widths into percentage-based, flexible measurements. So we’re working from a target value of 700px for the page’s title — but it’s contained within a designed width of 988px.

As a result, we simply divide 700px (the target) by 988px (the context) like so: 700 ÷ 988 = 0.7085. And there it is: 0.7085 translates into 70.85%, a width we can drop directly into our stylesheet.

I tried to summarize another good article of Ethan Marcotte, about Responsive Web Design, – that I indicated in last post –, but there are several important information and examples, so I think the better option is to read it completely.


Different CSS files according to screen resolution
In Ethan Marcotte's articles you read about media queries but if you want, instead of using media queries to adjust layout for all devices, you can use the Adapt JavaScript to set which CSS file should be loaded according to the screen size. This link provides the JS file and examples of how it works.


Another important links
• W3C Documentation about CSS for mobile
• W3C Mobile web best practices

Videos formats supported

ISalon
Most of ISalon videos are running in YouTube player. YouTube support the file formats: WebM, .mpeg4, 3gpp, MOV, .avi, .mpegps, .wmv and .flv.
One of the videos is running in a flash player provided by studio that support .flv files.

Fujitsu
The player used in Fujitsu support raw video, rgba, yv12, wmv (1, 2 and 3), wmva, wvc1, h264, h.263 and mpeg-4 (the same extensions supported by MediaCommands).

Responsive web design

I found an interesting post about Responsive Web Design in the Smashing Magazine - a complete introductory guide to this concept that shows important topics and good links about this subject.
Click here and take a look :)

Internet Explorer 9 release

After the release of IE9, we need to develop a new method of work with HTML and CSS.

According to the promise – and the dream of web designers and developers – the new version of Internet Explorer will be more compatible with the rest of browsers (Chrome, Firefox, Opera, Safari) than the old versions. But even if it is true, we cannot forget that our customers require a website that works in IE7 and IE8 too.

Below are, first, the solutions that I found to websites that we will create in the future, and then, solutions for the ready-made websites.

Future websites

The IE versions work differently from each other and differently from other browsers. It makes our job harder: we spend hours making layouts consistent in all browsers.

To try to solve our IE7/IE8/IE9 headaches all at once, I suggest that we always put a META tag in the websites to make IE8 and IE9 render pages like IE7. Thus, we have to think about just one IE versions: 7.
Add to that, I suggest that we make a specific CSS file for Internet Explorer, so we will avoid using hacks.

We will have other CSS files applied for all browsers and this specific CSS applied only in IE - conditional stylesheet (read more about that here: CSS-Tricks).

IE9 solution

The META tag that we will use was created just to IE8 emulate IE7, so I don't know if it will work fine in IE9. The fact is: using this META tag, IE9 emulate IE7 and I didn't find any difference between the three versions of IE yet - I tested all pages of IPass project (that use the META tag) in IE9 and everything looks fine.
Thus, in theory, everything that works in other IE versions, will also work in IE9. BUUUUT, if the things don’t work as we wish, we have the new CSS hack for IE9 only. Here it goes:

.selector
{
     property: value\9;
}


Already created websites

When customers start to report problems and request IE9 compatibility with other browsers, we must analyze what is happening and see if we can solve it using the simple CSS hack aforementioned – this is not the best solution, but it is a fast way to solve problems and it is suitable for ready-made websites.
If some customer report huge problems, we will have to set the META tag (if it is not already being used) and specific CSS for IE. Then, check how it will affect the layout in IE7 and IE8 and, maybe, disapply hacks that we were using before.


Don’t forget the good practices!

All these new practices cited don’t exclude the previous ones: the use of base and reset CSS files. It is important always use these files to make sure that the problems between browsers will be avoided.
It is also important search for alternatives to improve the HTML and CSS. And, based on that, below is a list of known good practices that are easy to follow.

• Standardize the names and the capitalization rules of classes, ID's, ...
It is important to name classes, ID's and div's according to their function rather then to their style, to avoid problems in case of a layout change.
It is interesting to follow Camel Casing practice - the same capitalization rule used by our develop team. Bellow is a short explanation of what it is.

"Camel Casing convention capitalizes the first character of each word except the first word, as in the following examples: propertyDescriptor, ioStream, htmlTag."
-> Source: Brad Abrams - MSDN Blogs.

• Grouping CSS values
This practice saves lines of code and makes the CSS easier to understand.
Instead of use:

.myClass
{
     padding-top: 2px;
     padding-right: 5px;
     padding-bottom: 3px;
     padding-left: 6px;
}

Group values into a single line of code. Use:

.myClass
{
     padding: 2px 5px 3px 6px;
}

• Name content place holders correctly.
Do not let the Content Place Holders with the automatically name set by Visual Studio (ContentPlaceHolder+NumberOfContent).
Always name them according to their function - using short and concise names -, then they will be easily identifiable when editing HTML in Visual Studio and when adding content in Sitefinity.

• Sort the selectors' properties.
I like to organize the properties in a logic way:

.selector
{
     [background];
     [size];
     [spacing and positioning];
     [borders];
     [text properties];
}

This practice affects only the organization of CSS file and facilitates the search for properties, without affecting the file working. It would be nice talking about this practice to define if this is the most logical organization that we can do.


All these tips and patterns will help us to work with all Internet Explorer versions and other browsers. Over time, we will realize what can be improved and, then, we can post here about possible changes and new good tips :)