Jan 28, 2013
Designing a Remote Module for DIY Home Automation

Steven has a great build log of his home automation project over at GeekBoy.it.  He built a custom wireless remote module on the cheap, and has his code and schematics posted on his site.

I opted to use an Arduino as a starting point. Using an ATmega 328 AVR on a breadboard, I could experiment various wireless technologies and see if what I wanted to do was realistic.

To begin with I was considering using an Xbee wireless module for communication, however this would increase the cost too much. What I settled on was a nRF24L01, which can be found on eBay for as little as $1.50 each. Arduino has a very good library for this and were very easy to implement.

Creating a mesh network with the nRF24L01 was actually quite simple, it has no more hardware requirements, it’s all in the code. By repeating the received message, the data is passed on to the next module in range. Of course if they’re all in range then this feature won’t be used much.

Jan 24, 2013
Honey Automatically Searches For And Applies Coupon Codes When You Shop Online

Honey Automatically Searches For And Applies Coupon Codes When You Shop OnlineHoney Automatically Searches For And Applies Coupon Codes When You Shop Online Chrome: Many of you probably search for coupons on sites like RetailMeNot when you shop online, but free extension Honey takes it to the next level: With one click, it will search for coupon codes for you, and automatically apply any that work to your checkout cart.

Honey works with over 100 stores, adding a new button to your checkout page that does all the work for you—searching and applying coupon codes—without you having to lift a finger. What more could you ask for? Check out the video above to see it in action, or try it out by installing it at the link below.

Honey | Chrome Web Store via Maximum PC

Jan 22, 2013
The Truth Is That Android Is Cheap, Not Good

99cents

When Android first appeared I had an inkling that it would be a hit. I didn’t enjoy the early incarnations of the software – the G1 was like a Sidekick on steroids – but generally I expected Android devices to blanket the world for one simple reason: it was free and carriers no longer had to worry about Java stacks and wonky, homebrew OSes. Instead they could sell phones that worked, approximately, like every other Android phone in the world. It was Google’s gift to an industry that was facing competition from all angles.

And that plan worked. But I always wondered if my “free” hypothesis held water.

Today Sam Biddle at Gizmodo published a great examination of just what makes Android so popular – the phones it comes on are cheap and, as such, are popular with a wide tranche of users. While the iPhone (with its black metal and fancy glass face) costs $299 on a good day and $500 on a day when you’re not out of contract, devices like the Motorola Atrix HD costs 99 cents with contract.

Writes Biddle:

The split between the ever-pricey, ever-coveted, newly chamfered iPhone and everything else is glaring: The iPhone is universally considered good. A lot more Android phones are considered good enough—or, more to the point, good enough for what they cost. And it’s that trait more than any new feature that’s guaranteeing Google its role as Phonemaker of The People, a democratic gadget, while Apple succeeds only in cementing its grandfathered slot in the gilded pockets of the overly-discerning overclass.

In short, when it comes to phone popularity, Google is doing everything right by essentially giving the OS away to all comers. This is essentially “Free As In Beer” software that allows manufacturers to slap a solid, usable OS into a slow, wonky phone and sell it for pennies. The resulting popularity, then, of Android (and Samsung) is driven less by the high end but by the low.

Biddle goes a bit more into detail in his post, but I think it’s important to remember this extremely important distinction between iOS and Android. While Android is winning – and that’s unequivocally true – it is winning by Hoovering up the low end of the market. Barring the beautiful flagship phones that cause even me, an inveterate iPhoneboy, to salivate, Android is scorching the earth by being the cheapest and not the best. Once it gets both of those factors right, however, watch out. RIM and Microsoft will be flattened and Apple, even given all of its die-hard fans, will finally see true competition. As any booze hound will tell you, there’s good whiskey and there’s cheap whiskey and rarely, is there good cheap whiskey. Google needs to hit that sweet spot and then the market will really take off.


Jan 16, 2013
Living In The Light: A Tribute To The “Wheel Of Time”

Prologue

We live in a world dominated by technological immediacy. In so many ways, the interest and ability to get lost in a long story that takes us away from this world is fading from our popular consciousness. 

Sometimes, we need to take a Pause. Pick up a book you may never have thought of reading before and get lost in a different world. You just might find something that becomes an integral part of how you live your life, away from the distractions of Twitter and Facebook, iPhones and Android.

My escape from technology (and all of the other tribulations of life) has come in the form of Robert Jordan’s Wheel of Time. The 15-book series was 23 years in the making. Each book has been a New York Times bestseller. The final book, A Memory of Light, was released earlier this month and is already an Amazon bestseller. 

