“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.

This capability exists today to some degree in the form of AirPlay. You can stream video and audio from your iPad, iPhone and Mac to an Apple TV through enabled apps. Video mirroring is instead fully supported via an optional HDMI cable, but iOS 5 and Apple TV make it wireless. It also allows different things to be shown on the iPad and the TV screen, effectively giving you a dual-screen system.

I have already played with the existing AirPlay technology, effectively getting YouTube videos from the iPad to the TV screen wirelessly and while watching commenting the videos on social networks and checking email on the iPad.

I also have used CineXPlayer with the HDMI cable to watch DivX movies on the TV, while the iPad displays the remaining time on its screen.

With iOS 5 Airplay Mirroring, all Apps in the iTunes App Store will work and look great on your TV screen. Developers don’t have to do anything more: it’ll just work — as long as you have an iPad 2. In fact, it looks like this feature will only be available on the latest A5 chip.

Fortunately, it is very likely that the new iPhone and the next iPod Touch will both feature the A5 chip and support this feature.

iOS 5 wireless video mirroring and dual-display support opens up a huge world of opportunities for developers to create much more then media consumption apps.

The example everybody knows about is Real Racing 2 HD, that was reviewed by Engadget back in June.

The game will beam to your TV the in-car view while showing the track overview on your iPad. You use the iPad as a driving wheel to control the car on the screen.

Bottom line, this means once the new iPod Touch supporting AirPlay Mirroring comes out, that you can get an awesome gaming experience starting at 330 USD (99 for an Apple TV and 229 for an iPod Touch), which is about the cost of any gaming console.

But you get much more then that, because the new devices will allow you to do serious stuff on your TV screen, using the iPhone or the iPad as a controller. Think of iLife and iWork apps with a dual-display setup to create and show off your videos, music, presentations, video conferencing, just to name a few obvious things.

The key here is that you won’t get a sub-par experience like you do in today’s living room appliances ranging from gaming consoles like the Wii or the Xbox to the various media centers like Google’s, Microsoft’s or Roku’s: you get an Apple-quality — smooth, clean and pleasing — experience.

Finally, the living room revolution, the one that will bring TV Apps to the masses, is about to start.

Surgeworks is proud to be a sponsor of the Social Commerce Exchange, a free event to learn how to use Social Media effectively to grow your business. Come learn from leading Social Commerce experts about real strategies you can implement within your company.

The Social Commerce Exchange is a unique and collaborative conference format that provides interactive learning sessions with leading experts and networking opportunities with like-minded businesses. Experts from Adobe, BlueGlass, KSL.com and others will lead discussions on:

• Effective Facebook and Twitter Strategies
• Social Content Management
• Social Media Measurement
• Mobile Applications

EVENT DETAILS

• Date: Thursday, September 8, 2011
• Time: 6:00-9:00 pm (Networking begins at 5:30)
• Location: Salt Lake Community College-Miller Campus, 9750 S 300 W Sandy, UT 84070
• Post-conference refreshments provided by Costco

If you are interested in attending the event, you can register (for free) at SocialCommerceExchange.Eventbrite.com

We improved our Bible App on three main fronts: Contents, Navigation and Search features.

The Bible App is so easy to navigate, you don’t need to be a scholar to use it. It’s the Bible reader for the rest of us. The beautiful, elegant user interface allows you to dive into the Sacred Scriptures without all the clutter of Websites.

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 Bible App is the perfect companion for daily inspiration and spiritual nourishment.

Contents improvements

• The Douay-Rheims Bible and the Latin Vulgate now include the full set of 73 books from the Catholic Canon (plus, some apocrypha books are also available).
• The User Interface has been fully localized in English, Italian, German and French.

Navigation improvements

• You can now select a chapter clicking on the current chapter number in the top right of the reading screen
• You can now select a different book clicking on the book title in the reading screen
• You can switch bible from the bible title in the reading screen
• You can now set a default bible which will be pre-selected for searches and be shown as the first bible in your collection
• The commands for each verse are now grouped in a menu that stays out of the way until you need it
• You can now select a single word and look it up in the Dictionary or on Google

