Redesigning the web, one device at a time…

Now that de new iPad has brought to us a new whole concept in resizing for mobile devices it’s not hard to start wondering where will it stop…

I remember when the first 800 by 600 pixels resolution screens appeared. We were all in awe because the web was giving its first steps with images and (gasp!) animated gifs of sorts.

We also started listening of technologies such as Quicktime, Macromedia Director and Shockwave and, last but not least, Macromedia Flash – for those a bit older, remember Macromind? – and the possibilities of the web were just starting to unravel.

Fast forward to 2012. Screen resolutions ascend to 1920 by 1200 pixels (my laptop) or 2560 by 1440 pixels (my desktop display) and we have Full HD TVs with embed web browsers. On the other hand, small devices such as smartphones with screens ranging from 426 x 320 pixels to up the new iPad with 2048 by 1536 pixels (more than half plus any Full HD screen). Not only that screens have different pixel densities (like iPhone 4/4S and iPad’s retina display). They managed to crunch more pixels into the same area.

So, all in all, web designers face a multitude of challenges if they are willing to cope with all these devices in their designs. And just how can they do that? I mean, if I were a web designer (though I work plenty with HTML/CSS, I do not consider myself a web designer), I would freak out just thinking how many stylesheets, media queries, responsive HTML and the works I had to think through in each of my designs! Just think of it. The task would be daunting. Even if using frameworks such as less or sass, grids and all that, I would go nuts. And then it struck me. They don’t freak out because they are not the ones doing most of the work… It’s all up to the developers! Which brings back to a previous text regarding web producers. That not very well defined role of the guy whose job is solely cutting designs and converting them into workable HTML/CSS templates, often with most animations completed (whether its HTML5, JQuery, DHTML, doesn’t matter). Who is he?

In my 16 year web development career, expanding from government agencies to major media corporations, only once I saw a well defined web producing role. A guy that had as it’s only function to take the designer layout, cut it into workable HTML and pass it on to the developer. And my question in this is… has this guy lost his marbles recently? From a simple task of creating HTML layouts for a 1024 by 768 pixels screen resolution, he has now to create, at least 4 different layouts. Is anyone giving that guy a productivity prize?

Anyway, I really wonder were it all goes from here on. A couple years from now, with tablets holding who knows what resolutions and smartphones not far behind but in a much smaller scale, how will the web design and development community react? (including the “invisible” web producer).

I really hope, for the sake of our sanity for tools to be developed to help us in this task. Or, at least, that the resolution “wars” halt somewhere in the near future.

http://developer.android.com/guide/practices/screens_support.html

http://www.apple.com/ipad/specs/

http://www.orphicpixel.com/modern-web-design-tips-2012/

2012 is here. What next for the web?

What will happen to the web in 2012? Since the advent of HTML5 we’ve seen the semantic web growing. So I guess we’ve arrived at web 3.0, right? What’s next, then?

Enter web 4.0… The concept has been around for ages now, much to the liking of web 2.0 and web 3.0 (web 2.0 started being talked about in 1995…) and the basic notion about web 4.0 is that the web as a social movement will reach it critical mass and erupt from that to the event where communities/society will take over the information as a whole. On the other hand, some say web 4.0 is the stage where 3D web will emerge finally as a part of semantic web 3.0. How those two are related, if they are related at all, I really have no clue.

However, I believe web 4.0 to be the one were people do really take charge of all information. We’ve been watching it for a couple of years now, with the conflicts in middle eastern countries, riots, natural disasters being reported live from thousands of cell phones around the world. And we also began taking notice of bad media and disinformation provided by mainstream media exactly because of these thousands of “eyes” capturing the truth.

So, regardless of what technical advances may occur (with CSS3, SVG, HTML5 and other technologies), I believe that web 4.0 will be the one to bring back “power to the people”. Martin Luther King would be proud.

 

Until web 4.0 is upon us, let’s stick to what we’ve got: http://semanticweb.com/

Word of the wise – don’t change lanes if you don’t know how’s traffic…

Today I’m down on my knees. Tired as anyone can be after deciding to change your life. Almost completely.

I decided to leave my daily job as a consultant, analyst and project manager and embrace my own projects – even if I don’t have any secured funding yet – and try to finally make something for myself.

It’s scary I tell you. Once you make a decision like that and you sign the resignation letter there’s no turning back. Specially if you have a family of five that solely depend on you. And, to make matters even more complicated, I have a huge amount of bills piling up. So, there you have it. I’m beat. Badly beat.

But really, why should you care? Well, I might be beaten, soared and completely trashed today, but the hope and adrenalin of building something from scratch and calling it mine pumps me to the max and gives me strength to wake up tomorrow at 7 a.m., get my kids to school and carry on. And my the end of tomorrow I’ll be beaten again, with more soars, physical and emotional but, no matter how destroyed I might be, the next day I’ll be up and about and will do it all over again.