Below is a tribute to the series, told in the style of Jordan, which chronicles my journey through the Wheel of Time and how it has long served to put the real world into perspective. 

Book 1: The Eye Of The World

The Wheel of Time turns, and Ages come and pass, leaving memories that become legend. Legend fades to myth, and even myth is long forgotten when the Age that gave it birth comes again. In one age, called the Modern Age by some, an Age yet to come, an Age long past, a wind rose among the islands of the Gulf of Maine. The wind was not a beginning. There are neither beginning nor endings to the turning of the Wheel of Time. But it was a beginning.

Inland the wind blew. Cold and bitter, it whipped the trees on the coast and frothed the tops of blue-grey waves in to white caps. It blew through the sea walls and around small islands, casting icy tendrils of snow across the landscape lush with green pine trees. The wind followed a road, long with pavement broken by years of patching from the damage of excessive winters, towards a small two-story house that lay slumbering in the predawn light.

The wind rattled the windows of the house, causing a boy, midway through his 10th year, to pull his blanket closer around his shoulders. It was Christmas Day, or the Festival of Lights as the boy was beginning to think of it, and he had woken before the rest of his family to raid his stocking, bulging full next to those of his brothers and sisters. He was allowed to open his stocking when he woke up - but not yet the massive pile of wrapped gifts under a well-decorated and brightly lit tree next to the hearth. 

A pile of candy and small toys lay strewn around the boy. His mother, he was long past the concept of Santa Claus, always liked to stuff the stockings with goodies for the children, along with items that would likely prove useful in the year to come. A paperback book lay among the rubble, small but thick, with a picture of two people on horseback, one a tall man in majestic armor, the other a small woman garbed in white. The boy looked at the book and set it aside, moving on to more exciting discoveries among the stocking.

The title of the book read The Eye Of The World, the first book of The Wheel of Time, by an author named Robert Jordan. The boy did not know it at the time, but the book, and the series that followed, would consume his consciousness and inform his life for the next 20-plus years. 

Book 8: The Path of Daggers

The boy was growing into a young man. Not quite yet an adult, he sat in his basement bedroom in the new house his parents had just bought. It was late June and the boy was alone and angry. His parents had moved from that Maine house to one in mountain foothills of Virginia, taking him away from the friends he had known all his life, just as summer started. So, he turned to friends he knew would never abandon him, devouring the books that had become some of his most prized possessions. 

He was reading The Path of Daggers, the eighth book to the Wheel of Time. It had come out the fall of the year before, but the boy had not yet gotten around to reading it. He had a tradition that must be followed. When Jordan released a new Wheel of Time book, the boy would read every book in the series again before starting the new one. With every book nearly 800 to 1,000 pages, the tradition was beginning to take a long time. 

He followed the path of his friends. Rand al’Thor, the Dragon Reborn. Mat Cauthon, the scoundrel, gambling son of battles. Perrin Aybara, the stolid blacksmith. Egween al’Vere and Nynaeve al’Meara, the stubborn but talented fledgling Aes Sedai. The people of the Two Rivers that fought to save the world and win Tarmon Gai’don, the last battle between the forces of Light and Shadow.

The books were the boy’s solace and his escape, especially through this summer, one of the most difficult and disappointing of his life. He had begun to associate himself with various characters’ traits. He thought of the Two Rivers as his former home in Maine, a place he had been forced to leave. He did not know it then, but just like the characters of the Wheel of Time, leaving his Two Rivers would ultimately be the best thing for him. 

Book 11: Knife of Dreams

The boy was now a man, still young and full of the arrogance of a young adult who has tasted some early success. 

There was also pain. Deep, emotional pain. He did not know it then, but this pain was a thing that many people his age experienced. It was an existential rift, threatening to tear his soul apart. 

The young man swallowed the pain, allowed it to harden him and make him cold, calculating. He believed that allowing the pain to make his heart a stone gave him strength. He did not know how foolish he was.

The young man sat in his apartment, reading Knife of Dreams, the 11th book of the Wheel of Time, which had just been released. He was alone, except for his dog, and enjoyed the silence and solitude of his self-mandated exile to University. He had left his friends behind and looked to make a new life for himself.

It was hard not to notice the similarities between himself and Rand al’Thor. The Dragon Reborn also faced an existential crisis, allowing himself to become hard to the point of breaking. A darkness was consuming him, to the detriment of the world he was destined to protect. 

