Tuesday, July 8, 2014
I Moved.
Hey everybody, I moved! You can now find my blog at http://theostrichproject.com. Please update your bookmarks and tell your friends. See you there!
Friday, June 6, 2014
Experience Continuity Design®
For nearly two years, I've been working at an awesome little shop that builds nearly everything on WordPress. And for over two years, I've had some strong opinions about web design. Do you see all of the irony here? My blog is on Blogger and I have no credentials whatsoever for web design. That doesn't keep me from opening my mouth though. Ha! Anyway, this seems like the perfect opportunity to put big mouth to the test.
For over a year, I've been contemplating porting my blog to WordPress because it just makes sense. I work with WordPress every single day. I like WordPress. It seems like the right thing to do. And of course, I don't want just a regular old boring WordPress theme that looks like a million other blogs out there so I started coming up with my own design.
I came up with something that I call, Experience Continuity Design®. I'd like to think that this is nothing new but I wouldn't be surprised if no one has ever thought about web design in this way.
So the old school method of web design seems is what I call "The Least Common Denominator" method. Basically, the lowest resolution screen on which someone will view a website on is 1024 pixels wide. So to ensure that everyone can see your website, make a template that 960 pixels wide and just don't do anything wider than that. This really, really, really sucks on full HD widescreen monitors.
With the advent of the smartphone, that method has evolved, but only ever so slightly. With responsive design, you focus on what's most important, display that at the top of your narrowest resolution (~320 pixels) and then let everything flow out as you get larger. It seems like things still max out at a width of about 1200 pixels and really isn't all that different than it was, just slightly less wasteful.
The problem is that design hasn't adapted to the fact that users, in a "desktop" environment (so not on a phone or perhaps a tablet) almost universally have wide screen monitors. That's why there's always wasted space on the edges of most websites. Figuring out how to use that extra space necessitated a different approach.
Instead of finding the least common denominator in screen size, I latched onto the fact that desktop users' view port is essentially the same rectangle. Some are a little wider than others but basically everyone views web content through a rectangular frame. With that in mind, I mocked up my design so that all users would see the same content and layout regardless of the size of their rectangle, thus creating a continuity of experience. So whether you're on a 1280x800 Macbook Pro or have a WQHD monster, you will have the exact same experience.
Full screen @ 1920 pixels wide
1366
And then at 1024 where I felt it was time to respond to a 4:3 layout.
All of this was accomplished using some magical CSS by incorporating lots of percentages, vw's, and vh's. A year ago when I started this mockup, which has collected dust since then, browsers weren't all that happy with the vw and the vh but I think they might just be ready. And I'm hoping that by me actually publishing this, I will be motivated to make something happen. Of course, I don't have the PHP skills to execute but that's just a minor detail, right?
Does this not make amazing sense? Let me know what you think, please, in the comments.
For over a year, I've been contemplating porting my blog to WordPress because it just makes sense. I work with WordPress every single day. I like WordPress. It seems like the right thing to do. And of course, I don't want just a regular old boring WordPress theme that looks like a million other blogs out there so I started coming up with my own design.
I came up with something that I call, Experience Continuity Design®. I'd like to think that this is nothing new but I wouldn't be surprised if no one has ever thought about web design in this way.
So the old school method of web design seems is what I call "The Least Common Denominator" method. Basically, the lowest resolution screen on which someone will view a website on is 1024 pixels wide. So to ensure that everyone can see your website, make a template that 960 pixels wide and just don't do anything wider than that. This really, really, really sucks on full HD widescreen monitors.
With the advent of the smartphone, that method has evolved, but only ever so slightly. With responsive design, you focus on what's most important, display that at the top of your narrowest resolution (~320 pixels) and then let everything flow out as you get larger. It seems like things still max out at a width of about 1200 pixels and really isn't all that different than it was, just slightly less wasteful.
The problem is that design hasn't adapted to the fact that users, in a "desktop" environment (so not on a phone or perhaps a tablet) almost universally have wide screen monitors. That's why there's always wasted space on the edges of most websites. Figuring out how to use that extra space necessitated a different approach.
Instead of finding the least common denominator in screen size, I latched onto the fact that desktop users' view port is essentially the same rectangle. Some are a little wider than others but basically everyone views web content through a rectangular frame. With that in mind, I mocked up my design so that all users would see the same content and layout regardless of the size of their rectangle, thus creating a continuity of experience. So whether you're on a 1280x800 Macbook Pro or have a WQHD monster, you will have the exact same experience.
Full screen @ 1920 pixels wide
1366
And then at 1024 where I felt it was time to respond to a 4:3 layout.
All of this was accomplished using some magical CSS by incorporating lots of percentages, vw's, and vh's. A year ago when I started this mockup, which has collected dust since then, browsers weren't all that happy with the vw and the vh but I think they might just be ready. And I'm hoping that by me actually publishing this, I will be motivated to make something happen. Of course, I don't have the PHP skills to execute but that's just a minor detail, right?
Does this not make amazing sense? Let me know what you think, please, in the comments.
Thursday, May 1, 2014
The Testing Burn
This last Sunday afternoon, I went to spend a few hours with some friends at the beach. Interestingly in Long Beach (a city with "beach" in the name), going to the beach is entirely a land activity because the water is so polluted but that's beside the point. Anyway, it was a beautiful, sunny day and I knew I needed to protect myself from the deadly rays of the sun.
I applied sunblock.
I put it on my face. I put it on the edges of my ears. I put it on my neck. I put it on my hands and arms. I put it on the tops of my feet.
Fast forward a couple of hours... I came home with a sunburn.
But how and where, you wonder.
When I was applying my sunblock, I was sitting on the couch in my living room, watching TV. My experience from times when I've gone out without sunblock told me to get the edges of my ears and the tops of my feet and of course my face, neck, and arms. So I have a burn on my forehead and the insides of my knees.
Evidently, when I was applying the protectant to my face, I thought I went all the way up to my hairline, but it must have been my idealized hairline and not my actual hairline because there is a very distinct demarcation between healthy and burnt skin. If I had been in front of a mirror, I likely would not have made this mistake. And as for my knees, that was poor planning. I imagined myself as being up and about rather than sitting.
I actually have a point with this.
When we testers are doing our job, we like to think that we're covering everything, or at least all of the essential elements. But how many times doesn't a product (or in my case a website) launch and you get burned? Glaring red spots that seem obvious in hindsight. And of course they hurt and peel and are an embarrassment until they heal.
Testing is something that we do without being able see the entire picture. There's no magical tool (mirror) that we can look into and see where we haven't applied our skills. Testing coverage is mostly verified by feeling. We can draw on our previous experiences. We can understand the landscape by looking at other similar projects. We can be well versed on the documentation relating to the project. But no matter what, there's always going to be some spot that you can't see.
And sometimes there are spots that you didn't plan for. You plan for shorts day at the beach and then when you get there, you're handed a Speedo and told to change. We take calculated risks because of limited time and money... and then the unexpected happens.
Hopefully you don't get burnt but when you do (and you will), hopefully you learn from it. I know I'll definitely be more careful about applying sunblock to my face down the road.
NOTE: There are no pictures of the burn described in this post. Don't ask.
I applied sunblock.
I put it on my face. I put it on the edges of my ears. I put it on my neck. I put it on my hands and arms. I put it on the tops of my feet.
Fast forward a couple of hours... I came home with a sunburn.
But how and where, you wonder.
When I was applying my sunblock, I was sitting on the couch in my living room, watching TV. My experience from times when I've gone out without sunblock told me to get the edges of my ears and the tops of my feet and of course my face, neck, and arms. So I have a burn on my forehead and the insides of my knees.
Evidently, when I was applying the protectant to my face, I thought I went all the way up to my hairline, but it must have been my idealized hairline and not my actual hairline because there is a very distinct demarcation between healthy and burnt skin. If I had been in front of a mirror, I likely would not have made this mistake. And as for my knees, that was poor planning. I imagined myself as being up and about rather than sitting.
I actually have a point with this.
When we testers are doing our job, we like to think that we're covering everything, or at least all of the essential elements. But how many times doesn't a product (or in my case a website) launch and you get burned? Glaring red spots that seem obvious in hindsight. And of course they hurt and peel and are an embarrassment until they heal.
Testing is something that we do without being able see the entire picture. There's no magical tool (mirror) that we can look into and see where we haven't applied our skills. Testing coverage is mostly verified by feeling. We can draw on our previous experiences. We can understand the landscape by looking at other similar projects. We can be well versed on the documentation relating to the project. But no matter what, there's always going to be some spot that you can't see.
And sometimes there are spots that you didn't plan for. You plan for shorts day at the beach and then when you get there, you're handed a Speedo and told to change. We take calculated risks because of limited time and money... and then the unexpected happens.
Hopefully you don't get burnt but when you do (and you will), hopefully you learn from it. I know I'll definitely be more careful about applying sunblock to my face down the road.
NOTE: There are no pictures of the burn described in this post. Don't ask.
The Long Silence
So it has been almost a year since I posted to my blog. I've missed writing but I haven't felt like I've had anything to write about. In the past, most of my posts have been inspired by the mistakes and bad attitudes I've observed at the companies I've worked at in the past. And while, I'm not saying my current employer is perfect, I have been genuinely content.
The last year has been one of great personal change. For the first time ever, I was fired from an unrelated contracting job. I got caught up in an emotional situation and traded in my beloved Eric (2006 Accord V6 6MT Sedan) for a car that I really didn't like. I got out of a severely dysfunctional relationship. I moved to a new city and I've started fixing all of the broken pieces of my life. Looking back on this makes me realize that maybe I have things to say that aren't just responses to what's wrong. I won't know if that's true until I actually write it but it's time for a new motivation for writing about testing and I think I've found it.
Yay testing!
The last year has been one of great personal change. For the first time ever, I was fired from an unrelated contracting job. I got caught up in an emotional situation and traded in my beloved Eric (2006 Accord V6 6MT Sedan) for a car that I really didn't like. I got out of a severely dysfunctional relationship. I moved to a new city and I've started fixing all of the broken pieces of my life. Looking back on this makes me realize that maybe I have things to say that aren't just responses to what's wrong. I won't know if that's true until I actually write it but it's time for a new motivation for writing about testing and I think I've found it.
Yay testing!
Subscribe to:
Posts (Atom)