And that’s the real lesson to take from all this. That and… never change lanes if you do not know how’s traffic… What that’s got to do with everything else? A lot! If you ever driven any kind of vehicle in a motorway you know you should never, EVER, switch lanes without checking for incoming traffic. Having said that, how can you know if there’s incoming traffic without sticking you head out even if just for a little while. That’s the moment of truth. That’s when the real danger is present. And that’s how I’m feeling right now. Beaten, tired and like I’m about to get struck by a truck. But, while taking the risk, I get a sense of how’s the market – my traffic – and where must I go from here.

And I know now where I must go. And I’m going. And I’ll get there. Tired, beaten, down on my knees but I’ll get there.

In conclusion, boys and girls, word of the wise – don’t change lanes if you don’t know how’s traffic… but be sure to take a peak before you do!

To create something new… why? [UPDATED]

When it comes down to get creative, often people think of picking up a brush and start doodling away in hope of becoming the next Picasso. Well, first of all, there will only be one Van Gogh, one Picasso, one Basquiat – and thousands more, but each one unique – so you’re best hope is to become the next big you.

But that’s not the real reason for this article. By creativity I was thinking about it in a more global way. For the last couple of years we’ve been looking at a growth of the number of people creating new ways to approach data. New ways to visualize it. We have concepts such as data mining, business intelligence and more for years now. But those are business related and more often than not they come down to show numbers and stats in a grid like approach. The curse of the spreadsheet as I call it. There’s really no sense in keep looking at a bunch of numbers without understanding them – or even make an effort . Most spreadsheets used in most corporations have been neglected because they’re messy, boring to look at. Even the really important stuff. But finally data visualization is changing. And people are starting to look at numbers and figures with a different and surprising way.

I started to realize this by listening to Brian Suda’s talks in SAPO Codebits back in 2009 and 2010. (By the way, Brian Suda has since edited a book “Designing with Data”.) But that was only the beginning of it all. There is a couple of famous TED Talks around this subject. David McCandless: the beauty of data visualization and Hans Rosling stats are the best examples I can remember. Fun, awarness increasing ways to show us what would be nothing but meaningless numbers.

Then again you could just say that they’re not really creating anything but using what’s already there. Well… isn’t that the real meaning of creation? You begin with a thought. That’s exclusive. But you have to put it in practice. And for that you rely on materials, sources, inspiration. All those things were already there also. It is the way you approach your idea and how you materialize it that makes the difference.

Now we have a whole new discipline. A new business really. Infographics (or info-graphics) are exploding everywhere. You’ve seen then in magazines, TV channels, the web. There are designers and developers specializing themselves on this. There are companies dedicated to infographics. And there are brilliant examples. Some funny, some just genius artworks. But it all comes down to: how to grab what’s already there for the taking and transform it in a way that makes it simple, fun and extraordinary to look at while conveying an idea and putting them in perspective.

So, if you feel the urge to create something new, why not start with the next elections polls? Or your city demographics? There’s a new perspective on creativity, right?

I’ll leave you with a couple of links to websites that have examples on good infographics.

http://sixrevisions.com/graphics-design/40-useful-and-creative-infographics/

http://www.coolinfographics.com/

 

UPDATE: Thank you to Pedro Moura Pinheiro for reviewing the text and point out some English “faux pas”.

David McCandless: The beauty of data visualizationD

Daniel M. Russel and Brian Suda

In my time as an editorial board member in portuguese B!T Magazine I have written several articles, produced a bunch of tests to miscellaneous equipment and had the privilege to talk to some of the great minds of our time. Geeky stuff mostly but still, wonderful geeky stuff. From all the people I have met I need to highlight two in particular.

Firstly, Mr. Daniel M. Russel, head researcher at Google, which granted me a phone interview that was the base of B!T’s 148 cover theme. To him personally and all the people who made that phonecall possible, thank you very much. It is wonderful to learn how Google’s “brains” work to make our lives easier.

And last but not least, Mr. Brian Suda, who I have met briefly in 2009 during Sapo Codebits and left me in awe with the “Hello world” Ancient Egypt style t-shirt (should be read “Hello to all the land”) – I am a huge fan of Ancient Egypt history. That, allied with the fact that I am also defender/fan of usability/user experience/user interface related subjects and Mr. Suda is one of the people behind Microformats – semantics rule! – lead me to contact him during Codebits 2010.

