<commit_before><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title><NAME> | Blog: Technical Blog - Mobile Design and Frameworks</title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">
    <!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="<KEY>" crossorigin="anonymous">
<link href="../styles/main.css" rel="stylesheet" type="text/css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Typekit.com  --->
    <script src="https://use.typekit.net/vlt6ive.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
    <!-- Fontawesome -->
    <script src="https://use.fontawesome.com/12927612f0.js"></script>

  </head>
  <body>
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="../index.html"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse navbar-right">
          <ul class="nav navbar-nav">
            <li><a href="../index.html">Home</a></li>
            <li class="dropdown active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">Sprint - Week 1</li>
                <li><a href="c1-reflection-blog.html">Reflection</a></li>
                <li><a href="c1-time-and-habits-blog.html">Time and Habits Management</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Sprint - Week 2</li>
                <li><a href="t2-html-css-dom-p1.html">Technical Blog - HTML, CSS and DOM Part 1</a></li>
                <li><a href="t2-html-css-dom-p2.html">Technical Blog - HTML, CSS and DOM Part 2</a></li>
                <li><a href="c2-emotional-intelligence.html">Search Inside Yourself - Emotional Intelligence</a></li>
                <li class="dropdown-header">Sprint - Week 3</li>
                <li><a href="t3-design-to-web-blog.html">Technical Blog - Mobile Design and Frameworks</a></li>
              </ul>
            </li>
          </ul>

        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container">
<div class="col-sm-8 blog-main">

          <div class="blog-post">
            <h2 class="blog-post-title">Technical Blog - Mobile Design and Frameworks</h2>
            <p class="blog-post-meta"><i class="fa fa-user-circle-o" aria-hidden="true"></i> By <a href="#"><NAME></a> | <i class="fa fa-calendar" aria-hidden="true"></i> Post Date: March 10 2017 </p>
            <img src="../images/blog/responsive-vs-mobile-first-webdesign.jpg" alt="Image: Responsive vs Mobile First Design.">
            <div class="blog-post-entry">
              <h2>What a responsive site is, and why responsiveness is important.</h2>
              <p>A site is considered responsive when it can adapt itself to the different type of devices (desktop, laptop, desktop, tablet, smartphone, etc) while managing usability and readability for the user. In practice, we will use the following approach:</p>

              <h3>Fluid grids and Flexible Images</h3>
              <p>
                When we deal with layout or image, we have to remember that we will not use fix measurement like px (pixel) but will use % (percentage) or em (Ems) for width or height instead.
              </p>

              <h3>Media Queries</h3>
              <p>
                Another approach is to use media queries to target the device’s width and apply the appropriate style. It can also load a different style sheet based on type of media. For instance, when a user want to print the website, we give them a printer-friendly version rather than the default style sheet.
              </p>

              <h2>What mobile first design is, and why it's important.</h2>

              <p>It is different approach to design a website. Usually we would design website by focusing on desktop and then trickle down to the smaller devices.  Mobile first design is the other way around. </p>

              <h2>What frameworks are, and their pros and cons.</h2>
              <p>Framework is meant to help you code faster and save time by allowing you to re-use code onto your project - you don’t have to start from scratch. Usually frameworks, the good ones are a collaboration by many developers or backed by a company so you can be sure they are tested and will work - no need too worry much about browser compatibility.</p>

              <p>
                However, since you are using someone else’s code, you will have to follow their standard. This can be small and easy to learn or it change your entire work process.  </p>

              <h2>What a wireframe is and why we use it.</h2>

              <p>Wireframe is a blueprint of your website. People use this to visually see the basic structure of the website without focusing on the design details like color scheme, logo, icons, etc.</p>
              <img src="../images/wireframe-index-page-desktop.jpg" alt="Wireframe: Blog Index Layout - Desktop Version" class="thumbnail">
              <img src="../images/wireframe-blog-page-desktop.jpg" alt="Wireframe: Blog Post Layout - Desktop Version" class="thumbnail">
              <img src="../images/wireframe-index-page-mobile.jpg" alt="Wireframe: Blog Index Layout - Mobile Version" class="thumbnail">
              <img src="../images/wireframe-blog-page-mobile.jpg" alt="Wireframe: Blog Index Layout - Mobile Version" class="thumbnail">
          </div>
          </div><!-- /.blog-post -->


        </div>

        <div class="col-sm-4 blog-sidebar">
      <div class="sidebar-module sidebar-module-inset">
        <img class="bg-image" src="../images/auckland-skyline.jpg" alt="Image of Auckland skyline">
        <img class="profile" src="../images/sam-profile.gif" alt="Profile: <NAME>">
        <h4 class="profile-name"><NAME></h4>
        <div class="sidebar-container">
            <hr>
        <p>Hi. My name is <NAME>.<br /><commit_msg>Add header to wireframe images<commit_after><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title><NAME> | Blog: Technical Blog - Mobile Design and Frameworks</title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="<KEY>" crossorigin="anonymous">
    <!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="<KEY>" crossorigin="anonymous">