Search engine improvements

• You can now search for multiple keywords, separated by spaces or comma (such as Jesus, Mary);
• You can now search for an exact phrase enclosing it in quotes (such as “Let there be light”);
• You can now get an entire chapter using standard notation (such as John 1);

Get Bible App today on the Mac App Store!

We are very proud to announce the winner of the Dribbble Invite Contest.

After analyzing carefully the work of the participants we have finally chosen the one who is being invited today.

We’d like to congratulate Felipe Luize for his creativity and simplicity with the wallpapers shown above. See Felipe’s winner tweet.

If you like it you can download the wallpapers here:

• iPhone version
• iPad version

Ah, don’t forget to follow Felipe and also Surgeworks on Dribbble.

Thanks to all the participants and stay tuned to our next contests.

Getting into the Responsive Grid

On the first part of this post, I have explained a bit about Compass and how to get it running. Now let’s use Compass to build our Responsive Grid.

To better understand what I will be explaining, I recommend you download the sample code and follow it as you read this post.

Live demo   Sample code

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 here – you can add columns manually if you need. The column width will give you 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 _base.sass.

$total-cols: 20
$col-width: 3.3898305084746%
$gutter-width: 1.6949152542373%
$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 column and each column is 40px wide, we use the formula:

40 ÷ 1180 = 0.033898305084746

The number looks pretty ugly, but it will make our grid work properly.

Now we need to transform this number into percentage, which can be done simply by moving the “.” two decimals to the right.

Which gives us 3.3898305084746%

No matter what, hold the urge to round this up to 3.38%, it will not work. You won’t be looking at this number very much after this, don’t worry.

To find the gutter we will do the same thing:

20 ÷ 1180 = 0.016949152542373 = 1.6949152542373%

Having done that, we now have our flexible grid.

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 with. 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.

.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 of cases. For small images and thumbnails, you may target using more specific declarations.

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 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: Npx – 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 here.

Media Queries

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 all the weirdness that is left using media queries.

Media queries are expressions that allow us to target a group of CSS declarations to the devices that match to the query. If the device does not match, the declarations contained in the query will be ignored.

@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 here ) and read more about the w3c specifications here.

Viewport 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, click here for more information.

The Media Queries, the Grid and the Vertical Rhythm

For this experiment, I am using three main media-queries and two auxiliary to better align the image in the #secondary container.

As we go from larger to smaller screens, all I am doing is re-organizing the grid and the vertical rhythm – which will attribute new values to the leading and font-sizes, aiming to create the best reading experience possible.

On the Desktop for instance, we are using two columns as margin for the #page, when the screen size drops to 1024px wide, it switches to one column, that ensures better use of space in the iPad and smaller devices.

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

There’s no set rule of how to organize your media queries, it all depends of the devices you want to target and how you want to organize your code; 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 on the queries and see it for yourself. To comment in sass language, 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 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. I am sure you are using a modern browser.

Responsive web-design beyond the technique

In this experiment, we have a strong focus on the technical part of a responsive design. All I have done was to convert a non-responsive page, into a responsive one.

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 done much 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 content. I believe it is a valid approach, the way to go will depend on your objective, the content 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.

Sources

• Responsive Web Design by Etthan Marcotte
• Responsive Web Design – Article by Etthan Marcotte
• thinkvitamin.com
• compass-style.org
• sass-lang.com
• susy.oddbird.net

Lyssandro Reis – @Lyssandro

I started my career doing Art Direction for print advertising; I learnt how to direct my creative process in many ways and an important factor to be taken into consideration was the media type and size – Magazine, Tabloid, Billboard, all the media sizes were fixed and I knew exactly the canvas size.

After migrating to the online environment a lot has changed but I was still designing for fixed width (800, 960, 1024…); Those days seem to be gone for good.

We can not assume that our audience is reading our content on a desktop anymore. The content is been squished or stretched creating different reading experiences across tablets, mobile phones and laptops of  varied screen sizes and resolutions.

