In this new project I’m working, I’m using Cocos2D, because I need to build an OpenGlES app with a parallax scroll with multiple layers and of course, to add more complexity, all the data comes from a preload DB with, let’s say (for now), 7000 inserts. Drawing 7000 icons that scroll is just non sense and its just out of a question, so I came out with the same old mechanism “draw only what you need”.

It took me a few days (I admit, my math isn’t soo strong, it was, when I was doing Flash, then I moved into regular apps with UI and UX) but at the end I solved quite elegantly with just a small method. Now I check for every movement of the camera, what icons should be inside that area and what is outside. Simply removing all the sprites and drawing only the ones I need, which soo far I only need 12 every time. Memory consumption max 2.4mb and OpenGLES performance at 60fps. I think I can be happy with my coding. I like to be a maniac perfectionist ^_^ (also a never changed geek and nerd)

tune of the day

Cerrone - Supernature

tune of the day

Daft Punk – Derezzed (8 bit remix)

I wonder if its because I try to apply rules of abstract coding over the rules of the universe [!]

clip of the day:

2010 – The year we made contact “Hal voice test”

tune of the day

Crystal Castles “Cry babies”

tune of the day

Patrick Cowley ”Megatron man”

tune of the day

Tyco “Human condition”

Same goes for the Windows 8 app store. The latest OS from Microsoft still has less then 4% of the overall market share on PCs, according to ExtremeTech

This, for many, it is the begin of everything. Well, [geekly] speacking. But I had to start with something.
Coding is great, good, makes your life better, it’s like a daily vitamin pill. The downside? Permanent neck and shoulder pain ^_^

tune of the day:

Kraftwerk “Computer Love”

“This bundle is invalid. Apple is not currently accepting applications built with this version of the OS.”

In the SystemVersion.plist, it turns out our build for 10.7.3 is 11D50b (b being beta). Xcode does not allow beta OS to be used to compile and submit to the Mac App Store. This is clearly a bug and will be fixed. However there is a workaround:

Change the SystemVersion.plist in /System/Library/CoreServices with TextMate (it will ask you for a password to save) or with TextEdit (you will need to change the file permissions first).

Locate the line Build Number: 11D50b and remove the last “b”.

Save, restart Xcode (make sure you do this), clean, archive and you are finally able to submit successfully.

Once you’re done, I recommend you quit Xcode and made sure to change everything back to how it was before. If you keep the file open in TextMate you can “undo” your way back to the original file, which states:

Build Number: 11D50b
ProductUserVisibleVersion: 10.7.3
ProductVersion: 10.7.3

I will not trust restarting my mac with a messed up plist like that.
So use at your own risk and happy coding!

Source: Stack Overflow

Santa brought us a cool gift this year: a Kindle Fire tablet.

At a first glance we were astonished: “Why?! We’ve been good boys through the whole year. Why are being punished?”. It’s not and iPad, but ok.

Heh, just kidding… I couldn’t lose the opportunity. What can you expect from Apple fanboys?

Ok, seriously. We’ve been using it for a week now and decided write a small review of our first impressions while handling the gadget.

Looking at the tech specs available on CNET website, we noticed that this is a very simple yet good tablet for the everyday use and a good gadget to keep on your bedside table:

• 7 inches screen;
• 1024x600px (169ppi) screen resolution;
• 8GB integrated memory and dual-core processor;
• Wi-fi, but no bluetooth nor 3G;
• Supported audio formats: AAC, WAV, OGG, MP3, MIDI;
• Supported text formats: AZW, PRC (Mobipocket), PDF, DOC, TXT, DOCX;
• Supported video format: MPEG-4;
• Supported image formats: PNG, JPEG, BMP, GIF;
• Recharge time: 4 hours with the included charging cable. However, it charges when you plug in your PC, but the gadget stays in “stand-by” mode and you can’t use it while charnging;
• Battery life (wireless off): 8 hours of continuous reading (this could easily spoil a good night of sleep).

A deeper analysis of the tablet brought us into some good and some not so good conclusions.

So let’s start with the not so good aspects:

