Turning legacy web site to be responsive

In my latest project, our client is doing a re-branding with their existing non-responsive website. Here are some take-aways I think wroth sharing.

“It’s just changing the header and footers and replace current CSS framework to bootstrap, right? “

1. Designs always comes first.

Bootstrap is magical however the content on the website might not be. Design and content arrangement are really the key to a successful responsive web site. Guide line? I say check facebook.

2. It’s a new world that percentage is replacing pixels, Be Relative.

It may cause some trouble to some designer in the very beginning.
Best example would be image elements. On mobile with different screens images with pixel dimensions would be very hard to coop. Using media query to set Img to percentage is a important good trick that you cant live without.
With different phone orientations, the percentage design just make more sense.

3. Good CSS habits helps a long way
The rules of no inline styling code is becoming more important than ever.
Bootstrap help you to set up simple minimal media queries into phone/tablet/laptop/HD screens.
Apart from that, you may want content on desktop and mobile varies a bit. Even different Looking and feel.
Media queries is playing a important role here, which means inline styling should NOT be used or at least minimised in usage, and It is not just your css needs to be aware, your JavaScript libs too.

4. Secret weapon from MVC4

If your mobile content/design and your desktop design is just too far apart. MobileView could be you final saviour if you are using MVC.NET, I believe other framework can do the same as well.

It is very easy to implement, though i do think MS can do a much better job.

1. Create a view model

“Xxxx.Mobile.cshtml”, When visitors with certain user agents, mobile view will be picked up instead of default view. By having this, you may put all different designs and content in this separate view without worrying too much of content compatibility issues with you desktop version.

2. Users agent checking.

public class MobileDisplayMode : DefaultDisplayMode
    {
//a list of mobile user agent key words, you may extend it with 51degrees.mobi or similar        
private readonly StringCollection _useragenStringPartialIdentifiers = new StringCollection
        {
            "Android",
            "Mobile",
            "Opera Mobi",
            "Samsung",
            "HTC",
            "Ericsson",
            "SonyEricsson",
            "iPhone"
        };

        public MobileDisplayMode()
            : base("Mobile")
        {
            //for some unknown reason, IsMobileDevice can only detect windows and iphone. so we need to do one more check to include other phones.
            ContextCondition = (context => context.GetOverriddenBrowser().IsMobileDevice || IsMobile(context, context.GetOverriddenUserAgent()));
        }

        private bool IsMobile(HttpContextBase context, string useragentString)
        {
//here I added a cookies feature, to allow user override mobile and keeps desktop view if required
            var display = (context.Request.Cookies["display"] == null || context.Request.Cookies["display"].Value != "desktop");
            var userAgent = _useragenStringPartialIdentifiers.Cast<string>()
                        .Any(val => useragentString.IndexOf(val, StringComparison.InvariantCultureIgnoreCase) >= 0);
            var isMobile = display && userAgent;
            return isMobile;
        }
    }

3. Override DisplayMode at Application_Start()

DisplayModeProvider.Instance.Modes.RemoveAt(0);
DisplayModeProvider.Instance.Modes.Insert(0, new MobileDisplayMode());

Conclusion: Making a responsive website is getting much easier than before. there are more than one solutions to make responsive website optimised.
It requires a bit understanding in the beginning to consider content organisation across screens. However after all, it actually enforced us developers to produce a cleaner and more maintainable markups in the end.