I started to take a photo of his “Hello to all the land” t-shirt and went on to exchange emails. After a while, Mr. Suda kindly agreed do write an article to be included on the first issue of 2011, related to our technological past, present and future. We had a little misunderstanding regarding character count – I asked for about 2000/3000 characters and Mr. Suda wrote 2000+ words (a bit more and we could have published a book) and so I’ve managed to translate the text to portuguese and have it published spanned across three issues. I have to say that, even if at times I had a bit of trouble translating parts of the text to avoid misinterpretations, I also had a blast reading every word.

Recently I found out that Mr. Suda has already publish the original text in his own blog. Therefore, here is the link. Hope you enjoy reading it as much as I have.

HTML Entities – the next level

Ever since I started creating webpages I came across several issues regarding Portuguese special characters. For those who are unaware, Portuguese uses lots of á à é í ó õ ã â ê and so on.

Initially the only way of solving this problem was with a bit of prayer and the correct character encoding. However, when MySQL – or any other DBs – came into the picture, things went very wrong very fast. Now, besides character encoding on the HTML document, and hoping everything would work out server side, you also had to check DB encoding, table encoding and text field encoding…

Then Dreamweaver came along and brought something I had already knew but never used because it was a pain to always be looking for the code to all those characters within words in lots of sentences and even bigger texts. And Dreamweaver made it possible for us to write as we want and it automatically converts all those pesky characters to something like Á (which equals Á) just as long you had your HTML page set to ISO-8859-1 character encoding.

As time went by the use of UTF-8 as character encoding became almost a must have in web development (something for another article) and Dreamweaver, although a very good overall tool – not always beloved by developers – led to most of us to “learn” to write with special characters in mind. Nowadays I am so used to write directly with HTML Entities in mind that I rarely use any kind of tool other that a simple text editor (I use TextMate or NetBeans most of the time).

But, as with everything, there’s always something to learn. And that’s part of the fun. Which brings us to the subject itself. We all are used to HTML Entities – some more that others – and several languages already have functions that help convert these special characters to HTML Entities, but nevertheless there are always some characters we do not use very often and require for a quick peak in order to include them in our code.

So, with that in mind, I gathered a bunch of them in one place. Here. Enjoy!

Dashes & Bullets

– dash | –

— another dash | —

⋅ small dot | ⋅

• dot | •

◊ lozenge | ◊

Quotation marks

‘ quotes ’ | ’ / ‘

“ double quotes ” | ” / “

❛ fat quotes ❞ | ❛ / ❞

trademark & copyright

Trademark ™ | ™

© Copyright | ©

Registered ® | ®

Currency

¢ Cents | ¢

£ Pound | £

¥ Yen | ¥

€ Euro | €

Arrows & directions

→ next | →

← previous | ←

» right arrows | »

« left arrows | «

› right arrow | ’

‹ left arrow | ‘

↑ top | ↑

⇐ previous | ⇐ (note that the “A” should be capitalized)

⇒ next | ⇒ (note that the “A” should be capitalized)

Return ↵ | ↵

Left ↔ Right | ↔

☞ forward | ☞

☜ back | ☜

Other

☎ Phone | ☎

✉ Email | ✉

✍ Sign here | ✍

✎ Edit | ✎

✓ Done | ✓

☑ Check | ☑

☒ Uncheck | ☒

✗ Delete | ✗

⊕ Add | ⊕

⊗ Remove | ⊗

† Cross | †

♫ Music | ♫

✄ Cut | ✄

✁ Coupon code | ✁

∞ Link | ∞

♨ Hot items | ♨

☢ Lab | ☢

✈ Flight | ✈

℗ parking | ℗

☠ Danger! | ☠

☣ Chemical | ☣

☯ Tai Chi | ☯

☮ Peace | ☮

♂ Male | ♂

☰ Row | ☰

♥ Favorites | ♥

★ Popular | ★

☆ Star | ☆

☺ Smile | ☹ UnSmile

Temperature

☂ Tempreature: 29° | ☂ / °

26 ℃ / 60 ℉ / ☃ | ℃ / ℉ / &#9731

Cards

♤ Spade | ♧ Club | ♡ Heart | ♢ Diamond

Poker: ♠ | ♣ | ♥ | ♦

♔ Crown | ♕ Queen | ♖ Rook Rank | ♘ Anothe Crown | ✠ Cross

Mathematical Symbols

1¼ ÷ 5¾ × 2 ≤ 5 = ¿    ->    1¼ ÷ 5¾ × 2 ≤ 5 = ¿

 

This article was inspired in an article in CSS Orbit.

Web Engagement Strategy: Best Practices in Web Projects: A Panel Approach (CMS WIRE)

Working as a member of various Web teams for more than a decade now has taught me that the most effective approach is to work with other Web experts who sub-specialize in content strategy, visual design, information architecture and usability.