• No USB to Micro USB cable included, needed to access the gadget content from your computer. Also, after testing with the cable we found out that the transfer rate is quite slow;
• A bit thick;
• Scrolling smoothness is bad;
• It gets slow when changing screen orientation;
• Amazon store accepts only US credit card for pay. Here, at the Brazilian office we couldn’t buy anything (apps, books, TV shows) because it does not even accept international credit cards;
• Does not recognize the main electronic book formats: .epub and .mobi;
• Internet browsing is a poor experience. Since it’s resolution is 1024x600px and most of the websites are built for 1024x768px resolutions, you either lose a lot of vertical space when in landscape position or it cuts part of the content horizontally when in portrait.

Now the good points:

• Feels very good in hand for its size. One can hold it with only one hand;
• The task of typing something is very pleasant because your thumbs can reach all the virtual keyboard keys without having to take your hands off the tablet body. In addition to it, a large variety of special symbols are available on the special keys keyboard;
• You can copy your MP3 files from your computer, there’s no need to re-buy them from Amazon. If your MP3 carries album data like Album cover, Album Name, etc., it will help to organize your songs in albums. Also, it’s possible to listen to music while you read a book or browse the internet.
• Reading books is quite pleasuring just like on iPad. You can highlight texts and make notes over it. However, since the screen emits light, your eyes may get tired after some hours of reading. I know, this is a problem that comes with iPad too.

Overview:

Kindle Fire is a very good tablet, easy to use and to carry, good to have on your bedside table or your backpack.

Also its price is quite reasonable for what is being offered.

The only thing that made me a bit sad was the difficulty of purchasing apps, books, movies and music.

However I’d recommend it for regular users that don’t need awesome performance and graphic resources and think that having iTunes to manage all their tablet content is too much effort for a small piece of shining plastic.

My only concern is: Amazon, Y U NO PUT USB TO MINI USB CABLE INSIDE THE BOX?!

We’ve just arrived from an awesome conference that opened our minds to new ideas and point of views.

Yes, last week we were at Interaction South America (#ixdsa11), a conference with emphasis on Interaction Design, that happened in Belo Horizonte, MG, Brazil.

The event had the presence of some of the most talented designers, engineers and architects of the Americas talking about Design Thinking, Service Design and Interaction Design. Although our company focus on mobile design/development and the event wasn’t specifically about the mobile world, we absorbed a lot of good concepts that we plan to include in our work methodology.

The first day began with a brief introduction about the event and we quickly went to the workshops, where we could have a detailed vision about how Design Thinking and User Experience work and why they are so important on project planning.

The Design Thinking workshop was led by Isabel Fróes, Psychologist and Interactive Telecommunications Program master. After she made a brief presentation of what it means, she gave the class an imaginary project and guided the participants through the phases of the process in order to reach three different results and make an analysis of them.

The User Experience workshop, led by Walter Cybis, PhD in Production Engineering applied to Software Ergonomy, was focused on User Experience Monitoring. He went through the most common processes and techniques of user experience analysis and then taught how to use the most popular online tools to measure the user adaptivity to the interface suggested based on the statistics generated in the tests.

Still on the first day, to finish our quest for relevant knowledge, we attended to Brian Rink’s talk about How to Build Creative Communities. Rink is a designer specialist in organizational transformation in IDEO and made a brilliant talk about how to make good use of interaction design and the importance of the designer on several activities identifying problems and developing creative and efficient solutions for those problems in order to achieve better results.

On the second day of the conference we can highlight two lecturers: Denise Eler and Chloe Gottlieb.

Denise Eler, Innovation and Design Thinking consultant, talked about the importance of investing more money in service improvement and less in merchandising and advertisement when what usually happens is the opposite. She showed several cases in which she worked as a consultant and also talked about the several job opportunities that are available to the designers. It was a very interesting talk focused on Service Design and innovation.

Chloe Gottlieb, Creation Executive Director at RG/A, made a brilliant talk about Data Driven Design and how information is used to motivate people change their lifestyle. She cited examples like Nike+ that tracks people workout activities and how the data generated from these exercises is transformed into useful information for the consumers and how they can share it with their online communities.

Finally, the third day of conference was enlightened with the talks of Bill Scott and Mike Kuniavsky.

Bill Scott, Senior Director of Web Development at PayPal, featured the importance of the responsive design for services that need to be present on many different devices and how the design is influenced by different ways of interaction that are clearly visible between web, mobile and TV.

Mike Kuniavsky, designer and entrepreneur, opened our eyes to an interesting aspect of how we see products and services nowadays. He said we were habituated to buy products that matters to us as products, and now what really matters is the service. For example: people wouldn’t buy a smartphone only by its beauty or quality but mainly for the services that come with it such as internet, twitter, facebook ando so on. Things that go beyond the calling function.

The conference itself was very interesting and we came back home with a lot of new ideas and concepts that we want to put into practice and incorporate in our services.

Oh! Needless to say, our new tee made some buzz within the people who went to the conference. Some asked if we were selling it but we were giving it away to some lucky ones that came to ask.

Cool, huh?

And here are some photos we took while we were there: Interaction South America

Next stop: Campus Party BR @ Sao Paulo =]

