Creating an Efektïv dashboard display

Efektïv -- I'm coining this spelling as an homage to Ikea. What I want in a dashboard display is something clean, orderly and useful. To me, the ideal model of a perfect structure like this is any Ikea show suite. Liveable, but not "lived-in" looking. Easy to find any object required, just at a glance. That's what I want to create.


Here's a link to an article I'd like to take to heart:

• How to Design Effective Dashboard Displays

So, that should be easy... what's my restriction? A difficult to use Sharepoint framework, with corporate branding already in place and unchangeable. Let's see what I can do.

Starting with the basics, I need to focus the site. Focus it down to have a point. Right now it's cluttered, but the focus I'm aiming for is to turn this into an easy to use team task list. So, at a glance, anyone on the team can see what tasks are assigned to them, and which ones are up for grabs.

Right now there are about a dozen views to see the data every way from Sunday, but too many views is complicating things. What I need is simplicity! It needs to be Ikea-clean. I may not be able to touch the corporate branding (ie: giant header) but I should be able to do something with the content itself.

So far, this is my bucket of boring. Everything is obscured, nothing stands out, and the left nav is a bunch of clutter. 

Android apps that rock my world

I've had an Android phone now for a couple of years. I'm actually on my second droid. The first was the HTC Dream, which I chose because it was the first Android device offered by Rogers here in Canada. I was sold on the OS, the apps and the open source philosophy... however the phone was definitely a first gen device. The phone was a bit bigger than others (though it held a full slide-out keyboard as well, which is cool) and the processor was kind of slow. 

I moved on to the Sony Ericson Xperia X10 last fall and I haven't looked back. Though it lacks the physical keyboard, the on-screen one is sufficient and I find it makes a lot less embarrassing auto-correct decisions than iPhones seem to do.  The processor is fast and it rocks an 8.1mp camera. I'm loving it. 

In the past couple of years, I've downloaded and tried a lot of apps. So what apps am I smitten with at the moment? Here's my short list:

Gauge Battery Widget

I like what it looks like and I like that it keeps my remaining battery level right there at a glance. I know there are other versions of these battery widgets, but really, I like this one just because it looks cool. It looks like a little tach on the dashboard of my phone. It feels kind of hot-rod.

Advanced Task Killer

This runs on my phone all the time. Although some people complain that it's a battery drain in itself, I haven't found that to be the case. What it does help with is to give you the ability to force-close applications. Sometimes if you've had your phone on for a long time, there can be a long list of apps that aren't closed. The task killer gives an easy checkbox-driven list of apps that you can kill. Sometimes this comes in really handy. 

Handcent SMS

This SMS app is just a nicer interface (in my opinion) than the stock texting software that comes with the phone. It's customizable, globally for all your contacts, or on a per-contact basis. It also has an iPhone-style speech-bubble-look scheme, if you're into that iPhone kind of thing. You can even customize the color of the LED that lights up on your phone when you have an incoming message. I'll admit that I find the sheer amount of options for customizations a little bit confusing and had at one point, accidentally customized one of my contacts so every SMS conversation from her showed on my phone with a garish cheetah print background for a while. It's back to normal now and all is well. 

I think my favourite thing about this app though, is that will display an incoming text on the screen, with the ability to quick-reply right there, even when the screen is locked. That's convenient in that it's one less step between me and my text. To me, that's a leap forward in usability.

QR Droid

Reads QR codes using the phone's camera like other QR code readers but also allows you to create QR codes from your contacts, bookmarks, calendar events, phone numbers, GEO-locations, SMS, or any text you want. From there, you can save the code or if you want to share it immediately, just let your friend scan it off your phone to share the information with them.

Urbanspoon

It seems that the hungrier I get, the less likely I'll be to think of and find a restaurant to eat at. This app does the trick famously! Even at my hungriest, this app makes choosing a restaurant easy! With a slot-machine style interface, this app allows you to lock in any of your food preferences (style, price, location) or none, if you're looking for something completely random, and then spin the wheel to see what comes up. From there, you can check out reviews on its restaurant suggestion and head off for your bite to eat. (...at which point you can use the Google Map app to see where to find the place!)

Flashlight zaphrox

This might be a little bit gimmicky, but it has already come in handy for me on several locations. This flashlight app looks like a mini Maglight. On my Sony Ericson Xperia, pressing the on button on the maglight image not only turns the image of the flashlight "on" but also turns on my camera flash on the back side of my phone. That light is very bright, so it's helpful in the dark when you're just looking for something quickly, or, like me, if you've lost something in the bottom of your purse, it's invaluable!

JAWS! No, not the shark --- the software.

I've been doing a lot of research lately about Accessibility and Universal Design when it comes to websites.We all know how important the web has become to most people. It's where we download forms, buy movie tickets, decline invitations from real-life friends on Facebook, shop Craigslist...

Just imagine how things would be for you if the internet, or so much of it, wasn't available to you because of a disability? The web is still primarily a sighted community, where we navigate by seeing, or at least expect users to navigate by sight. Lately though, I've been learning about alternate ways of browsing the web, like with JAWS.

JAWS is a screen reader that allows visually-impaired users use computers and navigate the web by listening to text being read out through synthesized speech. As someone who is very used to having sight, it's a hard concept to grasp fully. It's amazing, really.

