Cicada Squares Random Background in Basic CSS

Cicada Squares Random Background in Basic CSS
Cicada Squares Background implemented

I’ve read about The Cicada Principle and Why It Matters to Web Designers since april and was very intrigued that such a simple concept of using prime numbers to avoid patterns happens in the animal kingdom and that the principle can also be applied to Web Design.

Having seen Alex Walker’s Mighty Legion of Lego example, you can imagine the file size optimisation application possibilities.

I’ve finally found sometime to play with this and have applied it to my blog today.

You can get the code from my github repository for the Cicada Squares.

ps: this is my virgin github repository. :)

India 2.0

Spark The Rise - The First Week
Spark The Rise - The First Week

I’ve been to India once in my life so far and it was in Feb 2010 with a few of my colleagues for work. After visiting the country and seeing first hand for myself what Mumbai was about (in my short few days), I felt that there was so much the country had to offer. The land is huge, the people are plenty, resources are abundant and did it ever occurred to you that India is the most populous democracy in our world currently?

To me India is like a battery, stored energy… sooner or later It will become one of the superpowers and i’m sure i’ll get to see it in my lifetime. But now, it still has its challenges, its still considered an emerging economy, a developing country.

Our company recently launched SparkTheRise.com. Its  a platform to drive positive change in India. Its like Kickstarter, but for a country. Imagine the possibilities, imagine what can be achieved. Backed by one of India’s largest conglomerates Mahindra and Mahindra, there is funding on the table for good ideas. And its great to see an influx of interests by the general public.

Within a week, 1960 projects have been submitted to the site and this is only the first week. I really hope this initiative will start the momentum for greater things to happen in India. Its possible, very possible. All it needs is a spark.

Doing the Do

Cube within Cube Sketch by Nick Pan

The Executive

Earlier in my career, I did what it took to get things done. I passionately executed my tasks, fought for my colleagues with conviction, even crossed boundaries of job scope and also sacrificially threw in the neccasary hours in the expense of my own family time. What I did was not classified as work, I think of it as a campaign, a battle at hand, a victory to be claimed, it will take what it takes.

Constantly worrying about missing milestones, worrying about upsetting clients, worrying about not meeting my bosses expectations, but that should never hold anyone back.

Looking back, I thank God for the situations i’ve been placed in, the experiences i’ve gain, the true friends i’ve made and the fun that i’ve had.

If you feel that you are in the trenches, rejoice. If you feel what you are doing is more than what you can handle, hang in there. That’s how being streched feels like, thats how growth feels like, thats how winning a battle feels like. I’m sure VICTORY is in the horizon, as sure as the sun will rise from the east tomorrow.

The Manager

Then I became a manager. No longer do I need to do everything, but I had to make sure my fellow comrades are equipped and are doing what they are supposed to do. I had to make sure as a team we are doing things correctly. If they fail, I fail, if they succeed, we succeed.

The scope is bigger. I used to be responsible for a handful of projects, being a manager means a few handful of projects. The battles are still similar, there are loads to do, hours are still long and problems are becoming more complex.

I thank God for good bosses and great peers that make the tough battles seem less daunting. They highlight to me my blind spots and are mature enough to tell me how I should change the way I do certain things knowing that I will take them in as constructive criticism.

Management

Then I got into senior management and had the opportunity to chart the company’s direction.

Individual projects are now managed by managers and worrying if they did their job was a small issue. The larger task at hand is to see how can they do things even simpler and achieve more. How can they be better equipped. How the down stream and the up stream and its dynamics shape the culture and morale of the organisation.

The scope is as big as I want them to be. I used to be responsible for my job, being in management means being responsible for the jobs of everyone in the organisation. How can they progress, how can they be happy, how can they do better, how can they smile and make the company a place where people don’t drag their feet to work. How can we draw better talents, how can we retain good talents. How can we make everyones job more than a job.

Looking Back

From executive to manager to management is not a long linear process. It does not take 10 years. It does not take 50 projects. It does not take 5 jobs.

All it takes is a mindset.

All it takes is an open, willing, teachable, positive and driven mind.

WebSG Jul 2011

Sean Thambiah at WebSG July 2011
Sean Thambiah at WebSG July 2011

WebSG was great as usual this time round. Sean Thambiah shared on HTML Email Newsletters, while Andy Croll shared on Responsive Web Design.