Introducing Catholicpedia

The Catholicpedia App makes The Catholic Encyclopedia available on iPhone, iPad and iPod Touch through an easy-to-use interface.

From the Divine Office Catholic Ministry, developers of the About.com “2011 Best iPhone, iPod and iPad Catholic Apps,” this beautifully crafted, simple to use Catholicpedia App is designed to present its users with the full body of Catholic teaching: the Catholic Encyclopedia contains not only precise statements of what the Church has defined, but also an impartial record of different views of acknowledged authority on all disputed questions.

Features highlights

Over 11,000 articles have been categorized by letter and related by tags. The App includes:

• a powerful multi-keyword search engine,
• a tags browser to drill down to specific topics and articles,
• sortable favorites,
• sharing via eMail, Facebook,
• AirPrint support,
• read in portrait or landscape,
• change font size and color scheme

The easy of use and these great features make Catholicpedia the most convenient way to access and carry in your pocket the full 15 Volumes of the Original Catholic Encyclopedia (1917).

The Catholic Encyclopedia

The Catholic Encyclopedia, proposes to give its readers full and authoritative information on the entire cycle of Catholic interests, action and doctrine. What the Church teaches and has taught; what she has done and is still doing for the highest welfare of mankind; her methods, past and present; her struggles, her triumphs, and the achievements of her members, not only for her own immediate benefit, but for the broadening and deepening of all true science, literature and art — all come within the scope of the Catholic Encyclopedia.

The Encyclopedia bears the imprimatur of the Most Reverend Archbishop under whose jurisdiction it is published. In constituting the Editors the ecclesiastical censors, he has given them a singular proof of his confidence and of his desire to facilitate the publication of the work which he has promoted most effectively by his influence and kindly co-operation.

The Encyclopedia was designed to serve the Roman Catholic Church, concentrating on information related to the Church and explaining matters from the Catholic point of view. It records the accomplishments of Catholics and others in nearly all intellectual and professional pursuits, including artists, educators, poets and scientists. While more limited in focus than other general encyclopedias, it was far broader in scope than previous efforts at comprehensive Catholic encyclopedias. It offers in-depth portrayals of historical and philosophical ideas, persons and events, from a Catholic perspective, including issues that divide Catholicism from Protestantism and other faith communities.

Citations: The Catholic Encyclopedia Original Preface (1917) and Wikipedia.

About Divine Office

The Divine Office Catholic Ministry, in partnership with Surgeworks, Inc., is the developer of several apps including Divine Office – Liturgy of the Hours, an iPhone, iPod and iPad app for the universal prayer of the Roman Catholic Church. Divine Office was selected as the recipient of The NY Times Company’s About.com Readers’ Choice Award 2011 for “The Best Catholic Website,” “The Best Catholic iPhone App,” “The Best Catholic iPad App” and “The Best Catholic Podcast.” Visit the Divine Office Website at http://divineoffice.org or view our award-winning apps on your favorite App Store:

   