While the young man sympathized with the Dragon Reborn and saw the correlation in their predicaments, he thought himself more like Mat Cauthon. Mat was a gambler and a carouser, a world-class complainer, a scamp, a rogue and a scoundrel. These were traits that the young man could get behind. Mat was also brilliant and crafty and, while he complained about it, would always end up doing the right thing. Even if it was difficult.

Book 12: The Gathering Storm

It had been years since the man had thought of the Wheel of Time. Robert Jordan had died in 2007 and the man wondered if the series would ever be finished. Finally, a new book had been released, completed by Brandon Sanderson, a fantasy writer picked by Jordan’s widow Harriet McDougal to finish the series. 

The man had, more or less, passed his existential crisis. Reading The Gathering Storm, the 12th book of the Wheel of Time, the man hoped that the Dragon Reborn would as well. After all, the fate of the world rested on his shoulders.

The man, no longer a boy and past the angst of young adulthood, begun to think of himself like Perrin Aybara, the blacksmith turned wolfbrother, turned reluctant lord of his people, turned force of nature. Perrin, above all else, was responsible. Levelheaded and deep thinking, practical and meticulous, Perrin’s ability to think through all the aspects of a problem gave him power. Once set upon a task, Perrin would see it to the end and do it right. Though the man still embodied aspects of both Rand and Mat (especially Mat), Perrin was a guide through the heart of darkness.

By the end of the 12th book, Rand indeed had found his heart again. He learned how to laugh, to accept his fate while marshaling his skill and resources to the task in front of him. It had taken a long time for Rand to come to grips with himself and learn to smile again, to trust people. Just like it had been so many other times in their lives together, the man and the Dragon Reborn had reached the same point in their lives at the same time.

Book 14: A Memory of Light

The Last Battle was coming. The man could not wait. 

He took upon the massive undertaking in July to read all 14 books (including the prequel New Spring) before the 15th and final book, A Memory Of Light, arrived in January of 2013. 

It had been a long time since the man had read all the books. The longer the Wheel of Time series ran, the harder it was to re-read all the previous books leading up to the latest one. The man had taken to re-reading only the previous two or three before starting the newest release. 

It was like coming home. 

He relished the flight from the Two Rivers, having forgotten how engaging and exotic the first few books had been. He grew weary when the story dragged after the eighth book, when Jordan spent more time letting Aes Sedai argue than advancing the plot. He felt the tingle of anticipation reading the two Sanderson books before A Memory of Light, and respecting Sanderson for his brilliant stewardship of the beloved series. 

As the man moved through the series, all four million words of it, he recalled the path he had taken to this point and how the characters of the Wheel of Time had been his companions, his Light, through his life. It was a catharsis, the pain and joy, trials and tribulations of his teens and 20s put to bed through his journey, one last time, through the Wheel of Time. 

The series, like it had been so many times before, were his escape. His Pause. A respite from a life that had become dominated by smartphones and social media, the endless maw of his own writing, chronicling the world of technology in his day-to-day life. 

And finally, after so many years of waiting, the final chapter had arrived.

Epilogue

The man wept. Uncontrollable, body-shaking sobs ran through him. 

He had been up most of the night before. A Memory of Light, it turned out, was almost all he had hoped it to be. Characters he cared for fought and died, hundreds of pages of endless battle making up for the middle books that had been nothing but dialogue. The Last Battle grew desperate, the characters weary and exhausted from fighting the Shadow in a battle that seemingly would never end. The man, fighting his own exhaustion, fell asleep with the book in his hand.

When he woke, he could not simply put the book aside and start his daily work. After more than 20 years, he was not going to wait another hour to see if the Dragon Reborn would kill the Dark One.

The last 300 pages of the Wheel of Time were intense and chaotic, hope mixed with despair. The man’s weeping had much to do with the plight of the characters, but also the path of his own life reflected through them. In the end, he felt raw, tired but happy. He knew the Wheel of Time was more than just an epic fantasy series written by a talented author. It was part of him and he was part of it. He closed the book and sighed, wiping tears from his cheeks.

There are neither beginnings nor endings to the turning of the Wheel of Time. But it was an ending. 

Let the Dragon ride again on the winds of time. 

Jan 14, 2013
[CES 2013, NSFW] Booth Babes Controversy An Important Reminder That Sometimes Sexy Trumps Skills

CES booth babes 2013

At CES 2013, The Inquisitr had our largest presence to date, and thus spent much time on the ground reviewing and seeing instead of writing and connecting, our usual grind — and thus, we all missed the to-do over the continuing use of “booth babes” at the tech-stravaganza.

