Introduction to Mobile Prototyping with HTML, CSS and JavaScript
If you are a designer in this day and age you are probably designing for handheld devices like smartphones and tablets. We live in a polarizing world where on one side we have native apps and on the other the web, with responsive sites and web apps. Designing in this environment requires understanding of the context you will be designing for, therefore, testing on devices. There are several ways to create prototypes, from paper to motion in After Effects. For me, basic HTML, CSS3 and JavaScript do the best job because they allow me to test on the phone with an incredible level of accuracy.In this post I will start sharing some tips on how to create basic HTML/CSS3/JS prototypes. The idea is to enable you to test your designs on phones, tablets or web. I will also assume that you know a little bit of HTML and CSS, but of course you can learn that online or doing the reverse engineer. So in this first post I will show you how to create a simple prototype with a few icons and basic transitions. You can then apply to your own designs. The coolest thing is that you can create a super smooth prototype with this simple technique.
Introduction
The first thing is to start an HTML document and make sure you have the structure done.For prototypes, the simplest way to create them is by having all screens you want to test in the same file, that way there won't be any lagging between screens. Remember, we are creating a prototype, not a web app.
The way I organized my HTML is that every screen will use a "DIV" tag with an "ID" and a "CLASS='SC". That way I can use CSS to make them work the same way.
For each screen I used the "HEADER" tag to create the header of the screen. Below is the full HTML file of the prototype.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="utf8">
<title>Prototype</title>
</head>
<body>
<div id="home" class="sc selected">
<ul>
<li class="link none" page-load="screen1"></li>
<li class="link slideup" page-load="screen2"></li>
<li class="link slideleft" page-load="screen3"></li>
<li class="link slideright" page-load="screen4"></li>
<li class="link slidedown" page-load="screen5"></li>
<li class="link 3dright" page-load="screen6"></li>
<li class="link 3dleft" page-load="screen7"></li>
</ul>
</div>
<div id="screen1" class="sc">
<header>
<a class="back link none" page-load="home">Back</a>
<h1>Screen 1</h1>
</header>
</div>
<div id="screen2" class="sc">
<header>
<a class="back link backdown" page-load="home">Back</a>
<h1>Screen 2</h1>
</header>
</div>
<div id="screen3" class="sc">
<header>
<a class="back link slideright" page-load="home">Back</a>
<h1>Screen 3</h1>
</header>
</div>
<div id="screen4" class="sc">
<header>
<a class="back link slideleft" page-load="home">Back</a>
<h1>Screen 4</h1>
</header>
</div>
<div id="screen5" class="sc">
<header>
<a class="back link backup" page-load="home">Back</a>
<h1>Screen 5</h1>
</header>
</div>
<div id="screen6" class="sc">
<header>
<a class="back" page-load="home">Back</a>
<h1>Screen 6</h1>
</header>
</div>
<div id="screen7" class="sc">
<header>
<a class="back" page-load="home">Back</a>
<h1>Screen 7</h1>
</header>
</div>
</body>
</html>
Step 2
For the icons, notice that I created a list using "UL" and "LI". Also notice that there are other classes like "LINK", "NONE", "slideup", "slideleft" and more. I will cover those in a few, but for now let's focus on the design of the screens and the icons.The first line you can see that I am reseting the CSS, that's an easy way to clear all properties and styles that browsers have. I am using the Eric Meyer's CSS Reset. You can find it at http://meyerweb.com/eric/tools/css/reset/
For the screens, this is the CSS:
@import "reset.css";
html, body{
width: 100%;
height: 100%;
}
body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
position: relative;
}
.sc{
width: 100%;
height: 100%;
position: absolute;
display: none;
z-index: 10;
}
.sc.selected{
display: block;
z-index: 11;
}
Icons
For the icons, we will use a basic "display:inline-block". We could have used the new and fancy flex model, however it doesn't work in Safari, so for now let's wait till iOS7.#home ul{
width: 100%;
height: 100%;
text-align: left;
}
#home ul li{
height: 72px;
width: 72px;
background: #fff;
display: inline-block;
margin: 22px 0 0 22px;
border-radius: 6px;;
}
Screens
Each screen will have a different color background. Below you can see the CSS.#home{
background: #333;
}
#screen1{
background: #2C3E50;
}
#screen2{
background: #E74C3C;
}
#screen3{
background: #3498DB;
}
#screen4{
background: #ECF0F1;
}
#screen5{
background: #2C3E50;
}
#screen6{
background: #E74C3C;
}
#screen7{
background: #3498DB;
}
jQuery
Now it's time for the most important part, how to make things work. How to make the links open a different screen. To do that we will use Javascript with jQuery. We will use jQuery because it's easier for beginners to understand how Javascript work.To use jQuery we will have to make sure we are loading it in our HTML. To do that, use this code withing your "HEAD" tag. We are basically loading jQuery from its servers.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Removing the 300ms lag
Every time you click/tap something using a mobile phone, there will be a 300ms second if you use regular Javascript events like "onclick". To get rid of that there are some plugins online. The one we will use is based on Google Fast Button, but it's a jQuery version. You can read more about it at https://github.com/alexblack/google-fastbutton
Download the ZIP file and copy the .js files to the folder of your HTML file. Then add these lines right after the previous "script" tags that you used load jQuery.
<script src="google.fastbutton.js"></script>
<script src="jquery.google.fastbutton.js"></script>
Animations
CSS animations are the best way to create silk smooth animations for mobile prototypes. You can create animations using the keyframe technique, however there's an amazing jQuery plugin that helps. The plugin is the jQuery Transit - CSS3 transitions and transformations by Ricard Cruz http://ricostacruz.com/.Same thing as before, let's load the plugin. Just add the code like the example below.
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" type="text/javascript"></script>
Basic transition
For the basic transition, that's hiding the current screen and showing the new one we will use CSS classes. Notice that theres a ".sc" and a ".sc.selected". For the basic ".sc" we have a "display:none", that means all screens will be hidden. Then for the one selected ".sc.selected" there's a "display:block". So basically, the idea is, the screen that's visible, it will have a class "selected". By removing the class and adding to another screen, we make a simple transition.Below you can see the code.
$(document).ready(function() {
$(".link").fastClick(function () {
screen = "#" + $(this).attr("page-load");
if($(this).hasClass("none")){
$(".sc").removeClass("selected");
$(screen).addClass("selected");
}
})
})
The code above is basically, when the user clicks on a tag with the class ".link" it will get the screen to show, that is in the "page-load" from the link. We will create a variable called "screen" to have this value, but we will add the "#" symbol, that is the one used to represent the "ID".
If the link has a class "none" that is for different animations, we will basically remove the class "selected" to all ".sc" tags. Then we will add the class "selected" to the one we want to show.
Slide from Right to Left
To create a simple slide transition, we will pretty much follow the same idea, the only difference is that we will position the screen to load off the current viewport and then animate it in. Below you can see the code.if($(this).hasClass("slideleft")){So the code below will first add a class "previous" to the current screen, that's already selected. Then it will position the screen to show off the screen using "$(screen).css({x:$(window).width() + "px"})" that means, the screen will be position in the width of the window "$(window).width()" to get the value and move it in the X axis to that point. Example, if your screen is an iPhone, it will move the new screen at 640px. Then the class "selected" will be added in order to make it visible. At this point you will have 2 screens with the class "selected".
$(".selected").addClass("previous");
$(screen).css({x:$(window).width() + "px"}).addClass("selected");
$(".previous").transition({x:"-" + $(window).width() + "px"},300,"ease");
$(screen).transition({x:"0px"},300,"ease",function () {
$(".previous").removeClass("selected");
$(".previous").removeClass("previous");
$(".sc").removeAttr("style");
});
}
The second part is the animation using jQuery Transit. So we will basically animate the screen that was on the right to the 0 position using "$(screen).transition({x:"0px"},300,"ease",function ()". The time of the animation will be 300ms and it will use "ease" to make the speed not linear. Once the animation ends, we call a function to remove the "selected" class from the "previous" tag. Then we remove the "previous" class too. At last we remove any "style" attribute to make sure that there won't be any issue in the other animations.
More Animations
Below you can see different transtions type. We have SlideUp, SlideDown, SlideLeft, SlideRight, BackDown, Backup.if($(this).hasClass("slideup")){
$(".selected").addClass("previous");
$(screen).css({y:$(window).height() + "px"}).addClass("selected");
$(screen).transition({y:"0px"},300,"ease",function() {
$(".previous").removeClass("selected");
$(".previous").removeClass("previous");
$(".sc").removeAttr("style");
});
}
if($(this).hasClass("slidedown")){
$(".selected").addClass("previous");
$(screen).addClass("selected");
$(screen).css({y:"-" + $(window).height() + "px"});
$(screen).transition({y:"0px"},300,"ease",function() {
$(".previous").removeClass("selected");
$(".previous").removeClass("previous");
$(".sc").removeAttr("style");
});
}
if($(this).hasClass("slideleft")){
$(".selected").addClass("previous");
$(screen).css({x:$(window).width() + "px"}).addClass("selected");
$(".previous").transition({x:"-" + $(window).width() + "px"},300,"ease");
$(screen).transition({x:"0px"},300,"ease",function () {
$(".previous").removeClass("selected");
$(".previous").removeClass("previous");
$(".sc").removeAttr("style");
});
}
if($(this).hasClass("slideright")){
$(".selected").addClass("previous");
$(screen).css({x:"-" + $(window).width() + "px"}).addClass("selected");
$(".previous").transition({x:$(window).width() + "px"},300,"ease");
$(screen).transition({x:"0px"},300,"ease",function () {
$(".previous").removeClass("selected");
$(".previous").removeClass("previous");
$(".sc").removeAttr("style");
});
}
if($(this).hasClass("backdown")){
$(".selected").addClass("previous");
$(screen).show();
$(".previous").css("z-index","24").transition({y:$(window).height() + "px"},300,"ease",function() {
$(".previous").removeClass("selected");
$(".previous").removeClass("previous");
$(screen).addClass("selected");
$(".sc").removeAttr("style")
});
}
if($(this).hasClass("backup")){
$(".selected").addClass("previous");
$(screen).show();
$(".previous").css("z-index","24").transition({y: "-" + $(window).height() + "px"},300,"ease",function() {
$(".previous").removeClass("selected");
$(".previous").removeClass("previous");
$(screen).addClass("selected");
$(".sc").removeAttr("style");
});
}
Using the animations
With this basic code you can simply add a class "link" to any tag to make it clickable. Once it's clickable you can choose the transition by using another tag. In our case you can use:Conclusion
It might look confusing, but as any new thing we want to know there's a learning curve. The secret is to go little by little, with small little achievements in order to get easy and quick rewards, that way we keep ourselves motivated.You can also download the files and check on your phone (recommended)
Download Files
0 comments:
Post a Comment