The responsive web design comes as a solution to better display content across tablets, mobiles phones and laptops of the most varied screen sizes and resolutions. In order to achieve a responsive layout, all we need is: a Flexible grid, Flexible Content (Images and Media) and CSS Media Queries.

The use of these three main elements makes it possible for us to create websites that respond to the device or browser window size, adjusting the content accordingly in order to offer a better reading experience, should you be hunching over an iPhone on a busy train or comfortably sitting in front of a 30″ LCD shopping for dog food.

This is an experiment that combines the Responsive Design Layout practices to the Compass/Sass framework, in an attempt to cut back on the time and effort needed to achieve a Responsive web page.

Live demo Sample code

What is Compass/Sass?

Compass is an open-source CSS Authoring Framework originally created to enable the use of Blueprint framework with Sass. Since then, Compass has become a “Swiss Army Knife” of tools and utilities with a crescent list of plug-ins that makes it possible to combine different frameworks in one project with ease. Most of the famous frameworks, such as: 960gs, Boilerplate, Less Framework are already available for Compass.

Sass is the language in which Compass is built upon – Try not to mix Sass language and SASS syntax. Sass compiles the style-sheets and bring some powerful features for CSS writing, such as mixins, functions, variables, efficient nesting of selectors, properties and much more.

Compass and Sass have co-evolved to become a powerful and versatile platform – many current features of Sass has been driven by Compass.

Sass Syntax

Sass offers two syntaxes for us to use. The SASS Syntax (yes, same name) and the SCSS Syntax.

The SASS syntax is the first one created. It is a white space aware and indented syntax that instead of brackets and semicolons, it uses indentation to specify blocks; and tabulation to specify nesting. It is the syntax used on the sample code provided.

Although SASS was the first syntax offered, it does not mean that it is a deprecated one. Both syntax are current and will be always supported.

The SCSS – or Sassy CSS, is a newly created syntax to be a super-set of CSS3. It means that a valid CSS3 stylesheet is also a valid SCSS. You can even paste your CSS into a SCSS and it will be compiled just fine. There are some differences between the two syntaxes in terms of the use of mixins and includes, but even the busiest developer can start using Compass in their next project with no need to learn another syntax.

I personally think that CSS isn’t a wise syntax and I appreciate typing less, that’s why I use SASS instead of SCSS. However, it is just a matter of which one you want to go with. As Nathan Weizenbaum , Sass Language creator and maintainer posted about: The Indented Sass Syntax is Here to Stay

You can try the SASS syntax online.

Why use Compass?

Compass will massively cut back the amount of code you will need to write, simplify the maths and give you much more control over the grid. Furthermore, you won’t need to clutter your markup with semantic-less rubbish or cripple your project scalability and changeability.

For example, that’s how we would use 960gs without Compass:

<div id=”main” class=”grid_9”>
  <article class=”grid_6 alpha”>
  </article>
  <aside class=”grid_3 omega”>
  </aside>
</div>

Notice all the extra classes you have added to your markup. If you need to change the design later on, you will need to go after these classes and replace them. If you are using a complex PHP framework, it would be a nightmare to hunt them down in different templates, include files etc. Phew…

If you use Compass, you won’t need to add any additional classes to your markup. You will only need to use normal selectors to specify your grid:

#main
  +grid(9)
  +omega
  article
    +grid(6,9)
  aside
    +grid(3,9)
    +omega

That’s how your CSS will be compiled:

#main {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 700px;
  margin-right: 0;
}
#main article {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 620px;
}
#main aside {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 300px;
  margin-right: 0;
}


Should you change your page layout later on, all you will have to do is to adjust the grid mixins on your .sass file and re-compile your CSS. Likewise, if you are looking for achieving a responsive layout, it will enable you to attribute different grid values to the same element using media-queries – that class won’t be on your way! It just makes life so much easier…

Not convinced yet? Compass brings tons of helpers and keeps you from repeating declarations for different browsers, different projects etc. Furthermore, you don’t have to collect and maintain an extensive library of snippets a-n-y-m-o-r-e! Time for the schmaltzy CSS lovers to look for another hobby.

Example:

I write:

div.mybox
  +border-radius(4px)
    a
      +replace-text("btn.jpg",50px,30px)


