Good design is good business

Most of the business in the world do not really understand how to make good business online. The reason is pretty simple, they do not understand the triangle that connects the internet to the people via the wonder of technology, because this understanding is not in the hand of any one single person. It requires years to acquire the ability to reach a vision of the online business, or a lot of talented people at your disposal.

The most common way to reach the understanding is normally achieved using a shared pool of knowledge taken from different people expertise. Put them together via a delicate balance or pros and cons, ready to deliver to you the best service ever. 

The internet at the end is the mother of all the media: it contains principles of Press, the directness of the Telephone, and the visual impact of the Tv/Cinema as media; and nowadays we have Virtual Reality to add to the mix.

As you can now glimpse to understand the internet is a pretty big thing. How do we simplify this complex monster of medias, to a more reasonable way to communicate? Simply acknowledging his most important power and at the same time, his weakness:

Anyone can publish anything on the web.

The strength of be able to communicate with the world is incredible, you just need a little bit of time, and you are just a click away from anyone else, even competing directly with the biggest industries online like Amazon, or the famous newspapers in the world like the New York Time. You can publish anything and say your piece.

At the same time, being able to publish, does not mean that what you are communicating is visually good, what you are saying make any sense or being remotely interesting, or that you are able to understand the complexity of technology to be able to upload a feature that you want because there is a lot of programming behind the curtains. This point is crucial to understand the problem itself.

Anyone can publish, but not everyone is able to communicate efficiently.

It is easy to fall in the trap of taking bad decision to communicate on the web based more on subjective feelings, or buy cheap and fast solution available rather than take objective decision based on data analysis, proper development methodology or getting to study from other useful case studies examples of successful website business. My opinion is that technology need to be invisible, or so subtle but at the same time easy to understand without a need to use a manual. Any web need to be self explanatory on how to use it, and what can you do with it by simply reading his content. The only way to be sure about it, is data.

Take decision based on data, not on personal preference.

Every single thing on the web is traceable, every click, every second spent on the page, every decision made, for this reason it is easier to improve a website if we tweak it constantly with various improvement to help the users to see better or understand better on how to use our services. I keep noticing years after years how much being essential, clear and simple helps the business in more revenue, because users understand better what you are offering. Speaking via the web with a clear tone, more than a convoluted jargon to impress, is really the way to make successful business. Even so, analysing data has his limits, sometimes you need to go further than just analysis of clicks and navigation. You need to reach that vision of what user needs by making a proper research. Why people choose a brand respect to another? is it price convenience? or product quality? is it status quo of associating with the branding? or is just the fast shipment?

To entangle every single need, you need a lot of trial and error via a/b testing, but most importantly, you need to get to know for real the need of your audience and listen to it, to get the best “take away”.

Do regular test with real people to get great insights.

Unfortunately in my 20 years, I can count on the finger of one hand, the times that a business owner wanted by their own initiative to make usability test or even basic user testing to make their website easier to use, because they do not really care. Clearly this lack of caring is more related to the lack of comprehension on the basic problems of miscommunication. People have different way to approach and interact with technology, because of different needs, because of age, because of previous experiences or because of social interpretation of simple things like colours.

Without a simple user test, it will be difficult to surpass your most common hurdle of your own website. Because just being online, it is not enough anymore. You need to change your prospective and see your customers point of view, and anticipate their needs when possible by proposing ready solutions (like the one click buy Amazon). People do not want to think, they just want to get what they want and go with their lives.

This problem of educating yours business owner in being more user focused before being business focused, it is part of the job, and it is difficult one as much as understanding the user need. 

Last but not least it is the great chimera that is understanding technology, and it can be divided in two main subjects, design & speed:

Build designs that can adapt like water.

The pixel perfect doctrine, it is one of the biggest misconception that project manager or recruiters that do not understand the web talks constantly about. The device that we are using every day to access the web, have different size, different code, different input tools, different brightness and different pixel resolution. It is impossible or just very waste of manpower resource trying to make all the website pixel perfect identical. Technology keep evolving, code keep evolving and standard as well keep changing. 

We need to build things that can adapt to all this new tech that is coming out, so we need to think about not only flexibility of mobile/desktop design, but as well of retro and future compatibility of what we build. A text can be seen on different size on one device or another, the important is not the size, it is the coherence of the design itself across the various pages, that need to be kept constant. If a symbol is shown as circle somewhere, and somewhere else is instead a square, does not really matter, what matters more is, if the functionality or visual purpose for which was created changed, like for example attract attention.

Design need to be thought as an ever changing content, where languages can be easily swapped for another, and titles of articles can be easily swapped for other lengthy one. It is common sense obviously to set an agreed standard across the various layout, so I always suggest to think in terms of Atomic design. Build everything atom by atom, and component by component until you reach to design whole pages based on a specific layout strategy coherent with everything else.

Write as little code as possible, reuse as much as possible.

Speed is the new key for a website success, with mobiles that act as less efficient mini computers, and connection on the go, speed is the constant for frustration for the user in trying to achieve anything. No one will wait for 20 minutes to access your website, everything need to be optimised for to be fast and ready to download. Everything compressed, and everything need to be request at the right time so that the browser can load the most important element first to show content above the fold first, and than the rest just to reduce time to access the content for the users.

The curve of abandonment of website is directly correlated with his speed of load his actual content. This information is proved and proved again. An easy way to optimised, it is to think on reusing as much content like icons, fonts and graphics multiple time in a creative way. As well you can decide to lazy load content, because most of the time not everything needed to be seen at the first view of the web page.

