Responsive Design and Menu Structures

I started thinking about Responsive Design when I started developing the initial web component for my application. Responsive Design is all about mobile clients really; in particular designing with tablets and phones first then dealing with the desktop. There are a couple of libraries that can help you out. The buzz seems to be around Bootstrap, but there is a good following for Foundation as well. The differences are really minor. About the biggest one for me is that Bootstrap supported the both the LESS and SASS preprocessors – I use less. Foundation only supports the SASS preprocessor.

Refactoring the Home Page

When I started thinking about my home page and where my application was targeted, I realized I had the login screens all wrong. If you browse to the home page you get a login screen. It has a Register button and a Forgot Password button, but it isn’t very friendly. There is nothing about what I’m signing up for. If you look at any consumer targeted web site, you will see that the home page is unauthenticated and contains some information about the site. Then there is a Register and Sign-In button on the top menu. Once you have registered or signed in, the Register/Sign-in buttons get replaced with Profile and Sign-Out buttons. So this is the logic that I want to implement.

Color Palettes and Fonts

I develop with a dark palette in Visual Studio. It seems to be more restful on the eyes. It isn’t eye-catching though. I chose a dark palette for my web site initially for the same reason. I chose my font – Segoe UI – for the same reason. It’s the one that I use when developing and it works for me.

Since I am thinking about design, I decided to take a look at my color palette. There are whole discussions on the Internet on color palette design. My rule of thumb is to choose five main colors:

  1. A color for the background of your header
  2. A color for the highlighting of your header (slightly lighter or darker than #1)
  3. A color for your highlighting
  4. A color for your main page background
  5. A color for your main page foreground

I tend to use the main page background as my header foreground color. A couple of good tools for you to use:

  1. The Adobe Color CC Tool allows you to choose colors and get other suggestions
  2. The Colorsafe web site shows colors that are accessible by nature
  3. Paletton provides a color palette designer

I played with these tools for about an hour to get something I liked, mostly influenced by my wifes tastes. The color palette I came up with was:


I love how Visual Studio fills in the color approximation for me. This is placed in a LESS file that I can include anywhere called colors.less.

Fonts also play a critical role in responsive design. Some fonts are just not readable on a small screen. Some are suitable for logos but not anything else. Since my application is a “fantasy theme”, I expect to go for some fantasy type fonts (think elven and dwarvish scripts). For the main page, however, I want to stick to readable fonts. The best idea is to stick to the font stacks you like.

When I started reviewing font choices, my first inclination was to look at every font I could and decide on that. There are a bunch of good sites out there. Here are the ones I bookmarked:

  1. Google Web Fonts – if it’s here, use it from here. They have a nice CDN
  2. Adobe Web Fonts – all of the Google Web Fonts plus some of their own
  3. FontSquirrel – free fonts for downloading and using in your site
  4. 1001 Free Fonts – Another good source of fonts, especially fantasy styled fonts

I tend to work with web standard fonts where possible and I like to provide a font stack – it’s standard practice to list several fonts in your font-family so that you can provide graceful degradation of fonts, always ending in a “web standard” font like “sans-serif” or “cursive”. If I want a particular sort of font I’ll try and pick one from Google or Adobe (so I don’t incur the cost of shipping it to the user – it’s loaded from a CDN) and only after that will I download and integrate a font file.

How do I know which fonts are good? Well, first off, I use my own eyes and the eyes of those around me – ordinary people. My wife and friends may be a little bored of me asking “which font is better?” Secondly, I have some resources:

  1. CreativeBloq produced a blog article on some good fonts
  2. is a site dedicated to font stacks
  3. Smashing Magazine wrote about good font stacks
  4. A website for getting a complete font bundle for a theme

The Navigation

I removed the [Authorize] tag from my HomeController class – it’s no longer needed as I am allowing anonymous access. My Areas/Main/Views/Layout.cshtml file will include code that decides whether I am logged in or not. Let’s walk through my layout:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="~/jspm_packages/npm/font-awesome@4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="~/jspm_packages/github/twbs/bootstrap@3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="~/style/main.css">

This is all my styling. Firstly, the view port is necessary to make the responsive design work. I bring in the bootstrap library and three fonts. Sigmar One and Architects Daughter are from Google Fonts. I’m going to use Sigmar One as my “Logo Text”. I’m going to use Architects Daughter for a “handwriting look-alike”. Font Awesome is a great collection of icons that can be used instead of the Glyphicons that are included with Bootstrap.

    <!-- Required Polyfills -->
    <script src="~/jspm_packages/npm/webcomponents.js@0.6.0/webcomponents-lite.min.js"></script>

    <!-- Components used -->
    @RenderSection("htmlelements", required: false)


The rest of my header is about the Web Components. I use the Web Components Polyfill for updating the browser to support the four W3C specifications I need and then I let the page choose any HTML custom elements they want to use.

        <div id="logo">Grumpy<br>Wizards</div>
        <nav class="navbar-collapse collapse">
            @if (User.Identity.IsAuthenticated) {
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-user"></i> Administrator <span class="caret"></span>
                        <ul id="account-menu" class="dropdown-menu" role="menu">
                            <li><a href="#">My Profile</a></li>
                    <li><a href="/Account/Login/Logout"><i class="glyphicon glyphicon-log-out"></i> Logout</a></li>
            } else {
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/Account/RegisterAccount"><i class="glyphicon glyphicon-user"></i> Register</a></li>
                    <li><a href="/Account/Login"><i class="glyphicon glyphicon-log-in"></i> Sign In</a></li>

This is the real meat of my new code. I’ve included a header element that spans the entire page. In CSS I have made it 75px high, colored the background and also made it a flex-box with two parts. The nav section is taken from Bootstrap but I’ve added my own styling so that rollover highlighting works correctly. I’ve copied “Grumpy Wizards” as my site name from the Google Fonts Site. If you browse over there, the inital text used to show off the fonts starts with “Grumpy Wizards”. Somehow, it seemed appropriate for my application.

Note the use of the Razor if statement. If the user is authenticated, then use one version of the nav bar. Otherwise use the other version of the nav bar.

There is still some work to do here – the absolute links need to be converted over to @Url.Action calls to ensure that they work in all situations. In addition, I don’t have a collapsing nav bar. In responsive design, you have to cope with a very small screen. Normally this is done by turning your nav bar elements into a menu when you go onto a phone.

    <div class="flex-container">

    <!-- BootStrap Javascript Dependencies -->
    <script src="~/jspm_packages/github/components/jquery@2.1.3/jquery.min.js"></script>
    <script src="~/jspm_packages/github/twbs/bootstrap@3.3.4/js/bootstrap.min.js"></script>

    <!-- JSPM Boot Loader -->
    <script src="~/jspm_packages/system.js"></script>
    <script src="~/config.js"></script>

    <!-- Page Scripts -->
    @RenderSection("scripts", required: false)

Finally, I’m bringing in the bootstrap Javascript. I’m also bringing in the system.js module loader and letting the view specify any scripts they want to use.

Someone is going to point out that my menu structure does not collapse and as a result it disappears completely on very small screens. I wanted to get the basic navigation structure first then add in the collapsing menu. I’ll write another blog post about that tomorrow. In the mean time, I’ve checked in the code to this point under tag cs-0.0.6.