Multidisciplinary teams seem to be the solution to large and even mid-size Web projects. I was curious to hear how other experts manage the challenges of Web projects. I asked some colleagues who I think are exceptional for their outstanding talent and commitment to the digital strategy field. Their answers fascinated me, and I hope you will find them useful and practical.

The goal of this multi-part series is to produce some best practices around Web projects, specifically starting well, setting goals and deliverables, managing unforeseen roadblocks and ending projects so that both parties feel satisfied.

My panel includes:

  • Alice Coleman, Information Architect
  • Daniel Eizans, Content Strategist (@danieleizans)
  • Michael Hogenmiller, Visual Designer (@mhogenmiller)
  • Chris Moritz, Information Architect (@chrismoritz)
  • Jeffrey Rum, Visual Designer (@jsrum)
  • Randall Snare, Content Strategist (@randallsnare)

You’ll find my takeaways at the bottom of the panelists’ answers. Thank you to my talented and fantastic panelists.

Question One

I asked the panelists what two to three pieces of information they needed to know before they begin a Web project.

Randall Snare, Content Strategist

Randall starts every project with these questions: Who are you and how is information managed internally?

I begin with, “Who are you?” It’s my first and most important question. I hope to inject some nuance, but often I am blunt.

The reason that knowing all about your clients (their roles, their processes, their frustrations, their names) is that it puts your analysis into an essential context.

Here’s an example:
Say you’re doing some content/usability analysis of a site that sells lots of stuff. And, you notice that there’s a page of pricing information that lives separate from product information. All of us would go,”Hey that’s not smart! You need to integrate a price with a product, because users need to know about price, it’s a key task,” etc etc.

But, the reason the pricing and product info is separate could be because of their CMS. They may have too many products, and a fluctuating market means their prices change weekly, and it’s too hard to find it in their system, so they make updates in one place (as opposed to 1,000 updates a week). Or, maybe it’s because their teams don’t talk to each other. And, there’s one Pricing Chief Executive guy who’s in charge of that, and the Marketing Brand Senior Managers only care about product information and couldn’t be bothered with prices.

So, my content analysis is moot if I don’t understand why it’s happening. Many bad things you see on websites are residue from internal systems, from human beings. So if I don’t know the humans, I don’t know the context, and I make content/design recommendations that cannot be implemented.

(…)

Posted by Ahava Leibtag (@ahaval)  | Apr 11, 2011

If you wish to continue this article, please refer to the original website here.

New projects

I’ve been working on several simultaneous projects and also writing the continuation of the “Bringing your ideas to the web” article series. Nevertheless I own you an excuse for taking too long.

However I have to let all of you know what’s been going on. So, I’ll keep posting also updates on all projects.

Currently I’m working on a couple of projects as a consultant and developer. I’ll post some screenshots and links as I take them forward. Here’s the first: http://www.iexplica.com.

Get back soon!

 

UPDATE

Due to several issues regarding my professional and personal life I have not been able to post regularly. Hopefully that will be fixed soon. Stay tuned!

Writing vertical text (PHP or CSS)

Ever had the need to write vertical text? No? Someday, perhaps, you will. I had that need not long ago and as usual I did what everyone else does. Googled it. And so I found a couple of solutions. And now I’m putting it all together for your entertainment. Of course I will mention my sources at the end of this article. If I should find more solutions I will edit and update this article.

Here we go.

With PHP (option 1):

<?php

function verticaltext($string)
{
       $tlen = strlen($string);
       for($i=0;$i<$tlen;$i++)
       {
            $vtext .= substr($string,$i,1)."<br />";  
       }
       return $vtext;
}
//USAGE
echo verticaltext("My text will be vertical");

?>

With PHP (option 2 – using GDlib):

<?php



header ("Content-type: image/png"); 

// imagecreate (x width, y width)
$img_handle = @imagecreatetruecolor (15, 220) or die ("Cannot Create image"); 

// ImageColorAllocate (image, red, green, blue)
$back_color = ImageColorAllocate ($img_handle, 0, 0, 0);
$txt_color = ImageColorAllocate ($img_handle, 255, 255, 255);
ImageStringUp ($img_handle, 2, 1, 215, $_GET['text'], $txt_color);
ImagePng ($img_handle);
ImageDestroy($img_handle);

?>

With CSS:

<style>

/*Safari*/
-webkit-transform: rotate(-90deg);

/*Firefox*/
-moz-transform: rotate(-90deg);

/*Opera*/
-o-transform: rotate(-90deg);

/*IE*/
writing-mode: tb-rl;
filter: flipV flipH;

</style>

Source: StackOverFlow – http://stackoverflow.com/questions/771378/php-how-to-display-vertical-text-90-degree-rotated-in-all-browsers