The most important tip about speed, keep a tracking budget of your performance in KB and load time, of your most important pages. Keep tracking because you want always to keep that value as low as possible with every subsequent development or feature addition. Make it an important point and culture in your tech team, and if you are able to push it further, make it as a main marketing point, be the fastest business in respect to your competitors.

Flying out to Dconstruct 2011 in Brighton

Dconstruct logoAfter a great event like Ampersandconf organised by Clearleft I have decided with no hesitation, to go to the next event that they were organising, Dconstruct to sharp my professional skills in a different way than just reading books and experimenting, by interacting with humans and not with computers.

I am flying from Barcelona, and this time I am not the only one to be there, but other friends of the Barcelona community are going (in reality, they are already there for the workshops: ).

What I love about it, is that I know more or less what to expect, and my enthusiasm it is not diminished but increased proportionally!!! The line up, it is great, I really want to meet Frank Chimero and Kelly Goto [My second book of web design, and one of the most useful]. And with my surprise being recently focused on Mobile Web, I discovered the really good slideshows of Bryan Rieger and he will be there giving a talk. Am I blessed from some mystical goddess of web design or is it just a dream? 😀

I am excited even because the people that are going over there to assist are small gems of people that are passionate about Web Design, and that dedicate all their days working hard to find good way to communicate. And I am so happy that a part from all these unknown people I alrady know some that came at Ampersandconf various months ago like and What I want more than this

I expect a great good time, being busy talking, exchanging business cards, and yes free beer! But I really do not care about it, because it will be the synergy of people that will be there that will make this event, worth it.

So I want to say thx to Clearleft for keeping the budget affortable, so people like me can come and have a day of learning, and exchanging. A day of growing in our indsutry (and in our souls).

Twenty Thousand Leagues Under the CSS

A cartoon drawings: An old submarine and some people fighting underwater against a giant squid

OK, there were only a bit more than 2000 lines of CSS in the basic style of Twelve Eleven theme of WordPress, and today I revised half of it, shrinking the code as much as possible. I do not know (yet) how to minify programmatically a file CSS, so I am checking line after line everything.
Diving in the code helped me in finding interesting piece of web design code, that I was unaware of like the measurement ex that value the x-height of a font, the text-overflow:ellipsis and a wonderful piece of animation that it is the input search of this theme.

I am still quite unhappy about the redundancy of the code (too many nested tags dependency), the reset of Eric Mayer (which I do not find positive at all) or finding pieces of empty CSS classes and that we load all the CSS in one big files while I know that is possible to load various CSS in one only HTTP request. So a little by little I am cleaning up, and trying to remove all the silly nesting (a “return” and a “tab indentation” occupy 2 bites). I already reduced the code to 1500 lines. And even some silly part of html too I commented through PHP.

Anyway, what I am most proud of, it is not the cleaning of the code, but the implementation of WebKit and have the possibility to insert my logo using proper typography. For the moment I am working with 3 fonts mainly: Adobe Pro Garamond, Helvetica Neue and obviously Ltc Bodoni 175. It is a pleasure to work finally on the web with typography, I am about to cry by the sheer joy of it.

It is a pity that I do not have enough time to fix more my blog web page and I am obliged to go to bed because it is 2 AM in the morning. Anyway I changed a bit the style and the blog start to have the shape that I want. Still many details to take care, but at least I am reaching there.

Of my objective list I can move forward of a 20% the first objective (a lot of work need to be done there)

  • Get the most similar WordPress theme to my objective: Write HTML5 & Responsive Design (Twenty Eleven by WordPress), than strip the whole CSS, loading only the essential. Rewrite CSS and HTML on the style that I need to communicate. [30% done]

But I have to go backward on this, because the plug-in of Facebook that I found it is not working like I was thinking, so I have to take a look about plug-ins. I can share on Facebook, but I want to post automagically my post from here to there.

  • Implement social sharing to improve visibility (Twitter, Google PlusOne and Facebook). [90% done]

OK time to a proper rest 😀

Previous post related

Life is simple, strikes back.

Finally after many years, I decided to refresh my website, and give it a proper voice. Naturally the only things that I could choose were the best services availables on the web to make it happen: MediaTemple Hosting service, WordPress blogging capability, latest web standards in comunication and my personal imagination and vision on how the web should be used to talk.

The task at hand it is not a simple one, and I will break down in simple steps, to help me (and everyone else) in the future to follow the same approach in my everyday routine of web design.

  1. Get the most similar wordpress theme to my objective: Write HTML5 & Responsive Design (Twenty Eleven by WordPress), than strip the whole CSS, loading only the essential. Rewrite CSS and HTML on the style that I need to communicate. [10% done]
  2. Look at the content already available on the web that I am writing or considering relevant and connecting it to my communication platform (Twitter, Flickr, Delicious, Google Reader). [75% done]
  3. Implement social sharing to improve visibility (Twitter, Google PlusOne and Facebook). [100% done]
  4. Implement Google Analytics and Sitemap Xml. [100% done]
  5. Create a Taxonomy hierarchy of Categories and Tags to help me to keep a proper organization of content, helping the users in finding what they need. [100% done]
  6. Write every single time that I want to communicate something across, about design and comunication a blog post and do not wait for it. [ongoing]
  7. Choose a proper selections of fonts for each article like if was a magazine. An example: Dustin Curtis, Jason Santa Maria, Trent Walton. [0% done]
  8. Design and Code my new website page. [10% done]
  9. Rewrite Curriculum Vitae in a more designer way. [0% done]
  10. Insert a redirect page from my old hosting to the new one. [0% done]

I’ll keep updated this post, to keep track of my progression, until I’ll reach 100% in everything.

Next post related