Posts Tagged ‘Web Design’

Pop Your Facebook Profile Picture

facebookI came across a cool article the other day which had some examples on how to go a little crazy with your Facebook profile picture, so I can’t take full credit for this. In fact I might not be able to take any credit at all, I just got done reading the article when my good friend (and awesome photographer) Doug was walking by, he had his full set of equipment with him that day and the next thing I knew I was hanging from the drywall down the hall with a flash on either side of me, I’m just glad I opted to wear underwear that day! He did his Photoshop thing and placed the photo over a Facebook profile background template, and added what I can only assume if what he perceives Twitter to think of me, he even added a splat of bird crap to my lid – nice! I uploaded it to my Facebook profile and I think it turned out great. The deal is basically that Facebook allows your profile picture to be up to 200 x 600 pixels and if you overlay it onto the background before uploading then you can make it seemingly interact with or come out of the page.

A few of things to keep in mind:

  1. The position of the photo is dependent on how many lines your status message occupies. The image isn’t pushed down with the rest of the page content, so the more lines your status occupies the more of the upper gray needs to be added to the image. The majority of my status messages seem to take up two lines, so I have my image defaulted to that, and I also have a one line version uploaded to my profile pic album and could switch to that if I really wanted to.
  2. The position of the photo is dependent on the text size of your status message, which is a similar issue to above, but actually a much bigger problem. This is to do with how the browser chooses to render that font, so it is a platform and browser problem. We have already noticed differences from Mac to Windows to Safari – each one was a pixel off even though we used Firefox to test on all three platforms. I currently have mine set to look good in Windows which covers the majority of web users, but of course the people that really care about pixel perfect positioning are all on Macs. We thought about getting creative to try and work around this and have the wall appear to tear, this might work out fairly nicely on a picture like mine where I’m hanging so it makes sense, but wouldn’t work for all cases.
  3. The image doesn’t always appear over the exact background it’s been created to appear over. For example if you look at my public Facebook profile (make sure you are not logged in) it’s pushed way down, or if you look at my profile in the Facebook iPhone app it’s a similar deal. It’s not necessarily bad but something to keep in mind.
  4. If you go with a long profile picture as I have then it will push down the content within the left column.
  5. The thumbnail that accompanies your Facebook feed items is only 50 x 50 pixels so if you have a long picture it won’t all fit. I found that Facebook has quite a nice thumbnail feature that allows you to pick an area of a smaller version of your profile picture so you’ll probably find it works out quite well.

I conclude that it’s all a bit gimmicky now, at least for a personal profile page, it might work well for a fan page that doesn’t have to worry about a status message and the page looks the same whether you are logged in or not. If Facebook were to allow PNGs with transparency to be uploaded then it would solve the issue of not having to worry about where the background meets. But there would still be the issue of positioning, for example in my picture my hands hanging from the exact position of the background seem still wouldn’t be controlled. Facebook would need to allow for liquid positioning of the image – just as the rest of the page moves with the text then so should the image. And I don’t see any reason why they couldn’t allow for us to use a different image for the thumbnail than the one used for the profile picture. None of this is hard to do from a coding perspective, but I imagine Facebook is a lot more concerned with their branding, trying to stay away from the horrors of MySpace. One of the things I’ve always loved about Facebook over MySpace is exactly that – the clean organized look and feel, but c’mon Facebook give us the chance to somehow add just a little personality to our profile page!
facebook

Thursday, October 22nd, 2009

The Definitive Modal Layer

For the last couple of years we’ve been using modal layers where it made sense, basically most places where we would’ve used pop-ups in the old days, i.e. modal layer is to Web 2.0 what the pop-up was previously. But all the while I never felt like I was able able to lock down any solid way of doing this. Every time the issue came up I’d re-visit the functionality, never overjoyed with my latest implementation, so I never came up with a final solution. Depending on the website I was working with and the libraries they were already using I’d sometimes use Prototype or YUI, or if it was a good fit I’d implement a pre-built lightbox gallery, or even just code up something quick and simple from scratch.

And it’s not just me, I’ve noticed throughout the web bad implementations of this technology. I won’t get specific with names but I’ve seen some funky stuff even on well-known popular sites when it comes to the modal layer. Typical issues I’ll see is where the grayed out background doesn’t fill the whole screen, or it fills too much of the screen and triggers scrollbars, or if the page is really long you can still scroll and the modal layer isn’t sticky and you can lose where it’s at.