Compass writes for me:

div.mybox {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
}

div.mybox a {
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-image: url('../images/btn.jpg');
  background-repeat: no-repeat;
  background-position: 50px 30px;
}


I needed to write 4 lines of code and Sass/Compass has written 16 lines of valid CSS code. This is just an example, see what Compass brings on its core.

Advantages

Besides the fact that it is free, the greatest advantage of using Sass/Compass is that it is designer friendly, easy to use, quick to install and very well documented. You don’t have to understand Ruby to make it work. If you know CSS and HTML, you are set and most modern code editors offer support to SASS/SCSS Syntax.

The output is just a neat and clean CSS ready to be deployed. Compass does not require any extra server configuration or client side requirements. Unlike lesscss, although it also enables you to use variables, mixins, operations etc, it relies on an additional JavaScript on the client or server side.

Compass is project aware. Besides the project configuration file that allows you to specify your project directories or use a relative path to the stylesheet, you can use a variable or url function to specify the url to asset hosts should you be serving over a web-server. It keeps your stylesheets safe from environmental differences.

Installation

If you are on a Mac, the installation is pretty straight forward. Open your Terminal and type:

$ sudo gem install compass

Type your password.

Then, to confirm the installation:

$ compass version

It’s been successfully installed if you read:

Compass 0.11.5 (Antares)
Copyright (c) 2008-2011 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

Windows

If you are using windows, you need to install Ruby first, then follow the steps above.

Susy Grid Compass’ Plug-in

For this experiment, I used Susy grid plug-in. It is the first time I am using Susy and it has proven to be the best fit for this project, as we have the option to not use side gutters and we can use percentage for achieving a flexible grid. I am quite convinced that Susy is, so far, the best grid I have worked with.

To install, you need to go on to your Terminal and type:

$ sudo gem install compass-susy-plugin

Remember to take some time to have a look at the Susy documentation, so you can better understand its usage.

Using Compass

Let’s say you are creating a new compass project using Susy. All you have to do is to open your Terminal, go to the directory of your choice and type:

$ compass create project_name -r susy -u susy --syntax sass

Note: if you don’t use –syntax sass, the project will be created using SCSS syntax by default.

If you are more familiar with the SCSS syntax, you can convert the SASS files I have provided using the command line:

$ sass-convert screen.sass screen.scss
$ sass-convert _base.sass _base.scss

To start working, you need to let compass know that you are changing your .sass files. To do that, you have to go to your project directory on Terminal and type:

$ compass watch

From now on, every time you save one of your .sass files, Compass will compile the .css file to the /stylesheets/ folder. All you have to do is to import this file into your HTML file.

While I was writing this article I found out that there’s a GUI for creating projects with Compass. I haven’t tested it yet, but if you find it hard to use the command line you can check it out. It runs on Windows, Linux and Mac.

Project Structure

Compass will create a folder called project_name, containing:

/config.rb
/sass/_base.sass
/sass/screen.sass
/stylesheets/ screen.css

The files with underscore “_” at the beginning are considered partials. The _base.sass, contains all the imports and the grid parameters that are to be imported at the top of screen.sass file. I also like to put the reset, all the varies, font-face and mixins in the _base.sass as well.

The screen.sass will have all our page styles followed by our media queries.

The config.rb will contain your project paths and will also have a few other configuration options that come briefly commented. It is a Ruby file and you can do quite a lot with it if you poke around. For example, when you finish your project you may want to compile your stylesheet in a minified version, then all you have to do is to use the declaration:

output_style = :compressed

If you are going to use relative paths and you are not using a local web-server, you will need to uncomment the line:

relative_assets = true

Remember to comment it out again when you deploy it to production. See more about the config.rb file.

Debugging on Compass

If you are not using the compressed output style, the CSS generated by Compass is organized and commented. If you inspect an element, the comments on the CSS file will refer you to the line of the .sass declaration that targets this element.

Whenever you save the file, if there’s something wrong, compass will tell you which line and which file you messed up.

If you are new to Sass, pay attention to the indentation. If you don’t use the same indentation or forget the correct spacing, it will not work.