Web designers and developers have all been moving ahead with cutting edge cool stuff and are constantly being held back by what browsers can and cannot display. Developing work arounds to have that pixel perfect presentation across all devices and browsers is a pain. But emails are even trickier, they are wrapped around yet another layer… the email client and some are within browsers, some are native to devices, some are desktop applications.

Sean brought back the importance of using tables for layouts in emails, strange behaviours across the different email clients and how some of them just want to do what they want to do. Gmail / Hotmail image gap problems, Hotmail changes header colours, Yahoo have its own way of displaying paragraphs. Pretty weird stuff. There was also a few cool examples. Check out his slides on Slideshare.

Andy shared on Responsive Wed Design. We are truly in a “Post PC” era like he mentioned and screen sizes vary from super small mobile devices to large 27″ iMacs. From the few examples he shared, I think winnielim.com was an excellent example. I opened up the site on my iPhone and also on my 27″ iMac and they all look same same but different in a very nice way. You could hardly tell which was the master design and which was the adapted design. Check out his slides on Slideshare.

The best line for the evening had to be:

“Design like it’s 2011, Code like its 1999 “~ Sean Thambiah on HTML Email design

The session ended with discussion on being an entrepreneur vs being an intrapreneur. Lucian who organised WebSG led the discussion and he rightly pointed out that most in the room are passionate in what they do, hence taking out time on a weekday evening to attend this meetup. The entrepreneurs started out on how wonderful it is to have the freedom to do what they want and be able to control their limitless destiny. Of cause there were also talks on the pressure of owning a business.

The employed spoke less, but it was evident in the discussions that being in a larger organisation allowed individuals to be able to work in larger teams, hence take on projects where smaller setups might not be able to.

Being blessed with good bosses, I shared how I’ve benefited from life experiences that my bosses shared with me. Things like taking care of your health, difference between learned skills and sheer acquired experiences which makes you a better manager.

It was overall a good discussion and a good evening which ended at Kopitiam @ Plaza by the Park with cheng teng (local dessert) and industry gossip.

Thanks to Lucian for consistently organising WebSG ever since the first one in 2007. Till the next one.

User Interface Elements

CK Editor
CK Editor

One of the most frustrating things to happen after a web project closes is that the client still does not know how to achieve nicely styled content. Clients are not required to know HTML let alone CSS, so how can they achieve nicely styled content?

I find many times web designers don’t design all possible User Interface elements and because of that, HTML/CSS coders don’t style them and developers don’t have these styling options in the Content Management System delivered. So if they are not even present in the system, how can anyone expect clients to be able to use the Content Management System to style content nicely in the first place.

So have the project been under-delivered? I don’t blame the web designers if its not within the brief. So dear project managers, pls know what the base UI elements are required and include that within the brief.

Have a look at:

So after looking at UI pattern galleries such as Pattern Tap, UI Patterns and others, I wanted to see if there is a complete list of possible UI elements that a web designer need to think about. I think there are just too many, see the consolidated list I’ve put together below.

Display of Content / Data

  • Headings & Subheadings
  • Paragraphs (with and without images)
  • Highlighting Content
  • Lists (ordered & unordered)
  • Search Results
  • Tabular data (with and without sorting)
  • Modal Windows and Boxes
  • Autocmoplete
  • Content Listing Filters

Navigation

  • Main Horizontal Navigation & Vertical dropdowns
  • Sub Vertical Navigation & Horizontal dropdowns
  • Accordion Menu
  • Carousel
  • Listing (text, text with visual, thumbnails)
  • Search Results Listing
  • Archive Listing
  • Calendar
  • Tags & Tag Clouds
  • Sitemaps
  • Pagination
  • Footer
  • Drop downs
  • Breadcrumbs
  • Tabs
  • Links
  • Utiltiy Links (text resize, print, email, etc)
  • Icons
  • Buttons

Getting Input

  • Input Boxes
  • Errors
  • Form & Form Elements
  • Input Prompt
  • Password Strength Meter
  • Feedback
  • Captcha
  • Calendar Picker
  • Wizards & Steps
  • Rate & Vote
  • Inline Help Box and Highlights

Tasks

  • Presenting Instructions
  • Registration, Sign up
  • Payment
  • Confirmations

I know its not a very coherent list, but you get the idea. So dear web project managers, remember to include such UI elements into your brief and also remember to cost your client for these efforts.