So the solution sort of hit me when I was having trouble graying out the background – when calculating the width some browsers include the vertical scrollbar in the result where as other browsers don’t, so in some cases it was overflowing and actualy creating a horizontal scrollbar.  This is not surprising as we have made a career out of fighting the various browser discrepancies and it would be normal to have multiple javascript conditions to query the user agent and modify the width accordingly.  But as I started to write those conditionals I watched my nice simple code quickly get complex and it suddenly hit me – why have the horizontal scrollbar at all?  Really it was that simple.  Good UI design dictates that if the modal content is bigger than the screen space available then a modal box is not the right approach, at which point the content does in fact require its own page (or dare I say a popup), or in cases where it is acceptable for the modal content to be bigger than the screen space available then the modal box itself should have the scrollbars.  So why even have it?  There’s no reason, and I would even go as far as saying that if there is no reason for having it then it is better UI design to actually remove it.

Okay so here’s the code, I used jQuery but it would be simple to convert it to any library or even make it stand alone:

//Create Modal Layer
modalLayer = document.createElement("div");
modalLayer.setAttribute("id","modalLayer");
var cssObj = {
	'background' : 'url(img/gray_opacity_80_percent.png)',
	'height' : '100%',
	'width' : '100%',
	'margin' : '0 auto',
	'padding-top' : '25px',
	'text-align' : 'center',
	'position' : 'absolute',
	'top' : '0px',
	'left' : '0px',
	'z-index' : '1000',
	'display' : 'none'
}
$(modalLayer).css(cssObj);
modalLayer.innerHTML="<div id='modalBox'>Modal Content</div>";
$("#page").after(modalLayer); //insert after a valid page object

function showModalLayer(){
	$('body').css('overflow','hidden'); //disable browser scrollbars
	$("#modalLayer").css("top",$('body').scrollTop()); //move modal layer to scroll position
	$("#modalLayer").css("display","block"); //display modal layer
}

function hideModalLayer(){
	$('body').css("overflow","visible"); //enable browser scrollbars
	$("#modalLayer").css("display","none"); //hide modal layer
}

An example of where I’ve used this code is on the CCS donation page, but it’s not that great of an example because the page content isn’t long enough to trigger scrollbars.

Friday, October 16th, 2009

Newspaper Layouts on the Web – CSS3 Columns

I was working on something where I wanted to explore the idea of multi-column layouts, newspaper style if you will. For years people have tried to do this in websites with not much luck – lots of messy JavaScript yielding unpredictable results. But as with most things like this I’ve been trying to do lately I figured there might be a solution in CSS3, and a quick search showed me there was. Just like when I was looking into overriding the default text selection color it took just a few lines of code to see the power of the multi-column layout module.

So to define three columns:

  <style>
    p{
      -moz-column-count: 3;
      -moz-column-gap: 20px;
      -webkit-column-count: 3;
      -webkit-column-gap: 20px;
      column-count: 3;
      column-gap: 20px;
    }
  </style>

Produces:

You will need Firefox or Safari to see the effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit hendrerit eros, ac ultrices libero ullamcorper id. Pellentesque aliquet, felis quis imperdiet tincidunt, nisi lorem commodo felis, non varius tellus turpis eget nisl. Pellentesque est purus, sagittis ultricies dictum vel, volutpat sed urna. In ante dui, ultricies in pharetra non, pulvinar tincidunt felis. Nullam sed nisl ipsum, eget pulvinar leo. Phasellus pulvinar faucibus dui sit amet scelerisque. Pellentesque malesuada pellentesque turpis, a eleifend nulla mattis non. Integer commodo est quis elit mollis accumsan. Sed eu metus sed nulla aliquet facilisis. Mauris viverra sollicitudin rhoncus. Nam luctus dictum nulla. Morbi vel mollis leo. Aliquam erat volutpat. Maecenas ultricies nulla sollicitudin tortor interdum non fermentum purus tincidunt. Vivamus luctus turpis ut diam suscipit eget suscipit neque lobortis. Nam fermentum faucibus augue quis tincidunt. Vestibulum urna ante, adipiscing non dignissim a, dignissim sed augue. Curabitur dignissim viverra magna tincidunt fringilla. Phasellus ultricies pharetra enim quis facilisis. Pellentesque vitae massa sed elit mollis imperdiet.

God knows why but Safari and Mozilla both have their own special prefixes (-webkit- and -mozilla-) and then there’s the standard declaration, so using all three should make all your work forwards compatible.