Example:

It is fine to write:

#my_box
  float: left

But, it will not work if you forget the space between the attribute and the value:

#my_box
  float:left

I am just saying that because I have lost quite a few minutes cursing at the code as I couldn’t see anything wrong.

Getting into the Responsive Layout

This article exemplifies the combination of Vertical Rhythm and Susy Grid Frameworks to achieve a Responsive Layout using Compass to compile our stylesheets.

1. Defining the flexible grid

First of all, your mockup has to be organized into columns. You may already have your favorite grid. As I am used to the 960gs, I usually start all my designs using the .psd files provided by them – you can add columns manually if you need. The column width will give us the basis to find the relative values that will be used to configure our grid.

Susy allows us to choose the number of columns and gutter size according to necessity. For this layout we are using 20 columns. As our design has two background images that go across the browser window. I am trying something different here, we will not use margin to position the container in the middle of the window or use the grid side gutters. I have used the columns themselves to specify the space allowed between our content and the actual browser window sides, we will have better control of the grid across the devices.

Here’s what I mean by that:

The best thing about using a grid framework, is that we will not have to do these calculations for every element, margin and padding we need. For all the settings of width, we will use the grid.

Please, now open the file _base.sass.

$total-width: 1180px
$total-cols: 20
$col-width-abs: 40px
$col-width: $col-width-abs / $total-width * 100%
$gutter-width-abs: 20px
$gutter-width: $gutter-width-abs / $total-width * 100%
$side-gutter-width: 0


These are our grid constants, since our grid is going to be flexible, the width values are going to be in percentage, for doing that, all we have to do is to divide the column width by its context.

As our mockup is 1180px wide, we have 20 columns and each column is 40px wide, we use the following formula to calculate the grid percentages on-the-fly.

Finding the column width in percentage:

$col-width-abs: 40px
$col-width-abs / $total-width * 100%

To find the gutter in percentage we use the same logic:

$gutter-width-abs: 20px
$gutter-width: $gutter-width-abs / $total-width * 100%

Having done that, we now have our flexible grid. Thanks Tobias for the contribution.

Flexible Images

The textual content will flow naturally as we expand and contract our grid, but the images are still in need of a bit of CSS to assume a fluid quality. It is very simple, we can sort this out with one general declaration:

img
  max-width: 100%

This way, the maximum width the image will assume is its container width. We can also apply max-width to embedded videos and so on, so let’s make it more interesting:

img, embed, object, video
  max-width: 100%

If you still care about IE6, you better know that it does not support max-width. So, we need to use another declaration to go around it.

For this project, we are using a conditional <html> tag that gives us the means to fix some compatibility issues for IE. So, we will use the declaration:

.ie6
  img, embed, object, video
    width: 100%

It will make all the images take the whole width of its container, which may work just fine in most cases. For small images and thumbnails, you may need to use more specific declarations.

2. Implementing the Vertical Rhythm

Some might find it better to work the typography size also using percentage whereas, I prefer to have more control over the typography without having to worry about nested elements, relative values etc. For this reason, I decided to use the Vertical Rhythm, another framework that comes integrated with Compass.

It works like a vertical grid that makes it much easier to attribute vertical margin and padding to our page elements. It means that you can also design and distribute your typography and container heights following a vertical grid, or rhythm.

I like to configure my Photoshop grid as you can see below. Then, I can toggle the grid using the shortcut cmd + ” ‘ “.

On _base.sass, we define the constants of our vertical rhythm:

$base-font-size: 14px
$base-line-height: 17px

It means that a due text line, if we don’t specify otherwise, will assume the font-size of 14px and the line-height of 17px as default values.

Then, for all font size declarations we will use the mixin +adjust-font-size-to(font-size in pixels). Compass will then, convert the font sizes from px to em and fit it into the vertical rhythm automatically. Likewise, If you need to adjust the line-height, you will use +adjust-leading-to(number of lines).

Quick Reference

+padding-leader(1) – Adds 17px padding to the top of a due element.
+padding-trailer(1) – Adds 17px padding to the bottom of a due element.