Having now attended CES, 2013 being my first year, as well as possessing two x chromosomes, I feel uniquely qualified of the team to comment on the CES 2013 Booth Babes Redux.

(Fellow Inquisitr writer Melissa is also female, and was present at this year’s convention.)

While I wasn’t entirely steeped in the controversy as I might be at my home-workstation, non-tech friends sent me links and posted articles to my Facebook wall about the criticism of the commoditization of females at this year’s CES — and mindful of that, I did take notice on Thursday and Friday of the phenomenon. (Friend and fellow web publisher The Dusty Rebel asked me if I was booth babing it up at CES in lieu if my standard writing gig — sadly, aside from Inquisitr, the only brand I represented by way of attire at CES 2013 was Aeropostale.)

Apparently the debate on booth babes at CES 2013 predated the convention itself — Jezebel called out an ad that had mystified me in my inbox when I reviewed it in the weeks leading up to CES.

I kept it aside thinking it might be a lifestyle or adult product, but in fact, the disembodied lips and legs in VOCO’s CES ad were in fact selling technology unrelated to the bedroom, with the parts of a female included in the layout perplexing at the very best, and disturbingly depersonalizing regardless.

booth babes at CES 2013

It seems of all the booth babes at CES 2013, the most controversial were the ones seen in the top image — adorned only in body paint and with somber expressions and zero interactivity, the women on display (referred to as “fembots”) were an instant illustration of the depersonalization of a female that a booth babe represents. Your (in this case) verbal input is entirely unnecessary, your breasts and legs and silence are all that are required of your presence, it seems to indicate.

Although the debate has apparently been raging for years about booth babes at CES, I processed their presence only ambiently on Monday and Tuesday. Indeed, even when not actively considering it a “thing,” the trend can be a bit off-putting.

Stowing aside the implications of CES booth babes in the context of a hostile environment (mainly, the expectation we all wear false eyelashes and daisy dukes and feather headdresses when going about our business, it being part of our job to provide visual stimulation for males), the presence of booth babes (without any sexualized male counterparts) is somewhat jarring. It seems to be a constant message that as present as women are at CES, this isn’t necessarily marketed toward “us.”

Having been pelted with the knowledge of CES 2013 booth babe controversy, my notice of the phenomenon was contrasted Thursday and Friday with my notice of women overall at the convention. Booth babes at CES indeed represent a small portion of all attendees, and the majority of women (like the majority of men) were in standard business attire or “geek streetwear,” depending on demographic. (Quite a few were present at the Trojan booth, where the women were refreshingly attired to do business despite the gadgets’ adult themes)

However, what booth babes bring in notoriety to a company and to CES as a whole is perhaps actually a positive thing rather than a negative, and I say this as someone who finds the practice fairly repugnant overall. (I am all for positive representation of sexuality and grown-up content, but at the end of the day, it’s a cheap tactic only foregrounded by its message in the utter lack of parity — if booth babes were about selling sex, there would at least be some males, but there were none to my knowledge.)

The positive is, of course, in the constant reminder of the fact that while we were well represented in the aggregate — females in business suits, females in branded gear and females, like me, in hoodies and dress sneakers swarmed the floor in large numbers — at CES, we still are to a large degree also persons that serve as capable of only contributing the way we look.

ces 2013

Once aware, I noticed that most of the time the presence of a large, floor blocking crowd signified a woman in very short shorts doing any number of things, as a for instance. And when I did read about and start to think on it, it was a constant reminder that for every fantastic CES 2013 write-up I could churn out, to tens of thousands of male eyes, a tanned, taut and toned physique and exotic dancer eye-makeup was just as valid a contribution.

Earlier BBC coverage from last year about the CES booth babes debate watched after the convention was a bit more saddening — while one dude decried the practice as a sleazy appeal to baseless attention, another said that men loved to watch hot “girls” play Call Of Duty.

CES 2013 booth babes

And a woman — herself a booth babe, scantily clad in a sexed up version of a business suit — said that she couldn’t really see women choosing to think about or work with tech when presented with more feminine options like cooking or shopping, or raising kids. (A pursuit many of us, like men, embrace alongside our busy careers.)

CES booth babes really are somewhat like a racist joke or other off-color reminder of the existence of these stereotypes — the ugly ideas behind it will always be simmering underneath the surface. In the BBC video below, the CES CEO Gary Shapiro responds to the British news agency’s initial question in 2012, responding:

” … People naturally want to go towards what they consider pretty. So your effort to try to get a story based on booth babes, which is decreasing rather rapidly in the industry, and say that it’s somehow sexism imbalancing, it’s cute but it’s frankly irrelevant in my view.”

