Our Tradecraft
WE LOVE CREATING WONDERFUL EXPERIENCES
Mobile-First Web Design and Development

In a Wireless World - We Start with Mobile

Over the past few years, the boom of mobile devices can be felt everywhere in the world. This has affectted how consumers conduct and consume their information across the globe. For businesses who don’t adapt or change, they’ll be left behind — which is why we’ve started with Mobile-First design and development.

Progress Enhancement
vs. Selective Subtraction

Why do we use a Mobile-first methodologies? and why should you care? Simply, you receive a better product that will be tailored for your customers — thus making you more money.

You may be aware of responsive design and how websites are able to change to adapt to a user’s screen, mobile first isn’t quite the same. While it uses responsive methodologies, it expands on the premise and takes it further with the idea that mobile should be done first. Why is that? Its the difference between progressive enhancement and selective subtraction. Typically, websites are designed for desktop screen then adjusted, by removing content, for smaller tablet and mobile devices. By doing this, information is removed leaving the website missing what it once had — this is selective subtraction. Where as, if a project were to start with mobile first, the content and design needs to be optimized from its inception — thus making the content streamlined and the message optimized. From there, the content is expanded to adapt to larger screens, this is progressive enhancement.

Next Step, Development

When it comes to development, it can be a bit of a mystery — not too many people know what is involved in taking images and creating a website from them. Depending on the scale of the project, especially when it comes to backend work, a lot of the work can happen behind the scenes. This can include functions, objects, and database work that if done correctly, the user should never know existed. But here at Diesel 9, we want to make everything transparent for our clients, which is why we’ve included this section. Below are code examples from our website to help illustrate what goes into actually programming a functioning web presence. This includes everything from Front-end all the way to the Back-end.

HTML5 and CSS3 Front-End Development's structure and style

We’re going to start with the Front-end and slowly move into the background, where the code isn’t visible to the user. However, with Front-end coding, it’s easy to see the code in action. There are two main parts to the Front-end, HTML and CSS. Think of HTML like your structure or frame, and CSS as the icing on the cake. The combination of the two is what makes up the styling and structure you see when viewing a website. These are crucial for creating the visual experience the user will have when they view your website.

Mobile-First Web Design and Development
  <div class="example-text">
    <span
      class="example-title"
      data-text="Mobile-First">
        Mobile-First
    </span>
    <span class="example-description">
      Web Design and Development
    </span>
  </div>
.example-text {
  color:#fff;

  font-size: 3.2em;
  text-transform: uppercase;
  text-align: center;

  padding-top: 0.2em;

  .example-title {
    position: relative;
    color:transparent;
    font-family: $font-aqua;

    letter-spacing: 0.2em;

    &::after {
      content:'';

      width: 3em;
      height: 0.15em;

      background-color:  $purple-bright;

      position: absolute;
      top :-0.5em;
      left:calc(50% - 1.5em);

      z-index: 1;
      @include transition(
        width 0.5s $easing 0.5s,
        height 0.5s $easing 0s,
        left 0.5s $easing 0.5s,
        top 0.5s $easing);
    }

    &:before {
      content:attr(data-text);

      position: absolute;
      top: 0;
      left: 0;

      z-index: 5;
      color: #fff;
    }

    &:hover::after {
      height: calc(100% + 0.5em);
      width: calc(100% + 1em);
      left: -0.5em;

      @include transition(
        width 0.5s $easing 0s,
        height 0.5s $easing 0.5s,
        left 0.5s $easing 0s,
        top 0.5s $easing 0.5s);
    }
  }

  .example-description {
    font-size: 40%;
    letter-spacing: 0.2em;
    display: block;

    font-family: $font-kabel-book;

    font-style: italic;

    padding-top: 0.5em;
  }
}
  

Javascript / jQuery Front-End Development's Responsive to the User

In conjunction with the HTML and CSS, Javascript can add interactivity to the structure and style. Javascript can be used in various forms but when its used in enhance the experience of a website, it adds the interactivity and motion. Which means it can create more dynamic responses based on the user’s input, such as: on hover effects, scrolling effects, and even change the state of elements.

Mobile First Design

<h2 class="replace-me font-aqua
white center uppercase"
> Mobile First Design </h2>

  $(document).ready(function(){
    var _title = $('.replace-me');
    var _array = [
      "Mobile First Development",
      "Progressive Design",
      "Responsive Design & Development",
      "User Experience",
      "Mobile First Design"
    ];
    var _i = -1;
    var _timeoutID =
      window.setInterval(
        switchText, 4000
      );

    function switchText() {
      _i++;

      if(_i == _array.length) {
        _i = 0;
      }

      _title.animate({
        opacity: 0
      }, 500, function(){
        _title.html(_array[_i]);

        _title.animate({
          opacity: 1
        }, 500)
      });
    }

  });

Ruby on Rails Rapid Development for Web Applications

Ruby on Rails is a development suite that encompasses the previously discussed languages with the addition of Back-end support. We’ll focus on the benefits of the Back-end. Using Ruby on Rails, we create not just websites but web applications. These are website that contain logic that allows users to have functionality such as login, registration, history, etc.. To give you an example of what Ruby on Rails can do, Twitter was originally built on Ruby on Rails, they only switched to proprietary software after 1 million users.

rails generate scaffold User first_name:string last_name:string email:string password:string
invoke  active_record
create    db/migrate/20170405141529_create_users.rb
create    app/models/user.rb
invoke    test_unit
create      test/models/user_test.rb
create      test/fixtures/users.yml
invoke  resource_route
 route    resources :users
invoke  scaffold_controller
create    app/controllers/users_controller.rb
invoke    erb
create      app/views/users
create      app/views/users/index.html.erb
create      app/views/users/edit.html.erb
create      app/views/users/show.html.erb
create      app/views/users/new.html.erb
create      app/views/users/_form.html.erb
invoke    test_unit
create      test/controllers/users_controller_test.rb
invoke    helper
create      app/helpers/users_helper.rb
invoke      test_unit
invoke    jbuilder
create      app/views/users/index.json.jbuilder
create      app/views/users/show.json.jbuilder
invoke  assets
invoke    coffee
create      app/assets/javascripts/users.coffee
invoke    scss
create      app/assets/stylesheets/users.scss
invoke  scss
create    app/assets/stylesheets/scaffolds.scss