+margin-leader(1) – Adds 17px margin to the top of a due element.
+margin-trailer(1) – Adds 17px margin to the bottom of a due element.

+adjust-font-size-to(32px) – Changes the font-size to 32px
+adjust-leading-to(2) – Changes the line-height to 34px

Note: The line height is relative to the constant $base-line-height: 17px – in our case the constant is 17px. The number you specify for the leader, trailer and leading will be multiplied by the constant, then converted to its relative value in ems. Don’t worry about nested elements etc, Compass will do the maths for you.

Find out more about the vertical rhythm usage.

Fix all the Weirdness

Right, we have created our flexible grid, made our images flexible and setup our vertical rhythm. But if you scale the screen you will face some weird columns, and line breaks that make no sense at all.

Our last step is to fix it all using Media Queries.

Media Queries

Media queries are expressions that allow us to target a group of CSS declarations to some specific device capabilities. If the device does not match to the query, the declarations are ignored. For example:

@media screen and (max-width: 480px) { ... }

In this case, the device has a screen 480px wide or less, the styles of this query are applied. If not, they are ignored.

You can also use the media-queries in sequence:

@media screen and (device-width: 768px) and (orientation: portrait) { ... }

See some more examples of media queries and read more about the W3C specifications.

Now, let’s take a look at the Media Queries used for this experiment:

@media screen and (max-width: 480px)

On this query we are basically re-arranging the main and secondary content area grid to assume one column layout and two columns layout for the footer.

In devices with smaller screens, you may also want to adjust the typography. The vertical rhythm makes it simple. You can just override the Vertical Rhythm values at the beginning of each query. For this query:

$base-line-height: 16px
  +establish-baseline(12px)

Which sets the vertical rhythm from 17px to 16px for all devices with screens less than 480px wide. After this declaration, all typography, margin and padding will be automatically adjusted to the new rhythm, and the font baseline will be 12px by default. Just remember to use the Vertical Rhythm mixins to adjust the font size, leading, margin/padding leading and trailer, as I explained above.

Some may prefer to use percentage and assign relative values to the whole typography. I personally think that it can be a bit confusing, specially if you are collaborating on a project that may suffer revisions and you probably don’t want to spend too much time with maths.

The same happens for the grid values, as we don’t have those nonsense classes littering our markup, you can just attribute new grid values to every element according to necessity.

@media screen and (max-width: 710px)

This is an intermediary query that makes the footer go from two columns, to three columns, before assuming the four columns layout you can check when the browser window is wider than 710px. It also makes the transition from three columns to two, and finally, to one column on the #secondary container above the footer.

@media screen and (max-width: 840px)

The main call for this query is to keep the logo and the navigation from running into each other. When the screen is smaller than 840px wide, the navigation will appear underneath the centralized logo.

@media screen and (max-width: 1024px)

Remember that we are not using side gutters, we were actually using a grid column to build space for the sides. For all screens 1024px wide or smaller are going to assume one column to the sides, while bigger screens are assuming two.

This Media Query also makes the transition from two to three columns of the main content, as well as re-adjust the Vertical Rhythm and font sizes.

@media screen and (min-width: 1500px)

This media query makes the page heading aligned to the center and sets another Vertical Rhythm.

The View-port meta element

The webkit mobile browsers comes with a default feature that scales the web content down to match the device width, even with a flexible grid and media queries in place.

To get around it, we need to add a meta element to the header of the html that will set the zoom of the page to 100% and match the browser size to the device screen size.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

There are a few options that you may consider using for more specific situations.

Conclusion

My main concern in this experiment, was to make the transition between the devices iPhone, iPad and Desktop perform the best way possible, as well as keeping the layout flow as good as I could as you scale your browser window.

By using the max and min-width attribute, you will find a way to sort most of the issues by adding auxiliary queries in between.

Try commenting off the queries you will find in the sample code and see it for yourself. To comment in SASS and SCSS syntax, you need to add “ // ” in front of the lines you want to comment.

Compatibility

Media Queries are supported in most modern desktop browsers, including IE9. However, it does not work up to Internet Explorer 8. Thankfully there are people fixing Microsoft’s fails with a bit of JavaScript and the will to make web-designers happy.