Responsive Design is the answer

Responsive Design has been crafted by Ethan Marcotte, a Designer/Developer form Cambridge, Massachusetts. He is the author of the book Responsive Web-Design that has inspired me to do this experiment.

Responsive design is the combination of:

1. Flexible Grid Layout
2. Flexible Content – Images and Media
3. CSS Media Queries

The use of these three elements together 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 a mobile phone on a busy train or comfortably sitting in front of a 30″ LCD shopping for dog food.

Our Experiment

This experiment’s objective is to build a Responsive Grid using Compass to do build the grid and compile our stylesheet. In doing so, we will split this study in two parts, first I will talk about Compass and in the second part, I will explain how to achieve a responsive page using Compass and Susy Grid.

What is Compass?

Compass is an open-source CSS Framework created by Chris Eppstein that uses Sass to make it possible for us to use nested rules, variables, mixins, includes and much more. Compass brings loads of helpers and utilities that makes writing CSS feels like a holiday, no joke.

Let’s see an example:

You write:

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


Compass writes for you:

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 have just written 4 lines and Sass/Compass have written 16 lines of valid CSS code. Isn’t it amazing?

Installation

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

$ sudo gem install compass

Then, to confirm the installation:

$ compass version

It’s been successfully installed if you read:

Compass 0.11.3 (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


If you are using windows, you need to install Ruby first.

Sass Syntax

For this example, we will be using the indented syntax, simply called Sass. As stated on Sass homepage, “…it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks.” You can try it out online here.

You can also use the SCSS syntax, if you like. I personally find it a bit more complicated, but at the end, both of them are going to be compiled into valid CSS code. It is just a matter of which one you want to go with.

If you are more familiar with the SCSS syntax, you can convert the sass files using the command line.

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


Susy Compass Plugin

We will also need to install the grid we will be using. It is the first time I am using Susy and it has shown 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 project using Susy. All you have to do is to open your terminal 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 find it hard to use, while I was writing this post, I have just found out that there’s a UI for creating projects with compass. Check it out here. I haven’t tested it yet.

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 “_” 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 we 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. 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 here.

Your css will be compiled to the /stylesheets/ folder, all you have to do is to import this file into your html file.

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 re-compile the .css file with the changes you have just made. Easy peasy.

Debugging on Compass

If you are not using the compressed output style, your css 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 a quite a few minutes cursing at the code as I couldn’t see anything wrong.

To be continued…

In the second part of the post, I will elaborate about the flexible grid and post the sample code, so you can have a go and try for yourself.

UPDATED: Second part published. Keep reading it here.

Drop us a comment if you have any problem, we will help as much as we can.

See you soon!

Lyssandro Reis – @Lyssandro

In order to really close an app and remove the “suspended state” it gets into when you click the home button, you need to follow one of the following processes.

Switch off your device… and then back on

The simplest way is to shut down your device and start it up again. In order to really switch off your iPad, iPhone or iPod Touch, you need to push and keep pressed the standby button until the screen goes black and the “swipe to shutdown” bar appears. Then, you need to swipe and wait for the device to completely turn off. To startup the device again, just press the standby button again.

All apps will still be sitting in the multitasking tray as if they were running, but reality is that all processes got killed and no suspended states will be in your way until you start each app once again.

This process is a very good way to make memory intensive apps responsive again (especially games) since it will also clean up the device RAM.

Quit apps from the multitasking tray

• Hit the home button once to get to the main screen.
• Hit the home button twice to show the multitasking tray (on the iPad you can, alternatively, swipe up with 4 fingers)
• Tap and keep your finger on any app icon in the tray until the red badges appear and the icons start “dancing”
• Now tap on the red badge for any of the apps you want to close. Please note: this action will not remove the app from your device. You’re just “killing” it so you can remove the “suspended state” and restart it.
• Tap anywhere outside the tray to close it (or, alternatively, hit the home button once — on the iPad, you can also swipe down with 4 fingers).

Force restart

If your iPad, iPhone or iPod Touch looks “dead”, don’t panic. Just press and keep pressed the standby button AND the home button simultaneously for about 10 seconds (usually 5 seconds are enough). If you’re not in bad luck, your device will restart itself and everything will be back to normal (whew!).

Creating a Facebook fan page can be really easy, but what people don’t know is why to create one.

A fan page is just like a profile page, except that it is more suitable to companies or professional promotion. There you can post all the information about the company, news, photos, answer people’s questions, etc. just like in a common personal profile.

Another peculiarity about the pages behavior is that there’s no limit of followers, while in the personal profile you can have up to 5 thousand friends.

The basic difference is that people don’t add the company as a friend, they “Like” it, which avoids having personal profiles mixed to their friends list. Once they “Like” the page, they start receiving all the updates that are being posted in the fan page.

Here are some examples of cool Facebook pages:

• http://www.facebook.com/cocacola
• http://www.facebook.com/ufcfightnation
• http://www.facebook.com/redbull
• http://www.facebook.com/foofighters?sk=app_209000812460148

So let’s start to create a simple fan page.

Step 01: Go to your Facebook home page and click “Pages” at the sidebar.

Step 02: The screen above shows a list of Pages that you’ve created. So, now click the button “+ Create Page” in this screen.

Step 03: In next screen we must choose the type of page that we want to create. You must choose the option that most applies to your purpose. That will imply that your page will be listed in the user profile page of everyone who “Likes” your page, so it would be really awkward to have a portfolio page listed under “Movies” at the user page, right?

After filling in the form with correct info and accepting the Facebook Pages Terms we are ready to customize the page.

Step 04: Ok, now here comes the part where we customize our page. Facebook was really kind to make things easier to be customized.

First thing here is to upload a cool image that will be displayed when people enter fan page. The standard dimensions for this image are 180 pixels wide and height is free, but if you choose a larger image it will be automatically resized to fit the 180 pixels wide.

The next four steps suggested in this screen are better that we leave to be done later, because our page is not ready yet, so why to spread the world an incomplete page, right?

Step 05: We want to put a custom layout in the middle which shows content that would be hard to do only with Facebook’s help. So now I’ll teach how to put an HTML code with your custom design that will be seen when the user first visits our page.

To make that possible we’ll need to install a Facebook application to our page. Yes, sounds difficult but it is pretty easy.

Just type “Static HTML” in the search field at Facebook’s header. It will show several applications for HTML insertion. Choose the one called “Static HTML: iframe tabs”.

Step 06: Now, at the sidebar click the link “Add to my page” and then click the button “Add to page” that corresponds to the page we are creating. That’s it! Now the application will appear in our page’s sidebar with the name “Welcome”. Enter the page again to edit its content.

Step 07: When you click the link called “Welcome” at the sidebar it will show two boxes for you to insert the HTML code. You can insert any HTML code just like you would do for a common web page, without restriction of compatibility. The first box you put the content for users who are not fans of the page yet. The second one is optional, it will show a different content for users who are already fans of the page.

An important hint here: the layout area is free of height but width is limited to 520 pixels, so be clever and don’t put larger content or it will look ugly.

Now that you’ve pasted the code click the button “Save and view tab…” then follow the instructions that the application shows.

Step 08: Let’s edit one last thing now: The tab name (unless you want to keep it as “Welcome”) and which tab will be first shown when the user visits the page. Click the button “Edit page” at the top right corner of the page.

This area allows you to set up everything regarding to how the page will behave, but what really interests us is the area called “Apps” in the sidebar.

Step 09: Find the app we’ve installed (Static HTML: iframe tabs) and click “Edit Settings”, change the name and save.

Then click “Manage Permissions”, find the property “Default landing tab” and select the tab name you have just set, then click “Save Changes”.

Voilà! It got so beautiful, huh?! Congratulations, you are such a clever person!

Now, publish it and go tell your friends.

BTW, have you seen the Facebook GUI Kit we had created?