And therein lies part of the rub — if we protest too loudly, we are accused of not being “fun,” or missing the point or some other variation that kind of glosses over how unpleasant it is that while your colleagues are simply expected to show up and work, you are often expected to show up, work and look hot doing it or risk being relegated to invisible status.

In short, the presence of booth babes at CES 2013 alongside many dressed-to-actually-work females served an important, if depressing, reminder of how far females still have to go in the fields represented at the convention.

Each glittered decolletage served as a stark illustration of our continued underrepresentation, each half-glute bared a testament to the fact that there are two paths for women where for men there are just one, and while those who choose the skin-baring route should not be judged, the culture that encourages it certainly can be debated.

[CES 2013, NSFW] Booth Babes Controversy An Important Reminder That Sometimes Sexy Trumps Skills is a post from: The Inquisitr

Jan 5, 2013
Designing a responsive, Retina-friendly site

It’s hard to believe I have been blogging for more than 7 years. Michael Wozniak, my hallmate during my freshman year at Georgia Tech, had gotten me into Gentoo Linux the year prior and told he was playing with WordPress 1.2. Compared to the MediaWiki site I was running at the time that piqued my curiosity and I began blogging on WordPress on my G4 Mac Mini that summer. I immediately fell in love with it and began learning CSS and PHP to tweak the theme1.

Eventually I found my thing – writing technical guides, product reviews and tech editorials. I still remember the feeling when I noticed one of my articles got picked up by Lifehacker. Then digg. Then 5 other sites. 20,000 uniques in 4 hours. I wrote a follow up to that article. Same thing. And another follow up. I received enough traffic that month in 2005 to kill the hard drive in my dorm-hosted Mac.


Unfortunately, I haven’t blogged as much in recent past; my waking hours spent worrying about startup issues than crafting new content. Things I would have blogged about in the past are now published as tweets.

When the time arises, I thoroughly enjoy writing long-form articles and with that in mind I wanted to design a better experience for consuming them.

Note: This article got rather long (15,000 words), so I split it up into a few posts. This one is about design. The next part(s) covering development in great detail will be posted this week.

Mobile

My last redesign in 2010 was not built with mobile in mind. It was more of a lets-get-this-new-Jekyll-thing-working project than a planned website overhaul. Visiting on an iPhone meant the typical double-tap-to-zoom fiasco.

Having seen my traffic breakdown go from 3% iPhone and 2% iPad in 2011 to 7% iPhone and 4% iPad in 2012 I knew it was time to focus on the mobile experience throw mobile visitors a proverbial bone. iPad visitors in particular spent more time on site than desktop or iPhone visitors. Approximately 132,000 people read this site on a mobile device in 2012. Damn.

Responsive devices The new responsive & retina-friendly PaulStamatiou.com.

These numbers are only going to grow. It helps that proliferation of LTE networks and devices means the fastest Internet connection people have will likely be on their smartphone, not their home connection. That’s crazy.

Picture Perfect

Many of my posts and reviews are filled with my own photos. My blog actually got me into photography. I first purchased a DSLR to take better pictures for articles and product reviews. In the last 3 years I have fallen in love photography. But most of my shots were getting published on Instagram. It made me feel a bit bad that I don’t often share many of my photos on my blog.

Paul Stamatiou Instagram
Some of my Instagrams

I was in that exact mindset when I was flying back from New York after hanging out with the Rap Genius guys. They don’t have an office, instead they have a few baller (to use their vernacular) penthouses in Brooklyn. I took this panorama on their deck with my iPhone which I then post-processed with Snapseed.

Rapgenius HQ Brooklyn, New York
Click see my new photo page

I liked this photo so much that I was vexed I couldn’t share it with my Instagram followers. I began pondering about a clean way of sharing it on my blog.


The Retina Revolution

If I was going to touch my site, it would need to be Retina friendly. I’ll be referring to Retina as the device agnostic term HiDPI from here on out. What does that mean? Every icon, background or image used should look crisp on HiDPI displays. The most pressing area for that is on mobile devices as there aren’t yet that many HiDPI desktops and laptops out yet. As much as people love the Retina MacBook Pros, that’s not even a single percentage of anyone’s web traffic yet.

Don’t expect to have a HiDPI 27-inch display just yet. The first 4K (3,840 x 2,160) big displays are shipping and they are expensive.. around $5,500. But in 2-3 years? That’ll be another story entirely; HiDPI displays will be standard on most high-end desktops2.

