Web design - responsive web-design yes-no, cross-browser compatibility

I'm not web designer, I'm web developer. Period.
But ... some people from management echelon of many companies either don't care or choose to forget that.
Sadly small companies can't afford web-developer and professional web-designer.
Bottom line is that they ask from web-developer to know his way around web-design.
"Hey ! It's not that complicated, little bit of layout, little bit of  color, fonts etc.
Are you telling me you don't know this !? "

How many times I have heard this...

Ok, so our bosses tend to take for granted that we can deal with web-design.

Hence as beginner in web-design and strictly from perspective of building business web sites here is some high level tips & tricks and observations.

Responsive web design

Is this just buzz word or some thing to consider ?

http://msdn.microsoft.com/en-us/hh535902.aspx

Here is the closing word from above article that, for me, sums up:

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. 

From VS 2013 Microsoft decide to give official support to one of html frameworks that supports this concept - Tweeter Bootstrap.
Does this mean that Bootstrap is must-have ? Should I invest in Bootstrap? Lady from above does not think so.
Let's go step back. Can we have today modern web site that does not care about device sizes ? No.
So what's then in the middle? Is there middle ?

Bit old but efficient and I think cheaper approach is to enforce classic and mature HTML frameworks like BoilerTemplate etc.
Yes you can use and Bootstrap only as HTML framework. Still Bootstrap is build on LESS. Don't know what's LESS? Well that's my point. I don't want to learn Less so I can efficiently use Bootstrap.

Here is some quick result from Google:

http://komelin.com/en/5tips/5-most-popular-html5-responsive-frameworks
http://www.sitepoint.com/boilerplate-bootstrap/

This is interesting quote from above column:

Boilerplate is more server-side oriented – a good starting template if you work with server-side technologies such as PHP.
Bootstrap is a client-side solution – a complete toolkit for building client-side web sites.

A bit more about responsive itself:

http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

A still bit more about predecessor of Responsive Web design:
http://en.wikipedia.org/wiki/Progressive_enhancement

Here is a quick starter with Bootstrap in ASP.NET:

http://geekswithblogs.net/JeremyMorgan/archive/2012/09/18/how-to-use-twitter-bootstrap-on-an-asp.net-website.aspx

Here is a bit more pro & cons for Responsive web design approach:
http://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvc-application

Cross-browser compatibility

This is endless subject. As rookie in web-design make sure to not make big promises for cross-browser compatibility for your web-design solutions. This is common pitfall of many web-design starters.

"Oh yeah, I did it... Sure it works and looks same on all browsers types and versions... Wait a minute, isn't it suppose to ?"

Major compatibility culprit is IE. Maybe this can help:

Internet Explorer 11 guide for developers -> http://msdn.microsoft.com/library/ie/bg182636(v=vs.85).aspx

I think you can also search for older version development guides.

• Advantage: Optimizes rendering for the specific device in use, even for unknown future devices according to whatever screen and input characteristics they have
• Advantage: Easily lets you share server-side logic across all device types – minimal duplication of code or effort
• Disadvantage: Mobile devices are so different from desktop devices that you may really want your mobile pages to be completely different from your desktop pages, showing different information. Such variations can be inefficient or impossible to achieve robustly through CSS alone, especially considering how inconsistently older devices interpret CSS rules. This is particularly true of CSS 3 attributes.
• Disadvantage: Provides no support for varying server-side logic and workflows for different devices. You can’t, for example, implement a simplified shopping cart checkout workflow for mobile users by means of CSS alone.
• Disadvantage: Inefficient bandwidth use. You server may have to transmit the markup and styles that apply to all possible devices, even though the target device will only use a subset of that information.

Media queries

Corner stone of modern web-design...
http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/#media0