You can also set the column width and it calculates the number of columns for you:

  <style>
    p{
      -moz-column-width: 150px;
      -moz-column-gap: 20px;
      -webkit-column-width: 150px;
      -webkit-column-gap: 20px;
      column-width: 150px;
      column-gap: 20px;
    }
  </style>

Looks like this:

Again, you will need Firefox or Safari to see the effect

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit hendrerit eros, ac ultrices libero ullamcorper id. Pellentesque aliquet, felis quis imperdiet tincidunt, nisi lorem commodo felis, non varius tellus turpis eget nisl. Pellentesque est purus, sagittis ultricies dictum vel, volutpat sed urna. In ante dui, ultricies in pharetra non, pulvinar tincidunt felis. Nullam sed nisl ipsum, eget pulvinar leo. Phasellus pulvinar faucibus dui sit amet scelerisque. Pellentesque malesuada pellentesque turpis, a eleifend nulla mattis non. Integer commodo est quis elit mollis accumsan. Sed eu metus sed nulla aliquet facilisis. Mauris viverra sollicitudin rhoncus. Nam luctus dictum nulla. Morbi vel mollis leo. Aliquam erat volutpat. Maecenas ultricies nulla sollicitudin tortor interdum non fermentum purus tincidunt. Vivamus luctus turpis ut diam suscipit eget suscipit neque lobortis. Nam fermentum faucibus augue quis tincidunt. Vestibulum urna ante, adipiscing non dignissim a, dignissim sed augue. Curabitur dignissim viverra magna tincidunt fringilla. Phasellus ultricies pharetra enim quis facilisis. Pellentesque vitae massa sed elit mollis imperdiet.

Pretty cool huh? I love the instant gratification this CSS3 stuff gives. To do the same in Javascript would take a ton of thought and work and a bunch of fuckin around, and even then it would probably still need to be fine tuned on a case by case basis. Of course it was quick to pick-up but there is a lot more to it, PPK worked it all out really well a whole 10 months ago now, so if you’re gonna use it then read up on it, and be conscious about the ramifications of what it will look like in a non supported browser.

Also I think it’s worth noting, be careful when using this. Don’t get me wrong I think it’s really cool and will have a lot of use for it, but the web as a platform is way different than a newspaper, don’t make your users scroll up and down a bunch of times to read an article!

Tuesday, September 22nd, 2009

CCS Taubman Center Microsite

We just recently launched a microsite for the College of Creative Studies to introduce their new Taubman Center. Renamed from the old historic Argonaut building and renovated in 2009 this new addition to the college campus not only provides an amazing new facility for the students, but also offers great promise to extend the renaissance that Detroit is currently undergoing.

The site is pretty bare as of now, though the gallery documenting the construction process over the past year is pretty interesting, this is just a phase one and we will be adding videos and other more interesting content over the next several weeks.  For the most part the sites primary function is to raise donations to help fund the reconstruction.
Taubman Modal Layer

For me it’s pretty cool to be involved with this as it is one of the top design schools in the world, and certainly up around the very top of the list nationally. It’s well known in design circles and I am lucky to have some good friends who are talented enough to have graduated from there.

From a technology standpoint it’s been kind of cool, I got to run jQuery alongside MooTools and I also finally figured out the best way to implement a modal overlay (will talk about this in an upcoming post). It’s also cool how the overlay launches automatically if the anchor tag is present in the URL, I can’t remember the last time I did something like that.

Wednesday, September 16th, 2009

Overriding The Default Text Selection Color With CSS3

Finally getting round to testing out some CCS3 techniques I’ve been reading about and drooling over for the past year.  Noticed a site I swung by thats text selection color wasn’t the browser default so I looked it up and found out how to change the background and font colors. It’s nothing new, people have been doing it for a while, just this is the first chance I’ve had to start playing:

::selection {/* Safari */
	background: #FF5200;
	color: #FFFFF3;
	}
::-moz-selection {/* Firefox */
	background: #FF5200;
	color: #FFFFF3;
}

Guess each browser needs it’s own declaration which is kind of annoying, oh well. And I imagine it only works in Safari and Firefox. You can check it working by selecting some text on this page if you are using one of those browsers, otherwise there’s an example below. Don’t mind the colors, I didn’t think much about it, just wanted to make sure it worked.

text-select

As it’s a selector class you can apply different overrides to different elements within the page, so something like the following should work (haven’t tested):

