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.
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.
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.
<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;
}
}
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.
<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 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
At Diesel 9 our goal is to deliver fresh, innovative and beautiful user experiences and designs to our clients through websites and mobile applications.
email: dmaddock@diesel9.com
phone: 416 - 509 - 3149