If responsive web design was the fad of the web design/development community for the last few years, the next one is going to be HiDPI support. With HTTP 2.0 (with SPDY forming the starting point) slated to drop in 20143 it will be perfect timing to combat the larger filesizes needed for HiDPI image assets. As I’ll discuss in the second part of this post, there are some development challenges associated with this.

Design

Photoshopping desk
Late night Photoshopping & trance. Very similar to The Coding Zone.

I wanted to completely rethink my site, not just a add new coat of candy paint. I planned to rewrite copy on all static pages, reorganize content as necessary and generally simplify things. This would also give me a good excuse to start using more semantic HTML5 tags.

My design process was a little different from how I mentioned it in my ridiculously popular Crash Course: Design for Startups. I usually start with some inspiration-wrangling, a few ideas about direction and lots of sketching before any Photoshop or code. I couldn’t exactly whip out a big sketch pad in lovely last-minute seat 37B so I worked in Photoshop for most of my 6 hour flight back to SF (until they started playing How I Met Your Mother).

If you need to use something like Readability or Safari Reader to read my articles, I’ve failed as a designer.

I began thinking single column. The content should be the star of the show. No sidebars or extraneous post metadata that gets in the way of reading. If you need to use something like Readability or Safari Reader to read my articles, I’ve failed as a designer. And lets not forget the impetus behind this rethinking; I wanted to be able to publish large photos – within posts that extend beyond the narrow copy and also on individual photo pages. Bandwidth and latency be damned, I want to show dozens of 1000px+ wide photos at a time.

Planning Mobile First RWD

The premise behind Mobile First Responsive Web Design4 is that you should trim your site to only the essentials, establish the priority or question the necessity of all elements and focus on mobile before adding complexity for larger/desktop versions of the site. This is going to sound ridicu-cheesy, but this is a way of thinking and it applies to every aspect of your site planning. Even down to writing mobile first CSS to keep things lightweight and simple and conditionally load extra stylesheets and content for larger devices (that are also likely to have faster connections) as necessary.

Categorizing your site into pieces and setting priority before even pondering aesthetics stems from Dan Brown’s page description diagrams back in the early 2000s.

The page description diagram, by demonstrating priorities and providing a context for the content and functionality, gives visual designers the information they need to create an effective layout.

It’s a great little exercise when embarking on a redesign. Given that this site only has a few pages and then blog posts, it wasn’t really needed. For the sake of teaching, I’ll elaborate a bit. You generally start with three columns from high to low priority page elements. You list out each element and you can optionally provide a description of it and a simple wireframe of that element.

High Medium Low
Archives/Posts RSS/Subscribe Contact
Photos "Bits" (asides) posts Search
About Comments "Stuff I Use" page
@Stammy FB/Twitter share
Post metadata, date

Some of this organization was by personal preference and some was metrics-driven. Take the post date for example. I have some articles dating back 7 years and I don’t want to advertise that the content may be outdated5, so I place less importance on that and display the publish date after the post. For the most part my articles are evergreen and more of my content is becoming less product reviews and more editorial.

I’ve also found that time on site increases when users don’t see the post date immediately. The majority of my visitors come from Google SERPs and they’ll leave without reading if the first thing they see is that the content is more than a year or two old. Increasing time on site also tends to decrease bounce rate for these Googlers. After reading the post they are likely to open up a few other articles I link to or just browse around for another pageview. It’s important that I do whatever I can to capture that first time visitor.

If someone won’t share a post because I don’t have a Twitter button in 10 places on the page, then I’m writing pretty crappy content.

An example of priority based on personal preference is my decision to place low importance on Facebook and Twitter sharing functionality. I like to believe that if the content is good enough, people will share it on their own accord. I also didn’t want to load Facebook and Twitter javascript. This gives me a mental test before publishing.. is this content really good enough to publish?

I could simplified things more by merging my "bits" (smaller posts) into the main posts section. Bits had their own RSS feed and index page. It was another navigation element; another forced decision upon visitors to visit another page. Bits now appear styled differently inline with the rest of the posts.

But I messed up. When I first did this page description diagram I prioritized search functionality as high. My first header designs as I’ll show below had a huge search bar next to the main navigation as if it was one of the most important elements on the site. I looked into my Google CSE analytics ‐ search was rarely used; less than 10 queries a day on average. Only 8,500 on-site searches in the last 3 years. I since relegated search to low priority on this diagram.

Where to begin with visual design?