p.sidebar::selection {/* Safari */
	background:#2E2E2E;
	color:#FFFFF3;
	}
p.sidebar::-moz-selection {/* Firefox */
	background:#2E2E2E;
	color:#FFFFF3;
}

Anyways this is just a taste of CSS3, it has some really amazing features and I need to jump in and play around soon!

Wednesday, August 26th, 2009

Blog Relaunch

So I finally managed to find the time to relaunch this blog. When I first started the blog it was somewhat of an experiment so I didn’t spend much effort on its design, but unlike other failed blogs I’d started over the years I’ve really been enjoying writing these posts and I think this time around it’s got some staying power. This relaunch is really intertwined with my online rebrand I’ve been talking about lately, this blog plays a big part in my online image and it was important that I spend the time to focus on fixing its issues.

So the biggest areas I wanted to address were:

Domain Name

My old domain ‘blog.londonstreetlife.com’ had many things wrong with it, but mainly it was just too damn long.  The hows and whys I picked this domain are obviously very closely related to my rebrand so I’ll talk about it in another post, but this new domain is half as long and I’m really liking how it looks in the browser address bar.  In fact it’s so short i can pair it with my own URL shortener (instead of using bit.ly, for example) which will only help improve my online brand in the long run.

Switch from Blogger to Wordpress

For all the work I’ve been doing with Wordpress this past year and my subsequent posts on the subject, I’ve felt for a long time I really should be blogging on that platform.  I have nothing against Blogger or any similar web tool, it’s been great to me and I don’t see the need to host the blog myself as long as it provides me with everything I need and doesn’t limit me in any way.  However I have really been feeling the strain lately with Blogger, too many missing features, SEO failings, and little tweaks I am not able to make.  Now I’m on Wordpress and am my own host and I can really go to town with this thing!  Like a kid in a candy store I’m having a lot of fun practicing what I have been preaching and I even built my own plugin which I will be cleaning up and making publicly available soon.

Design

The new design is the most prevolent update as it really changes the whole feel of the blog.  Whilst the switch from Blogger to Wordpress could be completely transparent to the user, and the domain name change might not even be noticed by a user coming in via a shortened link, there’s definitely no escape from noticing the redesign.  I don’t want to get too into the color scheme I’ve gone with as it’s part of my brand color palette that I’ve been developing over the last month, and again I’ll be talking about that in another post.  It’s not yet the finished product I’m sure, I’ll tweak as I go, but time is short for me these days and I’ve found that eventually there comes a point where I just have to pull the trigger or I’ll never get anything done.  It is worth mentioning that whilst I do prefer dark text on a light background for readability purposes I really wanted to bring forth more of my personality into the design, so my words don’t just represent me, but also just by being here you already know a little bit of who I am.  I’m really happy with the color scheme, it is totally me, and it works really well for my portfolio site (in development) where impression is as important as content, but for here where content is king I might find along the way that the sacrifice in readability is too great for a blog and switch it up and around a bit, make it a little easier on the eyes.  I dunno, what do you think?  It’s really up to you guys!

It’s worth taking a moment to talk about my old design and how in a way it was sort of an anti-design, I’m not referring to the art movement but the fact that it was meant to look like I hadn’t spent a lot of time designing it (cos I hadn’t).  But also when I first started the blog I didn’t know where it was going to go or if it would even last so I really needed it to develop a personality before I could style it.  So for old times sake, one last time and forever remembered here, RIP old blog:

londonstreetlifetheblog

Blog Title

And finally the blog title, I’ve been seeing some of my posts come up in Stumble Upon and they’ve been coming across kind of silly – Blogger published the blog name first and then the post title and I couldn’t figure out a way to reverse this setting, so every post of mine that made it into Stumble Upon just said my crap blog name and didn’t give a clue as to what the article was even about.  That’s when I really started to realize that if I want the web to take my blog seriously then I’d better do it first myself.  Before the the title was just ‘my name the blog’, as in ‘londonstreetlife the blog’, which basically ran along the same idea as my anti-design concept above, and again I didn’t know where it was gonna go or how long it would last so I didn’t spend the time thinking up a cool name, and in the end it never eally had one.  The new name ‘Pixels from the Edge’ I think works really well, it kind of means a lot of things at once and they all apply.  I wanted the name to reflect the creative-technology hybrid thing I got going on and is mainly what I talk about in this blog, and I think it does that very nicely.  My lovely wife helped me come up with the name, so mad props to her!  And the more I think about it the happier I am with it.

