Simplex Design blog : Bootstrap 101: Applying Bootstrap to TheSimplexDesign.com - case study

Link to SimplexDesign - free premium blogspot template

Bootstrap 101: Applying Bootstrap to TheSimplexDesign.com - case study

Posted: 30 Jul 2013 01:40 AM PDT

In last post, I told you about Bootstrap, what it is, what it can do. You maybe realize how convenience this framework to web design.
In this post, I will tell you what I did to apply Bootstrap framework to current design of TheSimplexDesign.com.

Here is the purpose for applying Bootstrap to SimplexDesign:

- Adding responsive feature to current design, make it display good in most of mobile device included smartphone and tablet.
- Changing current design to a modern one, re-arrange elements, remove unnecessary widgets.

Here is what I did:

1. Responsive layout

Layout of Simplex Blue template which applied to SimplexDesign has 4 separated sections:
-   Header include top navigation bar.
-   Left sidebar include logo and widgets.
-   Right section for blog widget.
-   Footer section

The HTML structure of template is as bellow

<div id='primary-nav'>
</div>
<div class='wrap'>
     <div class='right' id='content'>

     </div>
     <div class='left' id='sidebar'>

     </div>

   </div>

<div id='footer'>
      <div id='fwidget-1'>

       </div>
       <div id='fwidget-2'>

       </div>
    <div id='fwidget-3'>

    </div>
    <div class='clear'/>
   </div>



    </div>

Now, to apply Bootstrap responsive layout to this template:

a. Install Bootstrap to template, install instruction has been written in post 1: Bootstrap 101

b. Bootstrap layout has 12 same-width columns, the width shown by percentage, not a fixed number, so whenever display area of a website change (different monitor, different displaying device), width of each column changed corresponding. These 12 columns are base, unit columns for a layout. You can split your layout to ratio 4:8, 4 columns in left and 8 columns in the right, or 6:6, split 50% for each side, or 4:4:4, depends on your need. The most special things here is each columns can become a smaller 12 columns grid. It's something like this

6   | 6
6   | 6 (become a smaller 12 columns grid, so it can split to 3 columns width ratio: 4:4:4 like bellow)
6   | 4 | 4 | 4

c. I drew the new layout of theSimplexDesign.com will be as bellow:

Header will spread to full-page width, so the width of header will be 12 columns.
Sidebar will be moved the right because it looks more professional, and the ad widgets in the left guarantee a higher conversion rate to the left. You can refer to Google's article on hot spots in a website and best place for ads in a website here.
Content widget will be moved to the left. The ratio between left and right is 8:4, it means the content widget has the width by 8 columns and the right sidebar has the width by 4 columns.
Footer section include 3 widgets, so the footer section will has the same width with header, 12 columns, and 3 widgets inside will be split to ratio 4:4:4, each has the width by 4 columns.

d. I wrapped each section in old layout by HTML markup of Bootstrap grid as bellow:
You might notice that the left sidebar moved to the right.

<div class='navbar'>

    </div>

    <div class='container-fluid'>
    <div class='row-fluid'>
          <div class='span12'>

        <div class='span8' id='content'>

                  </div>


        <div class='span4 hidden-phone' id='sidebar'>

        </div>

    </div>
     </div>
    </div>


    <div class='container-fluid' id='footer'>



            <div class='row-fluid'>
            <div class='span4' id='fwidget-1'>

            </div>

            <div class='span4' id='fwidget-2'>

            </div>


            <div class='span4' id='fwidget-4'>

                          </div>
        </div>
        </div>

e. The most important thing is to remove the width attribute in CSS of sections: header, sidebar, content and footer, to make the width follow to new width which set in Bootstrap framework. I searched class or id of sections in CSS part of template file, it will lead to the width attribute of these sections, and we only need to wipe them out.

f. After that, I can save template and see the result, change the browser window size and see the result, when window size getting smaller, each section will be smaller. When it reach to a limit, sidebar will be disappeared, posts are arranged vertically instead of horizontally as usual. By using responsive design feature, I can also deactivate the mobile version of theSimplexDesign.com which automatically generated by Blogger. You can easily find out that new layout display better in tablet or smartphone than mobile version which limited in both of color and layout.

