Translate

من يرغب في ارسال

من يرغب في ارسال اي مقال يمكنه المراسله علي الاميل goreg12@gmail.com

عنواين الرئيسيه

كشف حقيقة التربح غير المشروع لجمعيات الاسكان التعاونى وتوظيف الاموال ؟ جمع الاموال لمشروع بناء وهمى على ارض محل نزاع قضائى على الملكيه ؟-رسالة من أحد ضحايا كشف الفساد المالى والإدارى -فراد أسرة النائب العام متوغلون في إدارة شركات مكتظة بالفساد المالي -المهندس شريف سوسة رئيسا لشركة بدر الدين للبترول. -إهدار4 ملايين جنيه بشركة بدر الدين للبترول -فساد بـ4 ملايين جنيه بشركات البترول بمطروح-مذكره التي اثارت غضب بعض الافراد من شركه بدر الدين...

www.alarabiya.net

/www.islammemo.cc

الثلاثاء، 30 يوليو 2013

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

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><!--end #content-->
     <div class='left' id='sidebar'>
       
     </div><!--end #sidebar-->
       
   </div>
    
  <div id='footer'>
      <div id='fwidget-1'>
       
       </div>
       <div id='fwidget-2'>
               
       </div>       
    <div id='fwidget-3'>   
                        
    </div>               
     <div class='clear'/>           
   </div><!--end .wrap-->   
       
       
               
     </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><!--end #content-->
       
         
          <div class='span4 hidden-phone' id='sidebar'>
           
         </div><!--end #sidebar-->
       
    </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><!--end .wrap-->               
         </div><!--end .wrap-->   
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><!-- /.nav-collapse -->
             </div>
         </div><!-- /navbar-inner -->
     </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.
مرسلة بواسطة في ليست هناك تعليقات:

الأربعاء، 24 يوليو 2013

Simplex Design blog : Bootstrap 101: Website interface supermarket and shopping web elements

Simplex Design blog : Bootstrap 101: Website interface supermarket and shopping web elements

Link to SimplexDesign - free premium blogspot template

Bootstrap 101: Website interface supermarket and shopping web elements

Posted: 24 Jul 2013 02:14 AM PDT


Nowaday, building a site interface is not difficult. We had javascript frameworks which help to save more time in writing script, now we have front -end framework which is like a supermarket, you take items from the list and add to your site.

For example, how you add a navigation bar to your site before ? First, you have to add HTML markup, and then you have to write CSS to make this nav bar looks like what you want, and the last step is to writing script if needed. Is that right ? But what happen if now you need to do the first step only, I mean adding HTML markup. The script and CSS already is in the framework itself, you don't need to write CSS and javascript anymore. Is this faster?
Yes, it give you less option and flexible, but it easier for beginner when start building a site, if you want, you can still add CSS code to overwrite existing CSS of front-end framework.
The most popular front-end framework is Bootstrap. Bootstrap's files contain Grid layout, icons, javascripts... every element you need to build a site's interface. Bootstrap's grid layout also supports responsive feature, works well in all mobile devices.
In this post series, I will show you install instruction of Bootstrap and the way I did to integrate bootrap to SimplexDesign blog for responsive design.

How to use Bootstrap

1, The first, you need to take a look on Bootstrap website: http://twitter.github.io/bootstrap/index.html

2, To add Bootstrap framework to your site, you don't need to download and host it your self. There's a host already for this frameworks at http://www.bootstrapcdn.com . Just add this code to the header of your template file, before </head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
These two lines are complete CSS and javascript file for Bootstrap framework.

3, Bootstrap has 4 sections that cover all things in a website's interface. They are:
  • Layout: bootstrap support grid layout, fixed width and fluid width (calculating in percentage), and responsive layout (layout which can change depend on device displaying)
  • Base CSS: Include CSS for typography, code, table, form...
  • Components: Include script of all components for a website interface: dropdown menu, navbar, buttons ...
  • Javascript: Include script of all basic elements in a website interface which related to javascript: tooltips, tab, carousel (slider) ...


Now, if you want to add a navigation bar to your site, just need to do as bellow:

a, Add the Bootstrap framework to your template file as step 2.
b, In template file, choose the place where you want to add navigation bar, and then add the HTML markup bellow
    <ul class="nav">
    <li class="active">
    <a href="#">Home</a>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
Save template, and see the result. No need to write javascript, no need to write CSS, no need jquery plugins any more.

c, if you want page navigation:

Just need to add this HTML mark up
    <ul class="pager">
    <li class="previous">
    <a href="#">&larr; Older</a>
    </li>
    <li class="next">
    <a href="#">Newer &rarr;</a>
    </li>
    </ul>
Save template and check the result. You will see a page navigation.

d, Adding icon is easier than before. If you want to add home icon and Home link to your site, here is something you must write in the past:
<div><img src="icon home src"/> <a href="#">Home</a></div>
 But this is what we need with bootstrap:
<div><i class="icon-home"></i><a href="#">Home</a></div>
No need to host your icon. Save more time and bandwidth, especially for a platform like Blogger. We don't need to worry about host for javascript, host for images and get headache whenever these hosts down.
That's all for Bootstrap installation. In next post, I will show you what I did to integrate Bootstrap to SimplexDesign for responsive feature.
مرسلة بواسطة في ليست هناك تعليقات:
الاشتراك في: الرسائل (Atom)