So what do you think folks, turned out any good?

Tuesday, August 18th, 2009

De-Branding Myself

So here I am, I’m 32 years old and I’ve been on the web forever, shit before the web even really existed I was gophering German university FTP servers for pictures of Claudia Schiffer. And what do I have to show for myself now, for all my years of online service? Who the hell am I online? londonstreetlife? Really??? Now that I can finally see it for what it is, it really is all kinds of lame. A buddy of mine got an iPhone last year and my phone broke so he lent me his old phone, he was all about keeping that sweet sony walkman phone in good condition incase he ever needed it again, which included leaving it in some orange case to keep it safe, I thought it was ugly but I was like whatever, I needed a phone. Then one day at the bar he sees me with the phone in the case and all he can say is ‘I never realized how much of a fool I looked going around with that phone!’ And that’s just about where I’m at right now, I’ve seen myself in the mirror carrying that lame ass phone in that ugly ass case, except it’s not a phone it’s my online brand, and it’s way lamer than that phone in that case ever was.


Lame-ass phone in ugly-ass case

I am a Techie

In fairness to myself there is a history behind “londonstreetlife”. See originally I was just a kid screwing around online, flaming and win-nuking in the chat rooms, and I fancied myself as a bit of a hacker dabbling in some buffer overloading and shit. And at the time I was just “streetlife”, and as a nick back then it worked, everyone had handles like that. And to be honest I think I could still work with that name if I’d managed to hang onto it, shit streetlife alone would be way dope. But back then it was like $70 to buy a domain name and I didn’t even have money to get myself a snack, and that $70 was a reoccurring annual fee, and besides no one back then was thinking to buy their own friggin TLD. And as the years went by streetlife.com was snapped up, but I didn’t care I just threw a “london” on the front, that was cool I was living in Spain and that was a throwback to the streets where I was from. And it seemed to work and I just went with it, and I didn’t think about it again…

I am a Creative

But over the last year or so I’ve taken a journey to embracing my creative side. Really I always had my foot in the creative door but my mind was firmly stuck in the techie room. It took a lot of self reflection on my part to get here, and it wasn’t easy, but thanks to the respect and support of some great creative leadership at my agency, believing in my creative talents, I’ve finally landed. For a while there I was extremely confused, I didn’t know where I was at. I was promoted to ACTD (Associate Creative Technology Director) at work, and suddenly I felt somewhat ostracized from the Technology department but yet I didn’t feel like I was part of the Creative department either. It didn’t help that I now reported to both departments, and I ended up feeling like I didn’t belong to either, marooned somewhere in between. I saw the movie Tropic Thunder and there’s a line where Robert Downey Jr’s character says “I’m the dude playing the dude disguised as another dude”, and at first I laughed cos it’s funny but then I realized that was sort of how I would describe myself and it was kind of depressing. But I ended up understanding that I am creative, and I am also technology, and the fact that I found myself so lost in identity was more the fault of the agency and the industry. See the future of web development is the merging of both those departments, and the agency has taken a great step towards reaching that goal by creating the first cross-over role, and it is now up to me to prove it works and let the rest of the agency catch up.


A dude playing a dude disguised as another dude

I am a Brand

So now that I finally embraced myself as a creative it was apparent that my brand wasn’t working, or even that I barely had one. See a techie is in the background, it doesn’t matter what your brand is, you don’t really get to have one. When you’re interviewing for a tech job none of it matters, they care about your expertise, coding skills, your work ethic and your ability to hit deadlines. None of that can be captured in a brand or a portfolio, therefore you have to produce code samples and references to look good and get hired. But when you’re a creative it’s entirely the opposite. A creative is in the spotlight, a creative represents the agency and the clients brand, a creative’s name goes on the awards and is talked about in the press releases. So if you aren’t able to brand yourself well then how can an agency trust you with a clients brand? If you don’t even know yourself well enough to define your own creative brief then how can you be be capable of capturing the essence of your clients? And if you don’t have the skill set or the drive to effectively execute and produce results when it comes to your own brand then how can you expect an agency to put their clients image in your hands?


But what brand am I?

So I’ve tasked myself with the challenge, and the project “my brand” is well under way, I’m energized and more excited about this than I have been about any project in a long time. Shit finally I get to find out who I am. Coming soon to a browser near you. Summer 2009. Watch this space!

Tuesday, August 4th, 2009

I Am Creative