<link href="../styles/main.css" rel="stylesheet" type="text/css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Typekit.com  --->
    <script src="https://use.typekit.net/vlt6ive.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
    <!-- Fontawesome -->
    <script src="https://use.fontawesome.com/12927612f0.js"></script>

  </head>
  <body>
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="../index.html"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse navbar-right">
          <ul class="nav navbar-nav">
            <li><a href="../index.html">Home</a></li>
            <li class="dropdown active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Blog <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">Sprint - Week 1</li>
                <li><a href="c1-reflection-blog.html">Reflection</a></li>
                <li><a href="c1-time-and-habits-blog.html">Time and Habits Management</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Sprint - Week 2</li>
                <li><a href="t2-html-css-dom-p1.html">Technical Blog - HTML, CSS and DOM Part 1</a></li>
                <li><a href="t2-html-css-dom-p2.html">Technical Blog - HTML, CSS and DOM Part 2</a></li>
                <li><a href="c2-emotional-intelligence.html">Search Inside Yourself - Emotional Intelligence</a></li>
                <li class="dropdown-header">Sprint - Week 3</li>
                <li><a href="t3-design-to-web-blog.html">Technical Blog - Mobile Design and Frameworks</a></li>
              </ul>
            </li>
          </ul>

        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container">
<div class="col-sm-8 blog-main">

          <div class="blog-post">
            <h2 class="blog-post-title">Technical Blog - Mobile Design and Frameworks</h2>
            <p class="blog-post-meta"><i class="fa fa-user-circle-o" aria-hidden="true"></i> By <a href="#"><NAME></a> | <i class="fa fa-calendar" aria-hidden="true"></i> Post Date: March 10 2017 </p>
            <img src="../images/blog/responsive-vs-mobile-first-webdesign.jpg" alt="Image: Responsive vs Mobile First Design.">
            <div class="blog-post-entry">
              <h2>What a responsive site is, and why responsiveness is important.</h2>
              <p>A site is considered responsive when it can adapt itself to the different type of devices (desktop, laptop, desktop, tablet, smartphone, etc) while managing usability and readability for the user. In practice, we will use the following approach:</p>

              <h3>Fluid grids and Flexible Images</h3>
              <p>
                When we deal with layout or image, we have to remember that we will not use fix measurement like px (pixel) but will use % (percentage) or em (Ems) for width or height instead.
              </p>

              <h3>Media Queries</h3>
              <p>
                Another approach is to use media queries to target the device’s width and apply the appropriate style. It can also load a different style sheet based on type of media. For instance, when a user want to print the website, we give them a printer-friendly version rather than the default style sheet.
              </p>

              <h2>What mobile first design is, and why it's important.</h2>

              <p>It is different approach to design a website. Usually we would design website by focusing on desktop and then trickle down to the smaller devices.  Mobile first design is the other way around. </p>

              <h2>What frameworks are, and their pros and cons.</h2>
              <p>Framework is meant to help you code faster and save time by allowing you to re-use code onto your project - you don’t have to start from scratch. Usually frameworks, the good ones are a collaboration by many developers or backed by a company so you can be sure they are tested and will work - no need too worry much about browser compatibility.</p>

              <p>
                However, since you are using someone else’s code, you will have to follow their standard. This can be small and easy to learn or it change your entire work process.  </p>

              <h2>What a wireframe is and why we use it.</h2>

              <p>Wireframe is a blueprint of your website. People use this to visually see the basic structure of the website without focusing on the design details like color scheme, logo, icons, etc.</p>
              <h3>Desktop Version</h3>
              <img src="../images/wireframe-index-page-desktop.jpg" alt="Wireframe: Blog Index Layout - Desktop Version" class="thumbnail">
              <img src="../images/wireframe-blog-page-desktop.jpg" alt="Wireframe: Blog Post Layout - Desktop Version" class="thumbnail">
              <h3>Mobile Version</h3>
              <img src="../images/wireframe-index-page-mobile.jpg" alt="Wireframe: Blog Index Layout - Mobile Version" class="thumbnail">
              <img src="../images/wireframe-blog-page-mobile.jpg" alt="Wireframe: Blog Index Layout - Mobile Version" class="thumbnail">
          </div>
          </div><!-- /.blog-post -->


        </div>

        <div class="col-sm-4 blog-sidebar">
      <div class="sidebar-module sidebar-module-inset">
        <img class="bg-image" src="../images/auckland-skyline.jpg" alt="Image of Auckland skyline">
        <img class="profile" src="../images/sam-profile.gif" alt="Profile: <NAME>">
        <h4 class="profile-name"><NAME></h4>
        <div class="sidebar-container">
            <hr>
        <p>Hi. My name is <NAME>.<br />
{'fraction_non_alphanumeric': 0.147234273318872, 'fraction_numerical': 0.009490238611713666, 'mean_word_length': 2.6009275079326337, 'pattern_counts': {'":': 0, '<': 339, '<?xml version=': 0, '>': 339, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3286491', 'n_tokens_mistral': 4359, 'n_tokens_neox': 4144, 'n_words': 1330}