After that basic IA and planning was out of the way, I had a good idea of what to include in the header. I was going to distill it down to the essentials. There would be such little difference between the mobile version and larger responsive versions that I wouldn’t really need to plan the responsive designs. The focus is on the content at all times, not just on mobile, so there’s no need for me to do any content choreography and adjust layouts between responsive designs. No sidebars to hide or move, et cetera.

Some designers start with a blank slate of copy and begin with typography and layout, while others begin with the site header and navigation. I began with the header. I tend to start my designs on an extreme with the intention of toning it down later as necessary. As a tiny example of that, I made the avatar and header text much larger than I was comfortable with. If you only ever design within your comfort zone, you won’t come across unexpected ideas that you may end up loving. That’s how the folks at Lamborghini design 2 too — starting with the most absurd and extreme lines that come to mind.

Lamborghini Aventador LP 700-4 I’ve ridden in a Ferrari 458 and thought that was insane. The Aventador hits 60 quicker, in just 2.8s.

I previously had a terse Twitter-like bio on the top of my homepage and decided to further reduce that into a subtitle. As for having my avatar there, I wanted to put a face to the content, much like people have become accustomed to seeing a face next to every tweet.

Below you can see some early versions of the header that I was left with by the time the flight was ready to land. The one on the left was the first stab. It felt like there were too many menu items and the search just didn’t line up. The middle version was my attempt to distill navigation into the most important elements, posts and photos. I wasn’t happy with the visual hierarchy there either and it made search look too important. In the third iteration I began playing with icons to minimize space used by navigation. I was trying to line it up under the avatar, but I had too many menu items and it just looked weird.

PaulStamatiou blog header and navigation iterations Some early iterations of the blog header and navigation.

Around this point that I dug into my metrics to find out that search wasn’t used much. I initially opted for icon-only navigation with tipsy-style tooltips, but felt it violated Rams’ “as little design as possible” principle, in addition to being cumbersome (having to hover over each icon first to see what they meant).

Some hours of tinkering later I ended up with my current design with only three main navigation elements. In between Photoshop iterations, I would constantly sketch UI on paper to refine my ideas. Just drawing any tangentially-related solution that came to mind helps organize my thoughts.

Design sketching
All I need is a simple sketchbook and a Micron 01 pen to sketch out concepts.

Keeping track of iterations

I’ve made it a habit over the past year to constantly take screenshots of my designs in progress. Either of Photoshop work or in-browser tweaks with Chrome dev tools. Over the course of this blog design I ended up with 67 screenshots. It’s nice to be able to go back and trace your thought process over again. Danny Hertz from Twitter had an interesting idea about how to automate this with Selenium, but I digress.

I’ve started using LayerVault to help me with this. It’s like GitHub for PSDs and you can visually flip through your PSD revisions.

Paul Stamatiou blog - LayerVault LayerVault showing a revision. I keep my palette in big blocks on the top of the PSD for easy picking.

The Sandboxed Cover Photo

Going along with my wanton lust for big photos, I also designed a second header to be displayed for particular posts and pages that have a cover photo defined in Jekyll’s YAML front matter. I built it (and incorporated some slick parallax scrolling) but decided not to use it. I’m not quite sold on it yet. Back to the sketch pad.

Cover photo header Example of a page with a cover photo. Still a work in progress.

I’ve got the blues

At this point, the design was coming together and needed to focus on typography, make a simple footer and some button styles.I created a muted blue shade button style to use throughout the site.

Paulstamatiou.com after content links Article publish date, share UI and related links

As we all know you should never use black so I chose a fairly muted color palette of desaturated blue shades. For one, blue is awesome and two cooler colors recede and since the content is the centerpiece here I want it to stand out. My main copy is a subtle warm gray, as warmer colors come to the foreground.

Not all displays are alike

I wanted to get some feedback on a PSD so I showed it to my friend Anand on my MacBook Air. I quickly realized that I could barely see parts of the design! The colors were way too light. I had been designing the whole time on a 27-inch Apple display and a 24-inch Dell display that made them seem like they had adequate contrast. Not so on any Apple laptop I tested it with.

Enter WCAG 2.0. Yes, another W3C acronym! The Web Content Accessibility Guidelines cover various aspects of website accessibility, including contrast minimums. There is actually a rating system for contrast! It takes text size, color and background color into account to come up with an AA or AAA level.

No need to worry, Lea Verou came up with a handy tool called contrast ratio. Punch in your color and background color to see if it has adequate contrast. But if you have to ask yourself if there’s enough contrast, there probably isn’t. I still need to darken the color of my footer links, they’re a bit light.

Serifs.. on the web?!?