I’ve only really come to terms with this fact over the past year. For the longest time I was confused about the issue and during my teen years had built up a stigma around the whole idea of me not being creative. See I went to school with some really awesome creative talent, guys that went on to graduate with honors from schools like the Royal College of Arts, and are now illustrators for respected newspapers and magazines, top architects in their field, and producers of music videos for some of the worlds top recording artists. And back then in high school I just couldn’t compete with that, so I didn’t. And then these guys went to their fancy art schools and I went off to tech college, and when we met back up in the summers they’d become real anal artsy types (not so much my old school boys but the friends they’d made), the kind that know everything about everything and try and belittle those who aren’t as privileged with their education. They’d ask me who my favorite artist was and I’d say “Picasso” and they’d snicker and call him main stream and mouth-off like 100 more artists I’d never heard of. Well guess what douche bags, I’ve now been to art galleries all over the world and I’ve seen the artwork of all your fancy artists first hand, and I still think Picasso fuckin rocks. If I could be there right now I’d tell them something like 83% of this planets population has never even seen a snowflake, and 43% of the world has never tasted butter. I don’t know whether that has any relevancy here but it just seems damn appropriate. In fact I’d just tell them to go with their sheep, even though remembering myself back then I probably threatened to bop them on the nose which I’m sure didn’t help the situation much. Anyways what I’ve eventually come to realize, and it’s taken me a long-ass time, is that Gustav Eifel architect of the Eifel Tower and the Statue of Liberty probably couldn’t paint for shit, and Michaelangelo painted the Sistine Chapel but he probably couldn’t sculpture a damn. Or maybe they could. But my point is that I’ve accepted that while I can’t design I can definitely creatively direct.

I’m a cool CAT
Okay maybe I’m letting it get to my head a little but I’m not letting it make me big headed. Allow me to self indulge for a moment as I step out of the creative closet. I’m Creative And Technology, and whilst I myself have only recently come to terms with this, others have known for much longer. I was hired into the agency as an engineer to bridge the gap between the Technology and Creative departments (that should have been a big clue right there). And when I first got here designers would thank me for making the build-out match the comp exactly, which I always thought was weird, like isn’t that my job? Sure it was my job but no one told the other engineers that. See there was a perception in the Engineering department that an engineers primary job was to build out the functionality, and then secondary was the design, and getting it vaguely similar to the comp was more than acceptable. Shit back then the designers weren’t even allowed to talk directly to the engineers, my managers would be pissed that I’d have designers in my office. It wasn’t part of the process, it wasn’t in the project plan, the process was more important than the product. Well shit I’d say, it’s part of my process and my project plan and I’ll be here till midnight getting it right if I have to, and if the product isn’t the most important thing then what the hell are we all doing here? And if Creative ever came at us with something new, something we’d never done before, well the MO of the Engineering department was to say we didn’t do that and reject it, but I was like hell yes bring it on and I’d figure it out – research it, learn it, create it. And if I ended up realizing it was impossible I wouldn’t go back to them with “No”, see I lived by a mantra I’d picked up at a former employer – “Offer alternatives not obstacles”, and I’d go back to the Creative Director with other options, alternatives I’d come across or dreamed up while researching. And more often than not they’d go with it, and you know what? Sometimes we’d look at it after and think it was better than the original direction. That’s right, ideas I was having were making their way into the design and I didn’t even realize what was happening, see I was like the ugly duckling on the Engineering team, I was a maverick and a trouble maker and I didn’t fit in, but when I went downstairs to the Creative floor I was popular and I thought it was just because they liked me, I didn’t realize it was because they saw me as one of their own. And all along I was a fuckin white swan with the rest of them, just that they could see it but I couldn’t.

There’s a million more examples and stories I could talk about during my journey to get here. And maybe I haven’t even picked the best examples to tell you but I’ve made my point. Earlier this year I was promoted to ACTD – Associate Creative Technology Director, the first one the company has ever had. Shit they created a position for me and I still didn’t get it. I saw it as an honorary position, like a lifetime career achievement award at the Oscars, acknowledgment that the actor had given a lot but had never been great enough in a single moment to win the big prize. And when it was announced I had Creative Directors telling me it should have happened a long time ago and yet I still saw it as more of a pat on the back, a thanks for all your help and hard work. See I was still screwed up in the head, those damn college art students still messing with my mind, the Engineering department making me feel less than worth for caring too much about the quality of my product, me still not understanding what it means to be creative, my own insecurities of my abilities.