As a web builder, it's always my job to make sure websites that I build will render on different devices, whether it's a new browser on a PC, a mobile device, or what have you. Up until recently though, I'll admit, I had only given passing thoughts to the rendering of content with a screen reader. I think I was intimidated to try it maybe. I knew the concept of screen readers, but now that I've taken the time to see what makes JAWS tick, I'm confident that I can put together a site that is a lot more alternative-device friendly than ever before.

In fact, I'll be speaking on the subject at a tech conference at Royal Roads University later this week. Stay tuned!

Gradients, the easy way!

Yes, I'm still on about the gradients. How I love them so...

Look what I found today!

It's a CSS Gradient Generator. It excites me to have a quick way to test and apply gradients all with CSS! That should be a lightweight and good looking option for some web design projects. That's sometimes a rare combination in the realm of web design.

Enjoy!

The viewport is a lie... show me your gradients!

One of the over-arching concepts taught early-on in art school is that the picture plane is a lie. This is more than fodder to nourish the broody discontent of first-year art students looking for mainstream ideas to doubt. It's also a fundamental concept for understanding why some websites look "flat" and some look positively sumptuous.

The concept that an image on a two-dimensional picture plane is only a representation of a three-dimensional spatial reality is something that we should be conscious of... especially in a culture that revolves so much around pictures of things. Especially again, for us who develop websites.

 

What is it that has me once again pondering the conceptual aspects of modern art? I'll tell you...

 

Gradients!

 

What's the connection here? It has a lot to do with what we see in the real world versus what we see on a computer display. Over the past year or so, I've been in love with subtle gradients on websites. Not rainbow gradients, or those harsh cyan to sand colored stripes people used to try to pass off as "chrome" in the early days of the web. I'm talking about those subtle, rich tones that at first glance look like a solid colour, but upon closer inspection hold an array of shades and tones.

 

Here's a beautiful example from iconsweets.com.

 

That lovely pink background pops so much because it's made up of a rich gradient.

 

What's this got to do with reality, man?

 

Envision yourself holding a poster in your hands. Think about the colors. Then think about the surface of the paper it's printed on. Whether it's printed on glossy paper, matte paper, or something in between, there will be subtle color variations due to the light you're viewing it by and by the reflection of that light off the waves in the paper created by your fingers holding physically holding onto the page.

 

Our eyes don't often see these variations for what they are and instead we see the content on the page, the areas of printed color and, if we're thinking in design terms, whitespace.

 

We can use some of the same principles of print design when creating designs for the web, but one of the things about computers that is a little lack-luster is the feeling of things being "real". The printed page has a certain presence to it, which has to do with how the page itself interacts with it's real-world environment. The look of a page is determined by the light around it, the air or breezes around it, and the way your hand may be holding it.

 

A website, on the other hand, displayed within the confines of a monitor or display device, always seems to lack a little bit of this visual real-world interaction. Colors are typically flat and smooth. That has it's purpose, but doesn't create any three-dimensional depth or presence of "surface".

 

How to see what's really going on

 

Try a desktop color picker tool. I use a free tool called ColorPic, available here.
Open this tool, view the website. Grab color swatches from all over the gradient area and you'll actually see a vast variety of colors that make up that "solid" color.

Resources:

• Mastering Photoshop: Noise, Textures, Gradients and Rounded Rectangles (from Smashing Magazine)
• Download the ColorPic tool

Here are two more reasons why IE is a pain to develop for...

(as if you needed any more reasons to shake your fist it)

IE only allows 31 stylesheets per file:

Thirty-one stylesheets you say? Sounds like a lot, right?

Well, not when you consider systems like Drupal and Moodle where each new piece of functionality comes packaged in a module, each with its own CSS. The more modules, the more stylesheets.

These systems work by expecting you to override these individual modules’ stylesheets if you want to deviate from the existing colors or styles. That's fine, those overrides can be done inside your themes folder, either in an existing stylesheet there, or in one you create just for those overrides. In any case though, it is the stylesheets belonging to the individual modules that are read and processed first, so here’s the best part -- the modules' CSS are loaded first and your own styles are loaded after. So, if you have a lot of modules and if IE is going to cut you off at 31 stylesheets, it’s going to be your overrides that get the axe. Great!

So, you think, “I’ll just combine it all into one file!”

Smart right? You'd think so, but...

That’s when you might encounter issue #2 –

IE only allows 4095 selectors in a CSS file

Another limitation in Internet Explorer browsers is the maximum number of selectors in a single CSS file. That maximum number is 4095. Again, it sounds like a lot, but if you're trying to combine all of your stylesheets (particularly in Drupal or another module-based system) you could hit the wall, and end up in the same position as before.

You can read more and see an example of this problem in action here. Check it out for a good visual demonstration.

IE. Sigh.

What's this blog for?

I build and support websites, mainly using Drupal, which is an uber-customizable open-source CMS. Drupal can have a fairly steep learning curve if you've using it to it's potential, but it can also be a great web development tool.

I also have in interests in general web development and design; design trends; best practices in web development; web accessibility; usability (UX); CSS; JQuery, online learning; Moodle and more...

I'm always excited to learn new things. The result of that is that I make a lot of notes and bookmarks. This blog is a way to share my notes and learning. With the amount of information that I Google through any given week, I figure it's time to contribute some of my learning back to the web.

I'm looking forward to comments as this blog progresses, so post 'em up!