Dec 8, 2013

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

Dec 2, 2013

What not to do in ASP.NET, and what to do instead

Remember to read:

http://www.asp.net/aspnet/overview/web-development-best-practices/what-not-to-do-in-aspnet,-and-what-to-do-instead#browsercap

ASP.NET in 2012, 2013 - what's new ? - Quick guide for very lazy developers

I'm lazy developer.
Instead of regularly following news in my ASP.NET field I watch SF Star Gate. :)
Then you get stuck on your daily basis on boring SQL driven apps or even .NET desktop app's and you'r through.
So every year or two I wake one day and understand that I don't know nothing of most cool and sexy stuff people use for building web in ASP.NET.

Today is end of 2013. Now I'm an common ASP.NET developer not some MVP geek so my goal is to found out what's out there ready, tested and mature that helps me, as very lazy person :), to build more slicker, cooler and faster business web-sites.

Scott Hanselman  made very good intro for one off his post:

http://www.hanselman.com/blog/ReleasedASPNETAndWebTools20122InContext.aspx

Last year the ASP.NET team started talking about something we're calling "One ASP.NET." I showed some mockups of our ideas last summer at the aspConf Keynote that you can watch online.
We also announced then that we would add new features to ASP.NET as out of band releases (OOB) without breaking existing functionality. This means that developers don't have to wait for the next version of Visual Studio for great web development features today. We're aiming to add to ASP.NET and Web Tools every 6 months.
For those that don't want to wait, Mads and the team also started a feature playground called Web Essentials. This is an extension to Visual Studio that updates all the time with ideas and brainstorms about how VS can be an even better editor for the web. As features "graduate" from Web Essentials, they move into ASP.NET and Web Tools proper. A bunch of features graduate with today's release.

So boys and girls:

One ASP.NET


First buzz word - repeat and remember - new flagship of ASP.NET !


Web Tolls


http://www.asp.net/aspnet/overview/visual-studio-web-development-features/what-is-web-tools

To spare you 10 mins for watching above video. Yes, you need web tools. They won't mess with your choices of technology or way you work. They are optional helpers whom you have to choose explicitly to make your life easer.

Web Essentials

So Web Essentials is so to say community development package  for Web Tools products.

If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript or LESS, then you will find many useful features that make your life as a developer easier. 
Unobtrusive helpers for CSS, Html, Javascript ...
They are not in the way but can help...

Modernizr


http://modernizr.com/
Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.
For a while I stumble of this little guy in VS web project templates and I have no clue what a heck is purpose of it. So here it is.
If you are experienced web designer (which I'm not :) ) you need to take special (and expensive ! ) care about browser compatibility.