So how did I snap out of it? In the end it’s really quite simple. I started working on putting together a portfolio site. And that entailed getting together all the work I’d produced over the long years all in the one place for the first time. And it then involved thinking about that work I’d done and doing write-ups on it, and those write-ups involved looking at that work and actually taking credit for what was rightfully mine. And that’s how I realized it, by going back, all the way back to the beginning, I was and had always been responsible for creating some kick-ass shit. Sometimes it was kick-ass technology, and sometimes it was kick-ass creative, and more often than not it was both, shit I develop websites for a living so is there really a difference? I realized everything I’d done, just about everything I’d touched was for the better because of it, because of me. I realized there’s no shame in being creative without being able to design, all those ideas that I’d thrown out there that had made their way into the wire frames, into the comps, into the products. Yes if I hadn’t had that idea the design would have still rocked because the designer was a rock star, but the product wouldn’t have been as good. And there’s nothing wrong with giving a designer direction even though you don’t have the skills to design yourself. No I can’t start with a blank canvas, I don’t know how to use Photoshop effectively and I don’t understand all the theory behind the hue and saturation and such, but give me a starting point and I can take it from there, show me a design and I’ll give good advice and critique, I’ve proven this to myself and my peers many times over, and they respect me for it and finally I respect myself. I now know there are kick-ass designers that can’t creatively direct, just as there are copy writers that can’t design for shit but can creatively direct. And I now know there are techies that can creatively direct too.

Wednesday, July 29th, 2009

Automatically Rotating Homepage Takeovers

Something going on at Pandora that I came across today really struck me. They’re automatically rotating homepage takeovers as you interact with the site. It makes sense really, it’s a radio station so you load it up, minimize the browser and forget about and the songs play on and on, and therefore there’s no point in showing ads. So when they know you’re looking at the page, on interaction, is when they start showing ads (and try and get some revenue for the amazing service they offer for free).

Just in case you are not familiar with the term ‘homepage takeover’, it’s advertising talk for when a homepage is taken over by an advertisement. I think historically it was more of a roadblock, which is when there’s an obnoxious overlay and you have to click ‘close’ to continue browsing the site, but these days it can also be when the entire page is branded (or rather co-branded) with a product. A good example is this ask.com homepage from a few weeks back that was branded with a movie which quite possibly has the longest title of all time:

So back to the Pandora website. I was initially fascinated to see this going on, that when I interacted with the site these big colorful and sometimes animated backgrounds were changing. This is something I’m used to seeing change on a page load, as I navigate from page to page, or at least refresh the page I’m on. But really what’s happening with Pandora is it’s a self contained web application, so the page itself doesn’t change but the content within tabbed navigation areas gets updated. The core of Pandora is actually a Flash app, though it’s contained within HTML, the footer is in HTML for example, and so are the ads I’m talking about here. I’m sure this is a model that will be adopted by self contained web apps that bring content to the user instead of the other way around, if it hasn’t been already.

So here’s a few examples I came across:


The Black Eyed Peas example above is probably the most visually stunning I saw.


Vitamin Water looks good.


Some Microsoft ad, not really appealing to me. This also shows an example of an inline ad badge within the playlist (Alltel).


Canon Power Shot above, it’s alright, and has an interactive movie area (which pauses the radio station). This also shows how the Alltel ad badge moves along as an item in the playlist.

Wednesday, June 10th, 2009

Flash Windowless Mode (wmode)

Just over a year ago when we were done ideating the “nextgen” Ford vehicles site and moved into prototyping and early production I put this document together. Disabling wmode had long been the practice of my company and being on the team charged with developing the next generation site we felt that enabling it was a compulsory step to stay competitive with our websites moving forward. It stemmed from a discussion with our multimedia team, I can’t remember now the exact words they used but according to them the whole idea of wmode was a bad hack by the Flash development team many years ago and it was the industry practice to never used it. Until then the Ford site had been a pure Flash site so the issue had never seriously arisen, but our whole strategy moving forward was for the site to be pure HTML (with Flash nuggets) so it was imperative that the we enabled wmode moving forward. My aim was to prove that the idea of wmode being bad was ancient and that it was now the common practice to enable it, which I think I did quite nicely and it hasn’t ever come up again.

I wonder what experiences others have regarding this? Was it your practice to not enable it and you now do? Or maybe you still don’t? Or maybe you never did?

Next Gen and Flash Windowless Mode

What is Windowless Mode?