Scott Jehl, developed a small script called Respond, that enables media queries support on Internet Explore 8 and under. Unfortunately, we need to rely on JavaScript for patching other IE versions, there’s no way around it.

Note: I haven’t added media queries fallback on the sample code.

Responsive web-design beyond the technique

This article has a strong focus on the technical part of how to build a responsive page. All I have done was to convert a non-responsive page, into a responsive one in order to achieve a framework that will offset the time needed to achieve a responsive page.

What I have learnt from this experiment, goes beyond the fact that the page adjusts itself to the width of the browser; we need to consider also the context in which the user is in while reading our content, what are the singularities of the devices and make the effort to offer the best experience possible.

Just as an example, I haven’t made many changes to the design at all. If you consider that on the iPhone, our user will need to tap the links with his finger, the footer may need a different solution for keeping the user from tapping in two links at the same time. What I am trying to say is that, if this page had been planned to be responsive from start, it would be designed quite differently in many aspects.

Therefore, the best way to achieve a responsive design is planning and wire-framing the experience for the devices you are targeting and the audience you are communicating with. There are those who believe that for different contexts, we need different markups, different contents. I believe it is a valid approach, the way to go will depend on your objective, the content itself and the audience.

This experiment will bring to you a different surgeworks.com soon enough, stay put with us and don’t forget to leave your comments.

Example of Responsive websites

forefathersgroup.com
hicksdesign.co.uk
simplebits.com
morehazards.com
massimobonini.com
10k.aneventapart.com

Read more about Sass, Compass and Responsive Web Design

Responsive Web Design by Etthan Marcotte
Responsive Web Design – Article by Etthan Marcotte
compass-style.org
sass-lang.com
thesassway.com
susy.oddbird.net
nex-3.com

Brasilia is the capital of Brazil (did you really think it was Rio or Buenos Aires?), and is located right in the middle of the Country.

The city, curiously, was built in only five years (well, good part of it) and its structure has the shape of an airplane. I could cite a lot more curiosities here but, since this post is about me you can read more about Brasilia at Wikipedia.

After almost one year and a half working for Surgeworks remotely from home in a small city called Campo Grande, I finally came to Brasilia to work and live in. Naturally, I miss a lot of my old pace of life: my friends, family, the feeling of knowing where you are going even without a GPS. But I look at these changes as progress.

All this time working remotely for Surgeworks and I hadn’t met some of my team mates in person yet, and when I first saw them it was like if we already knew each other from long time. And they received me really well, and introduced me to their families and friends, now I officially have 6 friends in the whole city (just kidding).

It took me some time to learn how to walk through the city. Different from what I was habituated, most of the streets here don’t have names. We have to locate the places for its “coordinates”, I mean, everything is divided into regions and each square has a number. Well, it’s hard to explain the logic in it, but it’s almost like playing battleship.

Between all the motivations that brought me here, the main aspect that I considered was: Working with the Brazilian crew, because all the Brazilian designers live here.

The team is very talented and I am always learning something new or something amazing. The meetings are faster and more objective. We often go to conferences related to our interests and then try to apply what we’ve learned. The brainstorm meetings are more efficient and we decide things faster than via Skype.

So, I don’t have what to complain about… till now.

Brasilia is a beautiful city. It will take some time for me to see everything good it has.

If you’re interested, you can take a look at some of the photos I took here. Just click the image below.

Hope you like it. Cheers!

It was just very clear to me that WebOS and the TouchPad would have needed 2 or 3 iterations before gaining any traction and especially credibility, considering they had to convince the customers that the platform had a future after the acquisition.

The product needed more differentiating factors and a more aggressive pricing, if they were serious they should have imposed a more competitive price tag and be available to even loose some money to get sales going like Microsoft did with the Xbox. Looks like TechCrunch is kind of on the same wave on this.

After the initial announcement, HP clarified that they will not pull the plug on the whole WebOS team, but “just on the hardware”, at least for now. However, nowadays, people won’t see anything outside iOS, windows or android to have any future… And HP just proved them right.