23visuel-dev: February 2013

Last week I was thinking about where internet is moving to, so I decided to devote my first post as a co-author of this blog to trends driven by today's technologies. In other words, I will try to see what are market needs that have to be satisfied.

Recently, I had a seminar on developing breakthrough online presence for small businesses where I was discussing the 3 eras of World Wide Web we have passed.

The first decade or establishing stage of the Web was until early 2000's when some of the major websites were founded (including Google) and internet users did not really interact with internet but were only information takers.

Second or the Social era started after dot com boom. During this period online (social) services like youtube, facebook and, why not, match-making were introduced to the market. Further services were all designed around the social base, which made a huge success for some companies.

Currently, we are in the Cloud or Mobile internet era.
We are facing technologies that developed in a direction allowing internet users be mobile, travel and have access through their smartphones, keep in touch on social level, use apps, play games online, work on their personal files regardless in what country they are today and where they are moving tomorrow.
So, opportunity-wise location does not change service availability which leads to thoughts that location is the key to designing new services/apps around it (just as "social" was during the previous internet era).

Now, on a smartphone you can use an app to see your moves on a map and count steps, you can take a photo outside, process with an app and upload online immediately, You can checkin and invite friends, you can find best restaurant closest to your current location, you can find people interested in dating within 3 miles, you can find hotels, best deals, stores, best price cargo services, etc., etc. You can do almost ANYTHING around Location and whatever is not available yet, is surely going to be there.

What's coming next after cloud era? Unfortunately, I have no answer yet. But, technologies are what defines upcoming trends, we just need to keep our wits about us.

About Bootstrap

(skip this part if you know about this project)

http://twitter.github.com/bootstrap/index.html

Bootstrap is a tool that will make web-development and web-design very easy. You can make a very clean, professional looking website in a very short time and with very little effort if you choose to use it. It's absolutely free and doesn't really require working knowledge of JavaScript or jQuery, although that would certainly help and give more versatility to what you can do and how you can use other components. But that will be a separate post. For now, I'm just going to explain the layouts
Bootstrap provides.

So, first things first, go download Bootstrap and include the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My page</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>

If you are planning on using the JavaScript components you will also need to get jQuery and include the following in <head></head>:

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

But I will talk about this later and for now you just need the css stylesheet from Bootstrap.

Bootstrap Layouts

Remember what a painful experience it was making sure that your layout will look good across browsers? Making tables to tie all the components together or using CSS styles to position divs? And adding special extra codes to make sure it will all look the same in IE and Mozilla? As if that wasn't enough for poor web-developers and web-designers then phones came out adding even more headache. Forget all that.

Bootstrap provides a layout system that will look the same across any major browser (IE7 and up), phone, and tablet. It is done through a grid system. There are 2 grid systems - fixed and fluid. Fixed is based on pixels, and fluid is based on percentages. The standard width of your page is 940px but you can use a variable-width grid as well.

The grid system uses 12 columns. They can be wrapped into rows. The sum of column numbers must be equal to 12 for fluid layout. Like column 1 and column 11. Or 3 column 4s, or 12 column 1s etc.

Also you can offset columns to leave some empty space equal to the width of any of the 12 columns.

So all of that sounds like making a table only instead of actual values you use numbers 1 through 12 and can merge columns. Wrong. You use divs and assign them classes. Here's basically how you do it.

At first you make a 'container' div.

<body>
<div class="container">
...
</div>
</body>

For fluid grid set class="container-fluid"

</div>

For fluid layout use row-fluid instead.

.span1 is the smallest column and .span12 is the widest. The code above will look like a 2 column layout with first column being narrow and second being wide.

The way offsetting works is through adding an .offset class where N varies 1 through 11.

</div>

This will offset the first column by the width of span2 to the right. Notice that the sum of span numbers and offset numbers must equal 12. It's important for the fluid layout as it is based on %s.

You can also nest rows inside rows. Still simple code.

<div class="row">
<div class="span12">
Level 1 column

<div class="row">
<div class="span4">
Level 2
</div>
<div class="span8">
Level 2
</div>
</div>

</div>
</div>

Now that almost looks like the layout of this blog.

Bottom line is you don't have to worry about sizes, margins, paddings, etc and your code will look very clean and short.

If you're a fan of drawing a basic look of your page in Photoshop or Illustrator you can do it quite loosely now and just use the graphics rather than slicing everything up and calculating margins and offsets. I think of it as building blocks - build the skeleton of your website, loosely add artwork and text and convert it to html. This way instead of showing a picture to your client you can just show the page right away which to most clients will look like you did a lot more work. And you can show it on your phone, too, making the client even happier.

And as you can see all you have to keep in mind is the Bootstrap classes for divs - container, row, spanN, offset. Quite intuitive and easy to remember.

23visuel-dev

Thursday, February 28, 2013

Thoughts on WWW trends

Tuesday, February 26, 2013

Twitter Bootstrap - Layouts

About Bootstrap

Bootstrap Layouts

23visuel

Contributors