Windowless Mode (WMODE) enables control over Flash applications within a webpage. It is necessary to enable WMODE to allow JavaScript and CSS to fully control the layout and functionality of a webpage that includes a Flash app. Its main benefits include:

· Stacking – allow the flash object to go on top of some elements but underneath others

· Transparency – show content beneath the flash object

The default WMODE is Window. When a Flash app is in its default mode it actually doesn’t belong to the browser, even though it appears to. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. The other two are:

· Opaque: Enables stacking

· Transparent: Enables stacking and transparency, is the most processor intense

Examples:

Disabled

http://www.communitymx.com/content/source/E5141/wmodenone.htm

Opaque

http://www.communitymx.com/content/source/E5141/wmodeopaque.htm

Transparent

http://www.communitymx.com/content/source/E5141/wmodetrans.htm

Who has WMODE enabled?

Sample of Alexa.com top 50 ranking sites that have WMODE enabled:

http://www.yahoo.com/ – Transparent

http://espn.go.com/ – Opaque

http://www.cnn.com/ – Transparent

http://www.flickr.com/ – Opaque

http://www.weather.com/ – Opaque

http://dashboard.aim.com/aim – Opaque

http://www.nytimes.com/ – Opaque

https://www.bankofamerica.com/index.jsp – Transparent

http://www.nba.com/playoffs2008/index.html – Transparent

http://www.bbc.co.uk/?ok – Transparent

http://www.cnet.com/ – Transparent

http://www.netflix.com/ – Transparent

http://www.adobe.com/ – Transparent

http://abc.go.com/ – Transparent

Sample of competitor sites:-

http://www.toyota.com/ – Transparent

http://www.chevrolet.com/ – Transparent

http://www.chrysler.com/en/ – Transparent

http://www.audiusa.com/audi/us/en2.html – Opaque

http://www.gm.com/shop/ – Transparent

http://www.hyundaiusa.com/index.aspx – Transparent

http://www.jeep.com/en/ – Transparent

http://www.dodge.com/en/ – Transparent

http://www.bmwusa.com/Default.aspx – Transparent

http://www.ferraristore.com/ – Transparent

http://www.saturn.com/saturn/SaturnIndex.jsp – Transparent

http://www.miniusa.com/#/MINIUSA.COM-m – Transparent

http://automobiles.honda.com/ – Opaque

http://www.mazdausa.com/MusaWeb/displayHomepage.action?bhcp=1 – Transparent

http://www.gmperformanceparts.com/ – Transparent

Known issues

In IE frame count stays current but interval count lags behind:

http://justin.everett-church.com/wmode/

- Only affects user experience if flash requires a high refresh rate, such as games

- Avoid WMODE for these apps

Animation slow and jumpy with slow processors:

- Our sites currently already experience this with the full flash framework without WMODE enabled, though an html version is available

- HTML site will provide more seamless experience with only Flash apps being affected

- Capture slow experience and offer alternative content?

In Firefox text entry fields do not function correctly with international keyboards:

http://www.5etdemi.com/blog/archives/2005/06/firefox-wmodetransparent-is-completely-screwy-and-breaks-textfields/

- Only applies to user input

- Barely applies to sites built to only serve North America

- Make sure input is captured outside of Flash

- Disable WMODE for flash modules requiring input

- Hacks can be applied to the flash is necessary

Mac Firefox Flash disappears when using translucent overlays:

http://www.hedgerwow.com/360/bugs/opacity-disable-flash-on-mac-firefox.html

- Avoid translucent overlays with Flash

- If absolutely necessary use base 64 encoding for translucent image

Screen Readers cannot see Flash when WMODE is enabled:

http://dynamicflash.com/2006/10/flash-accessibility-and-wmode/

- Use html instead of flash for blocks of text

- Make text contained within Flash available outside of Flash

- Current site lacks accessibility and HTML/CSS layout will go a long way to improve this

Supported Browsers and Platforms

All our supported browsers and platforms allow WMODE to be enabled.

Conclusion

It is important to enable WMODE for modern web page design and functionality. We must embrace WMODE to remain competitive. There are negative issues surrounding WMODE but they can be eliminated by being aware of these issues at design and development stage as the majority of our Flash needs are not CPU intensive. The users negatively impacted by WMODE are a tiny minority. Only enable WMODE when necessary, using opaque setting over transparent when possible. If a Flash app is severely affected by WMODE find a seamless way to serve it with WMODE disabled.

Sources

http://www.communitymx.com/content/article.cfm?cid=e5141

Tuesday, May 19th, 2009