2. Modern design

a. To make thesimplexdesign.com look more professional, I decided to replace the top navigation bar by a new one, the old is very small and hard to read, it is not fit the new design, when window size changed, it doesn't change. So the new one must be larger, easier to read and automatic change from text to dropdown menu style when browser window's resized.
This kind of menu is in Bootstrap framework, so I need to remove the old menu. And add the HTML markup of new menu as bellow:

<div class='navbar'>
        <div class='navbar-inner'>
            <div class='container'>
                <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
                     <span class='icon-bar'/>
                    <span class='icon-bar'/>
                    <span class='icon-bar'/>
                </a>

                 <div class='nav-collapse collapse'>
                     <ul class='nav'>
                         <li><a href='http://www.thesimplexdesign.com/'>Home</a></li>
                        <li><a href='http://www.thesimplexdesign.com/p/about-me.html'>About us</a></li>
                        <li><a href='http://www.thesimplexdesign.com/p/advertise-on-simplexdesign.html'>Advertise</a></li>
                        <li><a href='http://www.thesimplexdesign.com/p/write-for-us.html'>Write for us</a></li>

                        <li><a href='http://www.thesimplexdesign.com/p/hire-us.html'>Hire us</a></li>
                        <li><a href='http://templates.thesimplexdesign.com/'>Template Download</a></li>
                        <li class='dropdown'>
                            <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Categories<b class='caret'/></a>
                            <ul class='dropdown-menu'>

                                <li>
                                     <a dir='ltr' href='http://www.thesimplexdesign.com/search/label/templates'>Templates</a>
                                </li>
                                <li>
                                     <a dir='ltr' href='http://www.thesimplexdesign.com/search/label/blogger'>Blogger</a>
                                </li>
                                <li>
                                     <a dir='ltr' href='http://www.thesimplexdesign.com/search/label/design'>Design</a>
                                </li>
                                <li>
                                    <a dir='ltr' href='http://www.thesimplexdesign.com/search/label/Ajax'>Ajax</a>
                                </li>
                                <li>
                                     <a dir='ltr' href='http://www.thesimplexdesign.com/search/label/SEO'>SEO</a>
                                </li>
                                <li>
                                     <a dir='ltr' href='http://www.thesimplexdesign.com/search/label/ecommerce'>Ecommerce</a>
                                </li>
                                <li class='divider'/>
                                <li>
                                     <a dir='ltr' href='http://www.thesimplexdesign.com/search/label/FAQ'>FAQ</a>
                                </li>
                                <li>
                                     <a dir='ltr' href='http://www.thesimplexdesign.com/search/label/freebies'>Freebies</a>
                                </li>
                            </ul>
                        </li>
                    </ul>




                </div>
            </div>
        </div>
    </div>

b. One more thing need to change is typography, I means the font. Modern website tends to use new style fonts, larger font-size, larger line spacing. Old web designs get stuck with traditional fonts such as aria, time-new roman, verdana … because they are supported by browsers. But we can use new style fonts, embedded to website using Google font. Google font is a free service of Google that support embedded fonts for all website. All you need to do is to browse Google font website, choose the font that suit your website and follow Google instruction.
To the new design of TheSimplexDesign, I chose Open Sans font for the text and Yamrakee font for the header tags (h1, h2…h6)

c. Removing Category widget in sidebar, and widgets in footer bring more space to web interface. It make website look clean, clear, and focus on content, avoid distracting to others. It also gives more space for advertisements. Google Adsense team said that the best ad sizes are: 720x90, 120x600, and 338x280. You can see these ad sizes in new layout of theSimplexDesign.com instead of smaller ad sizes as old versions.
That's what I did for theSimplexDesign.com. You can consider this one a case study before making any change with Bootstrap in your site. Hope it helpful to you all and don't hesitate to leave me comment.