I decided to go with the lovely serif Adelle for article headings and text. It’s the first time I’ve really used a serif on the web.

Blog design typography Trying to decide between 6 different Typekit typefaces. Chrome extension: WhatFont

I’ve grown up being told that you shouldn’t use serif typefaces on the web—the serifs themselves6 on certain curvy typefaces don’t lend well to being displayed with a grid of pixels unless the particular font has been properly hinted (unlikely). Well, my official stance is this all matters less when you’re dealing with HiDPI displays so I’m going for it.

If you want good type on Retina displays, stop discussing hinting et al. Just search for faces that happen to look good. Like the old days.

Erik Spiekermann

You can learn more about web typography with this interactive guide or The Elements of Typographic Style Applied to the Web.

Photo Layout Ideation

Up until this point, the homepage mockup in Photoshop just had an article excerpt, a list of recent posts and then a few photos. I thought it would be interesting to show more information about the photos on hover.

Original image metadata hover design First idea was to display photo title and camera metadata on hover. (Aston)

Blog homepage v5 iteration After I was satiated with hover style, I quickly coded it up ghetto-style directly in Chrome dev tools to see how the interaction felt. I’m glad I made a prototype first because I quickly realized that hovering over each photo and then displaying a full-width overlay was jarring and abrupt to the user.

It could also be inadvertantly triggered while scrolling down the page and it was unexpected. It taking up too much space and you couldn’t see the photo while reading the title. Not to mention how would I make this mobile web friendly? I wanted to have it always display on mobile but that wouldn’t work if it hid the image.

Then I thought about having it only appear on the bottom section of the image on hover.

Design: Image hover metadata Second iteration for photo hover metadata

That almost worked but then there was the case of longer photo titles wrapping and looking unpleasant. I decided to forget the image hover stuff and instead vertically stack the photo metadata and put it below the image in its own photo layout. Again, I quickly marked it up to see what the experience was like in the browser. It worked, but I had another problem now.

Having the same large site header and navigation took too much attention away from the photo itself.

Photo layouts 3up A few photo layout iterations.

I kept removing and de-emphasizing elements until it was clear the focus was on the photo. This brings up a tradeoff with usability though. This breaks the user’s expectation of a consistent and familiar header navigation that they are familiar with on all other pages of this blog. I decided that was an acceptable tradeoff when the user is moving into a photo viewing mode. I added left/right arrows that display on the image on hover, and bind the left/right cursor keys so visitors can browse other photos easily. Since photo pages are not long, there was a simplified footer with all the necessary navigation to get back to the homepage.

</design>

It was a bit challenging for me to explain how I approached the design of this blog. It’s one thing to explain the finished product but it’s another to explain all the iterations in between and how you got from one to the next. It’s a lot of fiddling, having a few rules of thumb and constantly questioning yourself about those designs.

Subtletly, something I also mentioned in my design crash course, is one of those rules of thumb for me. I very, very often find myself thinking “can I make that lighter?”, “can I remove this line?” and so on.

If there are any visual garnishings, such as a button block sheen or inner white glow on a menu bar background, that don’t serve a functional purpose (like grouping sets of elements together for Gestalt Law of Proximity), it can and likely should be de-emphasized by changing color, reducing opacity or removing it altogether.

I spent a few hours per day over the course of about a week and 19 PSDs coming up with this before doing any real coding aside from prototypes to test certain design decisions. The design of this blog is still a work in progress and I’m sure I’ll be changing things in the near future.

Share this post :) Part 2 coming soon

What’s your design process like? Have you worked on a mobile first or responsive site yet? Let me know in the comments below or shoot me a tweet.

Note: This post is part of a series documenting the design and development of this blog. The next part(s) covering development in great detail will be posted this coming week.

1 Several redesigns later I ended up making and releasing my own theme, 281, that ended up becoming an option on WordPress.com.

2 I remember paying more than $700 for my first 80GB SSD (and then another for RAID) in late 2008. Now they’re affordable and ubiquitious on any decent computer.

3 HTTP/2.0 to be submitted to IESG for consideration as a Proposed Standard in November 2014.

4 You can read more about Mobile First in Luke Wroblewski’s excellent book.

5 I know this is a controversial issue. Some people despise sites that don’t list publish date adjacent to the title. But as a site owner, it benefits me to put it after the post.

6 By my use of “serif” here I don’t mean the typeface but the small lines shooting off the edges of letters.


Enjoy this post? Click through and leave a comment. It will make my day. Designing a responsive, Retina-friendly site

Page 1 of 10