designblo.gs

About

Hello, and welcome to designblo.gs. The fun toy project by Zach Inglis. Hand picked (and consented by authors) quality design blogs for your consumption.

Have an idea of someone who should be on here?
Submit them!

• On Removing Barriers to Writing

  Posted about 6 hours ago by Avalonstar

  This’ll probably be the second and final post in mine in February. Has my fire been put out? Nope, but there’ve been a few roadblocks.

  
  

  The first? A plan I had hoped to hatch this month has been put on hold due to a couple of “components” being backordered.

  
  

  The second? It’s really easy for barriers like designing to get in the way of progress—almost too easy. It’s partly why I’ve left this place unfinished since I re-released. My content needed to look “good enough” for me to start writing and it worked! But now, I’m thinking of expanding on this place and it’s starting to get to me. This is what I’ll quickly jump into.

  
  

  I love Harmony, I always have. It’s run by some of the best guys in the industry in my Ordered List co-workers. However, there have been a few minor points that I’ve lived with ever since I moved my blog here. The main one is the online template editing. My problem with it? It’s online. As awesome as it is, it’s not Sublime Text. It’s not a desktop experience. So there’s a barrier. It’s a barrier to finishing a design, which is a barrier to me continuing to write—you see can see where this is going.

  
  

  So with a heavy heart, I’m going to be moving off of Harmony and onto GitHub Pages and Jekyll over the course of the next few weeks. It’ll be more of an experiment than anything else. I’ve said on multiple occasions that a static-site generator can’t hold my plans for Avalonstar, but with further research, I think it can. By bringing blogging to the same level as my development process, I hope to effectively knock down these barriers.

  
  

  That said, tonight I’ve thrown Avalonstar up on GitHub in preparation for the move. Let’s hope this goes well!

  

• Prefixed Classes in Bootstrap

  Posted 2 days ago by Jon Snook

  Mark Otto talks briefly about their decision to use prefixed classes with Bootstrap.
  

  
  

  
  

  "Prefixed classes guide developers towards a simpler and more maintainable direction for building an extensive CSS design system."

  
  

  
  

  He goes on to say...

  
  

  
  

  "There’s no bleeding of styles or behavior from one component to another here because we treat components in a “successful state” as an idea across the design system. That is to say, we have a shared idea of what “success” looks for buttons and alerts, but the execution is scoped entirely to each independent component. No questions of where common styles are used and no concern of unintended effects, making each component more durable and flexible."

  
  

  
  

  If you were wondering what an example implementation of SMACSS might look like? Bootstrap is a perfect example.

  
  
  

  

• Prefixed Classes in Bootstrap

  Posted 2 days ago by Jon Snook

  Mark Otto talks briefly about their decision to use prefixed classes with Bootstrap.
  

  
  

  
  

  "Prefixed classes guide developers towards a simpler and more maintainable direction for building an extensive CSS design system."

  
  

  
  

  He goes on to say...

  
  

  
  

  "There’s no bleeding of styles or behavior from one component to another here because we treat components in a “successful state” as an idea across the design system. That is to say, we have a shared idea of what “success” looks for buttons and alerts, but the execution is scoped entirely to each independent component. No questions of where common styles are used and no concern of unintended effects, making each component more durable and flexible."

  
  

  
  

  If you were wondering what an example implementation of SMACSS might look like? Bootstrap is a perfect example.

  
  
  

  

• Prefixed Classes in Bootstrap

  Posted 2 days ago by Jon Snook

  Mark Otto talks briefly about their decision to use prefixed classes with Bootstrap.
  

  
  

  
  

  "Prefixed classes guide developers towards a simpler and more maintainable direction for building an extensive CSS design system."

  
  

  
  

  He goes on to say...

  
  

  
  

  "There’s no bleeding of styles or behavior from one component to another here because we treat components in a “successful state” as an idea across the design system. That is to say, we have a shared idea of what “success” looks for buttons and alerts, but the execution is scoped entirely to each independent component. No questions of where common styles are used and no concern of unintended effects, making each component more durable and flexible."

  
  

  
  

  If you were wondering what an example implementation of SMACSS might look like? Bootstrap is a perfect example.

  
  
  

  

• A Responsive Experience

  Posted 8 days ago by Mark Boulton

  Since I saw Ethan’s talk in An Event Apart in Seattle 2010, I’ve been thinking a lot about Responsive Design. Not just the layout techniques Ethan gave name to and wrote the book on: fluid grids, plus media queries and … Continue reading →

• I Love Adaptive Web Design poster contest

  Posted 9 days ago by Veerle

  It really has been a while since I last organized a creative contest. Last one was in 2008, where I asked people to design a poster on the topic of "What is Graphic design". The result back then of people entering via the Flickr pool was truly beyond my expectations. The quality of submitted artwork was high and I had a hard time picking out 10 winners. Today, I have good news for graphic design enthusiasts who are looking for a cool creative challenge… I've partnered up with Easy Readers to organize another poster contest!

  
  
  

  
  

  The I ♥Adaptive Web DesignPoster Contest

  
  

  
  

  The contest

  
  

  As some of you know, I've designed the book cover for "Adaptive Web Design", by Aaron Gustafson, published by Easy Readers. When Aaron visited Belgium last November, we started chatting about the idea of doing a creative contest around his book, and so a new contest was born…

  
  

  
  

  
  
  

  Adaptive Web Design Book

  
  

  
  

  What do I do?

  
  

  We want you to design a poster celebrating your passion for adaptive web design. Here is the idea we came up with. Starting from the Illustrator source files of the cover design, you are free to design your own poster design that doesn't have to promote the book, just the concept. There are no creative boundaries, so you have total carte blanche.

  When you’ve completed your masterpiece(s)—please limit yourself to 3 entries—upload them to the I ♥ Adaptive Web Design Poster Contest Flickr Group (a Flickr account is required). We’ll give you until the 16th of March (a little over a month) to turn in your poster concepts. See below for specs, templates & other details.

  
  

  
  

  What's in it for me?

  
  

  We will choose up to 10 winners, each of whom will be given an awesome prize package stuffed with goodies from our sponsors.

  
  

  All winners will receive

  
  

  
  
  • a limited edition run of high-quality posters (digital or silk screened) that will be sold on Fab.com, with 100% of the profits from each poster sale going to the charity of your choosing;
  
  
  • a copy of your poster;
  
  
  • a 1-year subscription to .net Magazine;
  
  
  • 2 Postcard Packs: 1× all 10 winning designs, 1× 10 postcards with your design, compliments of Wonder Press;
  
  
  • 1 custom StickerBook, compliments of MOO; and
  
  
  • A paperback of Adaptive Web Design, signed by both Aaron Gustafson and Veerle Pieters.
  
  

  
  
  

  Of course, the top entries get even more…

  Grand Prize Winner

  
  

  
  
  • Creative Suite 5.5 Design Premium compliments of Adobe
  
  
  • Xbox 360 250GB Console with Kinect compliments of Internet Explorer
  
  

  1st Runner Up

  
  

  
  
  • Creative Suite 5.5 Web Premium compliments of Adobe
  
  
  • Nintendo 3DS compliments of EllisLab
  
  

  2nd Runner Up

  
  

  
  
  • County Fair Box Set compliments of FieldNotes
  
  
  • ExpressionEngine license compliments of EllisLab
  
  
  • Building
    an ExpressionEngine 2 Site compliments of EllisLab
  
  

  3rd & 4th Runners Up

  
  

  
  
  • “Adaptive Web Design” Kit compliments of FieldNotes
  
  
  • ExpressionEngine license compliments of EllisLab
  
  
  • Building an ExpressionEngine 2 Site compliments of EllisLab
  
  

  Winners will also have their posters promoted on this site, and on the Easy Readers page as well as via Twitter, Facebook, etc. In fact, we will celebrate the hell out of you and your amazing work.

  Who will be the judge?

  
  

  Your poster ideas will be judged by Aaron Gustafson & the Easy Readers team, and myself. We will announce the winners by the 26th of March and will notify you via your Flickr account if you’re one of them.

  What are the specs?

  
  

  
  
  • Posters should not exceed 13″ × 19″.
  
  
  • If you want full-bleed, give yourself ¼″.
  
  
  • Vector files are preferred, but if you prefer raster, make sure your source files are at least 300 dpi.
  
  
  • If you design in vector, but use raster effects, make sure they are applied at 300 dpi too.
  
  
  • Use CYMK please. Note: You will probably want to color-correct the low-resolution (72 dpi) file you upload to the Flickr Group as it should be RGB. But don’t overwrite your original CMYK version in case you win.
  
  

  
  

  To make life easier for you, I've prepared a template document in both Illustrator and Photoshop that have the correct dimensions, color mode and resolution settings. The rest is completely up to you… you have total creative freedom. Just remember, if you use additional graphic material to compose your artwork, make sure you OWN THE RIGHTS to do so.

  
  

  
  
  • Original Adaptive Web Design Cover Art
  
  
  • Poster Template for Illustrator
  
  
  • Poster Template for Photoshop (with adjusted dimensions of 13.5″ x 19.5″ for bleed)
  
  

  
  

  Depending on your preference and/or how the poster file is constructed, we will consider screen-printing posters, but your files will need to be designed specifically for this process: vector based & color separated. You may choose between 2 & 5 colors for screen printing and have the option of including specific pantone requests. Check out these resources if you’re interested in designing for a screen print run:

  
  

  
  
  • Full Color Screen Printing with Photoshop
  
  
  • Super-Slick, Screen Printing Separations with Illustrator
  
  

  How to join?

  
  

  Here are the steps and info on how to enter the contest:

  
  
  • Download the Original Adaptive Web Design Cover Art, and the Poster Template for Illustrator or Poster Template for Photoshop to start from.
  
  
  • Do your magic, and create an awesome poster, using one of the template files. This way you are using the correct dimensions and other settings from the start. Use any elements you like from my original design, or use none at all.
  
  
  • Save a low resolution (72 dpi) RGB copy of your poster in JPEG format, and upload this version to the contest Flickr pool pool "I ♥ AWD Poster Contest" before March 16th 2012. Make sure to save your original design in its high resolution, in CMYK mode.
  
  
  • When uploading your design make sure to stick to Flickr's guidelines, and don't forget to set the content type of your poster to "other - art, illustration, CGI, etc.".
  
  
  • If don't have a Flickr account already, sign up for one, it's free. Once you are signed up, become a member of the group by going to the group and click the "Join This Group" link.
  
  

  Take a moment to thank the sponsors

  
  

  We could not have done it without them.

  
  

  
  

  
  

  
  
  • 
  
  
  • 
  
  
  • 
  
  
  • 
  
  
  • 
  
  
  • 
  
  
  • 
  
  
  • 
  
  

  
  

  
  

  
  

  Good luck!

  
  

  Make sure to enter your design before the deadline of March 16th 2012. Have fun and best of luck!

  

• A Year of Sun with Mr. Persol

  Posted 14 days ago by Veerle

  Most of the folks here know that I have a great affection for vectors. I'm always on the look-out for great work that involves iIllustrations. The result of that hunt is shown on my Inspiration Stream that I try to update once a week. I just came across this beautiful illustrative retro-styled animated commercial that made my heart skip a beat.

  
  

  Retro-styled animated short

  
  

  This beautiful illustrative retro-styled animated commercial was created for Italian eyewear brand, Persol. The animated short was directed by Kevin Dart and Stéphane Coëdel and produced by Passion Pictures in London for the advertising agency Winkreative. Other credit goes to:

  
  
  • Jeremy Pires // Animator
  
  
  • Nelson Boles // Animator
  
  
  • Celine Desrumaux // Compositor
  
  
  • Chris Turnham // Background Painter
  
  
  • Dave Newby // Music & Sound
  
  

  
  

  Fantastic staging & great layouts

  
  

  This animated short is so well executed. The lighting and colors are just right. The light effects of the sunlight in many of the scenes look so real that you almost immerse in it and feel its warmth by just looking at it. The color-work throughout this movie is just gorgeous and makes me happy as a color lover at heart. The chosen scenes in combo with this retro really does its magic. Beautiful typography and just the right music makes it complete imho. This cheerful vibe makes me happy and I like that.

  Looks That Kill

  
  

  To some of my die-hard followers this may ring a bell since I've linked to another illustration movie on Twitter some time ago that got me excited as well. It's the same two people, Kevin Dart and Stéphane Coëdel that also collaborated on the a James Bond inspired animated film called Yuki 7: Looks That Kill.

  
  

  
  

  
  

  

• My Notes on Writing an E-book

  Posted 14 days ago by Jon Snook

  So, yeah. I wrote an e-book. It has been an interesting experience and I thought I'd share a few random thoughts on how things have gone so far.

  Backwards

  When I first started down the path of writing the SMACSS e-book, I had intended it to be either an e-book or a printed book. After months of writing and not getting enough written, I released what I wrote as a web site. A free web site at that. However, I also released it with the intention of continually adding new content to it until I had reached a point where I had a "finished product".

  Right away, though, many people asked for the site in an e-book and even a printed format. With my intention to add more content, a printed format just wasn't (and still isn't) a practical option. However, an e-book could be created and updated over time. And so I started down the path of converting the HTML content into other formats.

  Knowing my preference, I decided to try and put together the e-book in different formats, since each format has its own pros and cons. I did PDF, ePub, and mobi.

  Mobi is the format used on the Kindle and other e-ink readers. It lacks a lot of control over formatting and was the lowest common denominator. ePub is the format that Apple uses and was a format that I wanted to push the limits on—even if maybe just a little bit. Lastly, I also went with PDF, which has great support across most platforms.

  Once I stop writing new content, I may very well do a print version, too. This feels rather backwards from how a publisher would normally do it: print to e-book to free. I went from free to e-book to (maybe one day) print.

  Working in ePub

  Trying to find accurate and up-to-date information on creating an ePub file targetted for iOS proved to be surprisingly difficult. Searches revealed information that was often a few years old and targetting older versions of the spec. Apple also supports non-standard features like embedded audio and video. The problem was trying to figure out what some things wouldn't work.

  The ePub format, if you're not familiar, is just a zip file with a bunch of XML and HTML content. The XML defines the assets and table of contents and the content itself is in an HTML format. I ended up using Sigil to expediate the conversion but discovered that Sigil sticks heavily to the spec. Embedding HTML5 video, for example, will get stripped out automatically without any clear messaging telling you that the application has done so. That was frustrating.

  I was able to use font-face embedding, which I liked. It allowed me to maintain elements of the brand from the web site and bring them into the e-book. I was able to buy an extended license to embed Quatro Slab in the e-book.

  Hand coding the files turned out to be a better solution, although I still find updating the table of contents XML a hassle.

  Testing the ePub on my iPhone or iPad was somewhat straightforward. Just drop the ePub file into iTunes and sync it to the device. The problem is that the device caches information about the book so dropping in an updated file doesn't automatically update the book on the device with the latest version. Deleting from the device and deleting from iTunes and dragging the file back over may work. Sometimes. But not all the time. I never did find a reliable way to easy push new book updates to the device.

  Working in Mobi

  Short and sweet: with such limited functionality, I used Calibre to convert from the ePub version to the mobi version. I had a friend try it on the device and went with it as is. I didn't make any other changes to get the e-book prepared for the Kindle. It was this version that I ended up uploading to Amazon (which I'll talk about in a bit).

  Working in PDF

  I used Pages and manually copied all the content into it, setting up styles and managed the layout of the book manually. I think I used A4, which is unusually large. The next version of the PDF will likely use half-letter size. This turns out to be the same size as the A Book Apart series of books. If and when I go to print, the half-letter size should hopefully be easier to print.

  Manually laying out the content is a chore and means that minor edits to the book have to be done in multiple places. I'm looking at some HTML to PDF options to make this step easier but so far, I haven't found anything that's perfect.

  Working in DocBook

  Wait, what? What is DocBook? Working in multiple formats, I longed for a way to build in a single format and then export into all of the other formats I needed quickly and easily. I chatted with folks at a couple different publishers and they said they used DocBook. It seemed like the way to go.

  Unfortunately, I didn't like the HTML that was getting created. This would ultimately be the HTML code that would appear on SMACSS.com and in the ePub version (although I suspect nobody would have seen it there). Just having it on the web site meant that I was more particular about the output.

  DocBook is an XML format and getting my content into the format was easy enough. Getting it out, however, was mired in DIV tags 4 or 5 levels deep. Not an example I wanted on my web site. The XML to HTML conversion happens with a set of premade XSL files. You can tailor your own XSL files to get the output that you wanted. However, after finding myself working for hours over the output of each element of code, I gave up.

  If you didn't care about the HTML or were okay with the HTML the DocBook XSL generates for you then DocBook might be a good fit for you. For me? It definitely wasn't.

  Publishing with Amazon

  I decided to publish to Amazon as a way of possibly having people randomly come across the book who might not otherwise do so. The sales of the book on Amazon have done quite well, exceeding the number of $15 ebook sales through my own site. The reporting from Amazon's site isn't really the easiest for tallying up total sales on a daily basis. However, I'd estimate that I've sold almost 200 copies of the ebook through Amazon alone.

  Amazon has different royalty points. If the book price is over $10 then you only get 35% from each sale. If the book price is under $10 then you have the option of 35% or 70%. What's confusing is that even though I chose the 70% option (and priced the book below the $10 threshold to ensure that I could), not every sale automatically results in 70% royalties. I must've missed some fine print somewhere because a third of e-books sold via Amazon US only got the 35% royalty.

  One of the other downfalls with using Amazon is that you don't get access to any customer information. You don't know how they found your book or have any way of contacting them. This is okay if you're just doing the book and nothing else. But I have the workshop and potentially other things down the road that people may be interested in. I'll never know.

  Why not Apple iBookstore or Nook?

  Both Apple and Barnes and Noble require tax information to be supplied up front, which I didn't have. As a Canadian, this usually means filing for a special tax number that is filed with a W8BEN form. As an American-Canadian, I should actually be applying for a SSN and filing US taxes. Way more effort than I really wanted to put into it.

  As I learned afterwards, Amazon has the same requirements. If you don't provide the information, it deducts a hefty portion off of the cheque it sends you. That I'm already selling it for less than money than I sell it on my web site and that I already lose 30-65% off the top for royalties makes this less than ideal.

  Both Apple and Barnes and Noble also suffer the same problem that Amazon does: they take a considerable share of each sale and provide you no customer information in return.

  Customer Contact

  Before I launched the site, I set up a form to subscribe to a mailing list. I had approximately 500 people sign up. When I launched the HTML-only site, I sent a campaign to the list and then shuttered the list.

  That was stupid.

  As I began work on the e-book, I set up a new list and hoped that everybody who had subscribed before would resubscribe again. Thankfully, the subscriber count has climbed its way back up. Don't let people fool you: e-mail isn't dead. E-mail sent to people who want to receive it are very attentive. They'll click through. They'll read what you have to say. You have their attention.

  Social Networks

  I relied heavily on my Twitter stream to get the word out but people often miss a tweet. I have friends who still don't realize that I've written the e-book. Go figure.

  But I also realized that I didn't take advantage of Facebook or Google+. I'm getting better. I'm trying to use the avenues that I have available to me. As I work on the workshops in addition to the extra content, I need to remember that not everybody hangs on my every word on Twitter.

  Advertising

  To put it bluntly: it has been a waste of time. If someone is successful with advertising, it's definitely not me. I spent nearly $1000 on advertising between Google AdWords and Fusion Ads (the very ads on this site) and while I got click throughs, few resulted in actual sales. Would a sustained ad have provided better results? Would someone who understands ad word targetting have done a better job? Maybe.

  Are there other advertising avenues that I could try? Yes. I didn't try Facebook and I'd be really curious to see how it performs versus everything else. I wasted time (and money) on the other approaches and therefore I'm reluctant to invest the time in anything else.

  Tiered Pricing

  With the intent of producing more content, I wanted to reward people who were willing to pay up front for content that might be weeks or months in the making. I created the site membership and tried to make it as enticing as possible. For those that weren't as patient, I offered up just the e-books and the Kindle version as options.

  Success?

  First of all, I set my sights low. I expected most people would buy just the e-book with a few people going for the site membership. I expected to sell maybe 50 e-books within the first couple months. As of this writing, which is 2 1/2 months from when I launched the e-book, I've sold 569 site memberships and 106 e-books (and then close to 200 Kindle copies on Amazon). (A small caveat that many of the site memberships sold during the one-day sale I held on Christmas Day. That response also blew me away. I figured y'all would be eating dinner or opening presents!)

  Clearly I set my expectations too low.

  Should you self-publish?

  
  

  I have made more from self-publishing than I have from writing for traditional publishers. I took more risks, paying for an illustrator, font rights, designing all the collateral material, paying for advertising, building the payment gateway, and investing my time in writing the book itself. Having learned as much as I have in the process has been a huge reward in itself. Having the book do as well as it has has been a fantastic bonus.

  I recognize that I've built up an audience over the years and that I've been able to take advantage of that audience to get the word out. I believe that self-publishing offers up the greatest of flexibility and the greatest of rewards. I've seen lesser known individuals launch their own self-published efforts and have done similarly well.

  It's cliché but if I can do it, so can you!

  
  
  

  

• My Notes on Writing an E-book

  Posted 14 days ago by Jon Snook

  So, yeah. I wrote an e-book. It has been an interesting experience and I thought I'd share a few random thoughts on how things have gone so far.

  Backwards

  When I first started down the path of writing the SMACSS e-book, I had intended it to be either an e-book or a printed book. After months of writing and not getting enough written, I released what I wrote as a web site. A free web site at that. However, I also released it with the intention of continually adding new content to it until I had reached a point where I had a "finished product".

  Right away, though, many people asked for the site in an e-book and even a printed format. With my intention to add more content, a printed format just wasn't (and still isn't) a practical option. However, an e-book could be created and updated over time. And so I started down the path of converting the HTML content into other formats.

  Knowing my preference, I decided to try and put together the e-book in different formats, since each format has its own pros and cons. I did PDF, ePub, and mobi.

  Mobi is the format used on the Kindle and other e-ink readers. It lacks a lot of control over formatting and was the lowest common denominator. ePub is the format that Apple uses and was a format that I wanted to push the limits on—even if maybe just a little bit. Lastly, I also went with PDF, which has great support across most platforms.

  Once I stop writing new content, I may very well do a print version, too. This feels rather backwards from how a publisher would normally do it: print to e-book to free. I went from free to e-book to (maybe one day) print.

  Working in ePub

  Trying to find accurate and up-to-date information on creating an ePub file targetted for iOS proved to be surprisingly difficult. Searches revealed information that was often a few years old and targetting older versions of the spec. Apple also supports non-standard features like embedded audio and video. The problem was trying to figure out what some things wouldn't work.

  The ePub format, if you're not familiar, is just a zip file with a bunch of XML and HTML content. The XML defines the assets and table of contents and the content itself is in an HTML format. I ended up using Sigil to expediate the conversion but discovered that Sigil sticks heavily to the spec. Embedding HTML5 video, for example, will get stripped out automatically without any clear messaging telling you that the application has done so. That was frustrating.

  I was able to use font-face embedding, which I liked. It allowed me to maintain elements of the brand from the web site and bring them into the e-book. I was able to buy an extended license to embed Quatro Slab in the e-book.

  Hand coding the files turned out to be a better solution, although I still find updating the table of contents XML a hassle.

  Testing the ePub on my iPhone or iPad was somewhat straightforward. Just drop the ePub file into iTunes and sync it to the device. The problem is that the device caches information about the book so dropping in an updated file doesn't automatically update the book on the device with the latest version. Deleting from the device and deleting from iTunes and dragging the file back over may work. Sometimes. But not all the time. I never did find a reliable way to easy push new book updates to the device.

  Working in Mobi

  Short and sweet: with such limited functionality, I used Calibre to convert from the ePub version to the mobi version. I had a friend try it on the device and went with it as is. I didn't make any other changes to get the e-book prepared for the Kindle. It was this version that I ended up uploading to Amazon (which I'll talk about in a bit).

  Working in PDF

  I used Pages and manually copied all the content into it, setting up styles and managed the layout of the book manually. I think I used A4, which is unusually large. The next version of the PDF will likely use half-letter size. This turns out to be the same size as the A Book Apart series of books. If and when I go to print, the half-letter size should hopefully be easier to print.

  Manually laying out the content is a chore and means that minor edits to the book have to be done in multiple places. I'm looking at some HTML to PDF options to make this step easier but so far, I haven't found anything that's perfect.

  Working in DocBook

  Wait, what? What is DocBook? Working in multiple formats, I longed for a way to build in a single format and then export into all of the other formats I needed quickly and easily. I chatted with folks at a couple different publishers and they said they used DocBook. It seemed like the way to go.

  Unfortunately, I didn't like the HTML that was getting created. This would ultimately be the HTML code that would appear on SMACSS.com and in the ePub version (although I suspect nobody would have seen it there). Just having it on the web site meant that I was more particular about the output.

  DocBook is an XML format and getting my content into the format was easy enough. Getting it out, however, was mired in DIV tags 4 or 5 levels deep. Not an example I wanted on my web site. The XML to HTML conversion happens with a set of premade XSL files. You can tailor your own XSL files to get the output that you wanted. However, after finding myself working for hours over the output of each element of code, I gave up.

  If you didn't care about the HTML or were okay with the HTML the DocBook XSL generates for you then DocBook might be a good fit for you. For me? It definitely wasn't.

  Publishing with Amazon

  I decided to publish to Amazon as a way of possibly having people randomly come across the book who might not otherwise do so. The sales of the book on Amazon have done quite well, exceeding the number of $15 ebook sales through my own site. The reporting from Amazon's site isn't really the easiest for tallying up total sales on a daily basis. However, I'd estimate that I've sold almost 200 copies of the ebook through Amazon alone.

  Amazon has different royalty points. If the book price is over $10 then you only get 35% from each sale. If the book price is under $10 then you have the option of 35% or 70%. What's confusing is that even though I chose the 70% option (and priced the book below the $10 threshold to ensure that I could), not every sale automatically results in 70% royalties. I must've missed some fine print somewhere because a third of e-books sold via Amazon US only got the 35% royalty.

  One of the other downfalls with using Amazon is that you don't get access to any customer information. You don't know how they found your book or have any way of contacting them. This is okay if you're just doing the book and nothing else. But I have the workshop and potentially other things down the road that people may be interested in. I'll never know.

  Why not Apple iBookstore or Nook?

  Both Apple and Barnes and Noble require tax information to be supplied up front, which I didn't have. As a Canadian, this usually means filing for a special tax number that is filed with a W8BEN form. As an American-Canadian, I should actually be applying for a SSN and filing US taxes. Way more effort than I really wanted to put into it.

  As I learned afterwards, Amazon has the same requirements. If you don't provide the information, it deducts a hefty portion off of the cheque it sends you. That I'm already selling it for less than money than I sell it on my web site and that I already lose 30-65% off the top for royalties makes this less than ideal.

  Both Apple and Barnes and Noble also suffer the same problem that Amazon does: they take a considerable share of each sale and provide you no customer information in return.

  Customer Contact

  Before I launched the site, I set up a form to subscribe to a mailing list. I had approximately 500 people sign up. When I launched the HTML-only site, I sent a campaign to the list and then shuttered the list.

  That was stupid.

  As I began work on the e-book, I set up a new list and hoped that everybody who had subscribed before would resubscribe again. Thankfully, the subscriber count has climbed its way back up. Don't let people fool you: e-mail isn't dead. E-mail sent to people who want to receive it are very attentive. They'll click through. They'll read what you have to say. You have their attention.

  Social Networks

  I relied heavily on my Twitter stream to get the word out but people often miss a tweet. I have friends who still don't realize that I've written the e-book. Go figure.

  But I also realized that I didn't take advantage of Facebook or Google+. I'm getting better. I'm trying to use the avenues that I have available to me. As I work on the workshops in addition to the extra content, I need to remember that not everybody hangs on my every word on Twitter.

  Advertising

  To put it bluntly: it has been a waste of time. If someone is successful with advertising, it's definitely not me. I spent nearly $1000 on advertising between Google AdWords and Fusion Ads (the very ads on this site) and while I got click throughs, few resulted in actual sales. Would a sustained ad have provided better results? Would someone who understands ad word targetting have done a better job? Maybe.

  Are there other advertising avenues that I could try? Yes. I didn't try Facebook and I'd be really curious to see how it performs versus everything else. I wasted time (and money) on the other approaches and therefore I'm reluctant to invest the time in anything else.

  Tiered Pricing

  With the intent of producing more content, I wanted to reward people who were willing to pay up front for content that might be weeks or months in the making. I created the site membership and tried to make it as enticing as possible. For those that weren't as patient, I offered up just the e-books and the Kindle version as options.

  Success?

  First of all, I set my sights low. I expected most people would buy just the e-book with a few people going for the site membership. I expected to sell maybe 50 e-books within the first couple months. As of this writing, which is 2 1/2 months from when I launched the e-book, I've sold 569 site memberships and 106 e-books (and then close to 200 Kindle copies on Amazon). (A small caveat that many of the site memberships sold during the one-day sale I held on Christmas Day. That response also blew me away. I figured y'all would be eating dinner or opening presents!)

  Clearly I set my expectations too low.

  Should you self-publish?

  
  

  I have made more from self-publishing than I have from writing for traditional publishers. I took more risks, paying for an illustrator, font rights, designing all the collateral material, paying for advertising, building the payment gateway, and investing my time in writing the book itself. Having learned as much as I have in the process has been a huge reward in itself. Having the book do as well as it has has been a fantastic bonus.

  I recognize that I've built up an audience over the years and that I've been able to take advantage of that audience to get the word out. I believe that self-publishing offers up the greatest of flexibility and the greatest of rewards. I've seen lesser known individuals launch their own self-published efforts and have done similarly well.

  It's cliché but if I can do it, so can you!

  
  
  

  

• My Notes on Writing an E-book

  Posted 14 days ago by Jon Snook

  So, yeah. I wrote an e-book. It has been an interesting experience and I thought I'd share a few random thoughts on how things have gone so far.

  Backwards

  When I first started down the path of writing the SMACSS e-book, I had intended it to be either an e-book or a printed book. After months of writing and not getting enough written, I released what I wrote as a web site. A free web site at that. However, I also released it with the intention of continually adding new content to it until I had reached a point where I had a "finished product".

  Right away, though, many people asked for the site in an e-book and even a printed format. With my intention to add more content, a printed format just wasn't (and still isn't) a practical option. However, an e-book could be created and updated over time. And so I started down the path of converting the HTML content into other formats.

  Knowing my preference, I decided to try and put together the e-book in different formats, since each format has its own pros and cons. I did PDF, ePub, and mobi.

  Mobi is the format used on the Kindle and other e-ink readers. It lacks a lot of control over formatting and was the lowest common denominator. ePub is the format that Apple uses and was a format that I wanted to push the limits on—even if maybe just a little bit. Lastly, I also went with PDF, which has great support across most platforms.

  Once I stop writing new content, I may very well do a print version, too. This feels rather backwards from how a publisher would normally do it: print to e-book to free. I went from free to e-book to (maybe one day) print.

  Working in ePub

  Trying to find accurate and up-to-date information on creating an ePub file targetted for iOS proved to be surprisingly difficult. Searches revealed information that was often a few years old and targetting older versions of the spec. Apple also supports non-standard features like embedded audio and video. The problem was trying to figure out what some things wouldn't work.

  The ePub format, if you're not familiar, is just a zip file with a bunch of XML and HTML content. The XML defines the assets and table of contents and the content itself is in an HTML format. I ended up using Sigil to expediate the conversion but discovered that Sigil sticks heavily to the spec. Embedding HTML5 video, for example, will get stripped out automatically without any clear messaging telling you that the application has done so. That was frustrating.

  I was able to use font-face embedding, which I liked. It allowed me to maintain elements of the brand from the web site and bring them into the e-book. I was able to buy an extended license to embed Quatro Slab in the e-book.

  Hand coding the files turned out to be a better solution, although I still find updating the table of contents XML a hassle.

  Testing the ePub on my iPhone or iPad was somewhat straightforward. Just drop the ePub file into iTunes and sync it to the device. The problem is that the device caches information about the book so dropping in an updated file doesn't automatically update the book on the device with the latest version. Deleting from the device and deleting from iTunes and dragging the file back over may work. Sometimes. But not all the time. I never did find a reliable way to easy push new book updates to the device.

  Working in Mobi

  Short and sweet: with such limited functionality, I used Calibre to convert from the ePub version to the mobi version. I had a friend try it on the device and went with it as is. I didn't make any other changes to get the e-book prepared for the Kindle. It was this version that I ended up uploading to Amazon (which I'll talk about in a bit).

  Working in PDF

  I used Pages and manually copied all the content into it, setting up styles and managed the layout of the book manually. I think I used A4, which is unusually large. The next version of the PDF will likely use half-letter size. This turns out to be the same size as the A Book Apart series of books. If and when I go to print, the half-letter size should hopefully be easier to print.

  Manually laying out the content is a chore and means that minor edits to the book have to be done in multiple places. I'm looking at some HTML to PDF options to make this step easier but so far, I haven't found anything that's perfect.

  Working in DocBook

  Wait, what? What is DocBook? Working in multiple formats, I longed for a way to build in a single format and then export into all of the other formats I needed quickly and easily. I chatted with folks at a couple different publishers and they said they used DocBook. It seemed like the way to go.

  Unfortunately, I didn't like the HTML that was getting created. This would ultimately be the HTML code that would appear on SMACSS.com and in the ePub version (although I suspect nobody would have seen it there). Just having it on the web site meant that I was more particular about the output.

  DocBook is an XML format and getting my content into the format was easy enough. Getting it out, however, was mired in DIV tags 4 or 5 levels deep. Not an example I wanted on my web site. The XML to HTML conversion happens with a set of premade XSL files. You can tailor your own XSL files to get the output that you wanted. However, after finding myself working for hours over the output of each element of code, I gave up.

  If you didn't care about the HTML or were okay with the HTML the DocBook XSL generates for you then DocBook might be a good fit for you. For me? It definitely wasn't.

  Publishing with Amazon

  I decided to publish to Amazon as a way of possibly having people randomly come across the book who might not otherwise do so. The sales of the book on Amazon have done quite well, exceeding the number of $15 ebook sales through my own site. The reporting from Amazon's site isn't really the easiest for tallying up total sales on a daily basis. However, I'd estimate that I've sold almost 200 copies of the ebook through Amazon alone.

  Amazon has different royalty points. If the book price is over $10 then you only get 35% from each sale. If the book price is under $10 then you have the option of 35% or 70%. What's confusing is that even though I chose the 70% option (and priced the book below the $10 threshold to ensure that I could), not every sale automatically results in 70% royalties. I must've missed some fine print somewhere because a third of e-books sold via Amazon US only got the 35% royalty.

  One of the other downfalls with using Amazon is that you don't get access to any customer information. You don't know how they found your book or have any way of contacting them. This is okay if you're just doing the book and nothing else. But I have the workshop and potentially other things down the road that people may be interested in. I'll never know.

  Why not Apple iBookstore or Nook?

  Both Apple and Barnes and Noble require tax information to be supplied up front, which I didn't have. As a Canadian, this usually means filing for a special tax number that is filed with a W8BEN form. As an American-Canadian, I should actually be applying for a SSN and filing US taxes. Way more effort than I really wanted to put into it.

  As I learned afterwards, Amazon has the same requirements. If you don't provide the information, it deducts a hefty portion off of the cheque it sends you. That I'm already selling it for less than money than I sell it on my web site and that I already lose 30-65% off the top for royalties makes this less than ideal.

  Both Apple and Barnes and Noble also suffer the same problem that Amazon does: they take a considerable share of each sale and provide you no customer information in return.

  Customer Contact

  Before I launched the site, I set up a form to subscribe to a mailing list. I had approximately 500 people sign up. When I launched the HTML-only site, I sent a campaign to the list and then shuttered the list.

  That was stupid.

  As I began work on the e-book, I set up a new list and hoped that everybody who had subscribed before would resubscribe again. Thankfully, the subscriber count has climbed its way back up. Don't let people fool you: e-mail isn't dead. E-mail sent to people who want to receive it are very attentive. They'll click through. They'll read what you have to say. You have their attention.

  Social Networks

  I relied heavily on my Twitter stream to get the word out but people often miss a tweet. I have friends who still don't realize that I've written the e-book. Go figure.

  But I also realized that I didn't take advantage of Facebook or Google+. I'm getting better. I'm trying to use the avenues that I have available to me. As I work on the workshops in addition to the extra content, I need to remember that not everybody hangs on my every word on Twitter.

  Advertising

  To put it bluntly: it has been a waste of time. If someone is successful with advertising, it's definitely not me. I spent nearly $1000 on advertising between Google AdWords and Fusion Ads (the very ads on this site) and while I got click throughs, few resulted in actual sales. Would a sustained ad have provided better results? Would someone who understands ad word targetting have done a better job? Maybe.

  Are there other advertising avenues that I could try? Yes. I didn't try Facebook and I'd be really curious to see how it performs versus everything else. I wasted time (and money) on the other approaches and therefore I'm reluctant to invest the time in anything else.

  Tiered Pricing

  With the intent of producing more content, I wanted to reward people who were willing to pay up front for content that might be weeks or months in the making. I created the site membership and tried to make it as enticing as possible. For those that weren't as patient, I offered up just the e-books and the Kindle version as options.

  Success?

  First of all, I set my sights low. I expected most people would buy just the e-book with a few people going for the site membership. I expected to sell maybe 50 e-books within the first couple months. As of this writing, which is 2 1/2 months from when I launched the e-book, I've sold 569 site memberships and 106 e-books (and then close to 200 Kindle copies on Amazon). (A small caveat that many of the site memberships sold during the one-day sale I held on Christmas Day. That response also blew me away. I figured y'all would be eating dinner or opening presents!)

  Clearly I set my expectations too low.

  Should you self-publish?

  
  

  I have made more from self-publishing than I have from writing for traditional publishers. I took more risks, paying for an illustrator, font rights, designing all the collateral material, paying for advertising, building the payment gateway, and investing my time in writing the book itself. Having learned as much as I have in the process has been a huge reward in itself. Having the book do as well as it has has been a fantastic bonus.

  I recognize that I've built up an audience over the years and that I've been able to take advantage of that audience to get the word out. I believe that self-publishing offers up the greatest of flexibility and the greatest of rewards. I've seen lesser known individuals launch their own self-published efforts and have done similarly well.

  It's cliché but if I can do it, so can you!

  
  
  

  

• My Notes on Writing an E-book

  Posted 14 days ago by Jon Snook

  So, yeah. I wrote an e-book. It has been an interesting experience and I thought I'd share a few random thoughts on how things have gone so far.

  Backwards

  When I first started down the path of writing the SMACSS e-book, I had intended it to be either an e-book or a printed book. After months of writing and not getting enough written, I released what I wrote as a web site. A free web site at that. However, I also released it with the intention of continually adding new content to it until I had reached a point where I had a "finished product".

  Right away, though, many people asked for the site in an e-book and even a printed format. With my intention to add more content, a printed format just wasn't (and still isn't) a practical option. However, an e-book could be created and updated over time. And so I started down the path of converting the HTML content into other formats.

  Knowing my preference, I decided to try and put together the e-book in different formats, since each format has its own pros and cons. I did PDF, ePub, and mobi.

  Mobi is the format used on the Kindle and other e-ink readers. It lacks a lot of control over formatting and was the lowest common denominator. ePub is the format that Apple uses and was a format that I wanted to push the limits on—even if maybe just a little bit. Lastly, I also went with PDF, which has great support across most platforms.

  Once I stop writing new content, I may very well do a print version, too. This feels rather backwards from how a publisher would normally do it: print to e-book to free. I went from free to e-book to (maybe one day) print.

  Working in ePub

  Trying to find accurate and up-to-date information on creating an ePub file targetted for iOS proved to be surprisingly difficult. Searches revealed information that was often a few years old and targetting older versions of the spec. Apple also supports non-standard features like embedded audio and video. The problem was trying to figure out what some things wouldn't work.

  The ePub format, if you're not familiar, is just a zip file with a bunch of XML and HTML content. The XML defines the assets and table of contents and the content itself is in an HTML format. I ended up using Sigil to expediate the conversion but discovered that Sigil sticks heavily to the spec. Embedding HTML5 video, for example, will get stripped out automatically without any clear messaging telling you that the application has done so. That was frustrating.

  I was able to use font-face embedding, which I liked. It allowed me to maintain elements of the brand from the web site and bring them into the e-book. I was able to buy an extended license to embed Quatro Slab in the e-book.

  Hand coding the files turned out to be a better solution, although I still find updating the table of contents XML a hassle.

  Testing the ePub on my iPhone or iPad was somewhat straightforward. Just drop the ePub file into iTunes and sync it to the device. The problem is that the device caches information about the book so dropping in an updated file doesn't automatically update the book on the device with the latest version. Deleting from the device and deleting from iTunes and dragging the file back over may work. Sometimes. But not all the time. I never did find a reliable way to easy push new book updates to the device.

  Working in Mobi

  Short and sweet: with such limited functionality, I used Calibre to convert from the ePub version to the mobi version. I had a friend try it on the device and went with it as is. I didn't make any other changes to get the e-book prepared for the Kindle. It was this version that I ended up uploading to Amazon (which I'll talk about in a bit).

  Working in PDF

  I used Pages and manually copied all the content into it, setting up styles and managed the layout of the book manually. I think I used A4, which is unusually large. The next version of the PDF will likely use half-letter size. This turns out to be the same size as the A Book Apart series of books. If and when I go to print, the half-letter size should hopefully be easier to print.

  Manually laying out the content is a chore and means that minor edits to the book have to be done in multiple places. I'm looking at some HTML to PDF options to make this step easier but so far, I haven't found anything that's perfect.

  Working in DocBook

  Wait, what? What is DocBook? Working in multiple formats, I longed for a way to build in a single format and then export into all of the other formats I needed quickly and easily. I chatted with folks at a couple different publishers and they said they used DocBook. It seemed like the way to go.

  Unfortunately, I didn't like the HTML that was getting created. This would ultimately be the HTML code that would appear on SMACSS.com and in the ePub version (although I suspect nobody would have seen it there). Just having it on the web site meant that I was more particular about the output.

  DocBook is an XML format and getting my content into the format was easy enough. Getting it out, however, was mired in DIV tags 4 or 5 levels deep. Not an example I wanted on my web site. The XML to HTML conversion happens with a set of premade XSL files. You can tailor your own XSL files to get the output that you wanted. However, after finding myself working for hours over the output of each element of code, I gave up.

  If you didn't care about the HTML or were okay with the HTML the DocBook XSL generates for you then DocBook might be a good fit for you. For me? It definitely wasn't.

  Publishing with Amazon

  I decided to publish to Amazon as a way of possibly having people randomly come across the book who might not otherwise do so. The sales of the book on Amazon have done quite well, exceeding the number of $15 ebook sales through my own site. The reporting from Amazon's site isn't really the easiest for tallying up total sales on a daily basis. However, I'd estimate that I've sold almost 200 copies of the ebook through Amazon alone.

  Amazon has different royalty points. If the book price is over $10 then you only get 35% from each sale. If the book price is under $10 then you have the option of 35% or 70%. What's confusing is that even though I chose the 70% option (and priced the book below the $10 threshold to ensure that I could), not every sale automatically results in 70% royalties. I must've missed some fine print somewhere because a third of e-books sold via Amazon US only got the 35% royalty.

  One of the other downfalls with using Amazon is that you don't get access to any customer information. You don't know how they found your book or have any way of contacting them. This is okay if you're just doing the book and nothing else. But I have the workshop and potentially other things down the road that people may be interested in. I'll never know.

  Why not Apple iBookstore or Nook?

  Both Apple and Barnes and Noble require tax information to be supplied up front, which I didn't have. As a Canadian, this usually means filing for a special tax number that is filed with a W8BEN form. As an American-Canadian, I should actually be applying for a SSN and filing US taxes. Way more effort than I really wanted to put into it.

  As I learned afterwards, Amazon has the same requirements. If you don't provide the information, it deducts a hefty portion off of the cheque it sends you. That I'm already selling it for less than money than I sell it on my web site and that I already lose 30-65% off the top for royalties makes this less than ideal.

  Both Apple and Barnes and Noble also suffer the same problem that Amazon does: they take a considerable share of each sale and provide you no customer information in return.

  Customer Contact

  Before I launched the site, I set up a form to subscribe to a mailing list. I had approximately 500 people sign up. When I launched the HTML-only site, I sent a campaign to the list and then shuttered the list.

  That was stupid.

  As I began work on the e-book, I set up a new list and hoped that everybody who had subscribed before would resubscribe again. Thankfully, the subscriber count has climbed its way back up. Don't let people fool you: e-mail isn't dead. E-mail sent to people who want to receive it are very attentive. They'll click through. They'll read what you have to say. You have their attention.

  Social Networks

  I relied heavily on my Twitter stream to get the word out but people often miss a tweet. I have friends who still don't realize that I've written the e-book. Go figure.

  But I also realized that I didn't take advantage of Facebook or Google+. I'm getting better. I'm trying to use the avenues that I have available to me. As I work on the workshops in addition to the extra content, I need to remember that not everybody hangs on my every word on Twitter.

  Advertising

  To put it bluntly: it has been a waste of time. If someone is successful with advertising, it's definitely not me. I spent nearly $1000 on advertising between Google AdWords and Fusion Ads (the very ads on this site) and while I got click throughs, few resulted in actual sales. Would a sustained ad have provided better results? Would someone who understands ad word targetting have done a better job? Maybe.

  Are there other advertising avenues that I could try? Yes. I didn't try Facebook and I'd be really curious to see how it performs versus everything else. I wasted time (and money) on the other approaches and therefore I'm reluctant to invest the time in anything else.

  Tiered Pricing

  With the intent of producing more content, I wanted to reward people who were willing to pay up front for content that might be weeks or months in the making. I created the site membership and tried to make it as enticing as possible. For those that weren't as patient, I offered up just the e-books and the Kindle version as options.

  Success?

  First of all, I set my sights low. I expected most people would buy just the e-book with a few people going for the site membership. I expected to sell maybe 50 e-books within the first couple months. As of this writing, which is 2 1/2 months from when I launched the e-book, I've sold 569 site memberships and 106 e-books (and then close to 200 Kindle copies on Amazon). (A small caveat that many of the site memberships sold during the one-day sale I held on Christmas Day. That response also blew me away. I figured y'all would be eating dinner or opening presents!)

  Clearly I set my expectations too low.

  Should you self-publish?

  
  

  I have made more from self-publishing than I have from writing for traditional publishers. I took more risks, paying for an illustrator, font rights, designing all the collateral material, paying for advertising, building the payment gateway, and investing my time in writing the book itself. Having learned as much as I have in the process has been a huge reward in itself. Having the book do as well as it has has been a fantastic bonus.

  I recognize that I've built up an audience over the years and that I've been able to take advantage of that audience to get the word out. I believe that self-publishing offers up the greatest of flexibility and the greatest of rewards. I've seen lesser known individuals launch their own self-published efforts and have done similarly well.

  It's cliché but if I can do it, so can you!

  
  
  

  

• Structure First. Content Always.

  Posted 17 days ago by Mark Boulton

  We have to start somewhere. Something has to come first. In 2001, I started working for the BBC in Cardiff. I worked alongside journalists and project managers for four years on all manner of web sites and applications; ranging from … Continue reading →

• Brief Hiatus

  Posted 17 days ago by Zach Inglis

  Just writing to say that you may have noticed I’ve not posted lately, nor used my Twitter. Quite a few people have asked where I am so I wanted to give a quick update. I’ve managed to get ill with … Continue reading →

• BenjaminKeen.com

  Posted 26 days ago by Mark Boulton

  Very useful bookmarklet that renders the page you're viewing in several device sizes. Great for testing responsive designs.
  Continue reading →

• On Fandoms and Analysis Paralysis

  Posted 26 days ago by Avalonstar

  When you’re sitting down in between tasks, eating pizza and drinking soda that you didn’t order, you get weird ideas. So tonight, I asked my pool of Twitter followers a question:

  
  

  Okay tech people, tell me about your fandoms. The not-tech-related ones. So, Apple products and @zeldman's beanie don't count.

  — Bryan Veloso (@bryanveloso) January 28, 2012

  I asked this with reservations. I could’ve either gotten a lot of great responses or I would’ve gotten no responses and a lot of unfollows. Thankfully, it was the former and I wasn’t disappointed:

  
  

  @bryanveloso vampires? ^,..,^

  — jina (@jina) January 28, 2012

  @bryanveloso Dr Who, LotR, Temeraire, GoT, whiskey, cameras.

  — timoni west (@timoni) January 28, 2012

  @bryanveloso Gundams…definitely Gundams.Also really terrible Japanese horror flicks.

  — Bermon Painter (@bermonpainter) January 28, 2012

  @bryanveloso glee and twilight have been my most recent. I am a 'Friends' TV show addict as well.

  — Candi Ligutan (@candiRSX) January 28, 2012

  @bryanveloso ancestral diets, basketball, the mandolin (really music in general), cats. my list goes on with more odd specifics.

  — Luke Hatcher (@lukeman) January 28, 2012

  And now for something completely different…

  
  

  There was a time where I honestly thought design could be my whole life. It was my hobby, my fandom and my career. Then the novelty wore off. Then I met my wife—and then the learning began.

  
  

  Fandoms, as you probably haven’t noticed already, have become a cornerstone for me. Surprisingly, following communities that have introduced me to the most dedicated fans on the face of the planet taught me the importance of being a fan. But more importantly, it taught me the importance of being a fanboy or fangirl of something outside of your line of work.

  
  

  Fandoms can add dimension to the one-dimensional Twitter stream. They remind you that the person on the other end is a person with other interests and not some self-promotional machine or oppressed professional who has an obligation to his or her 200,000 followers to stay on topic. It adds variety the inevitable person-to-person meetings. But most of all, they create strong connections, stronger than the ones that our common line of work will ever grant us. This is something you’ll never see spoken about at a conference or linked to on Hacker News, but fandoms are the ties that bind us. Don’t believe me? I’ve had the luxury of witnessing this myself over many years at many startups. By not sharing similar fandoms with my peers, whether it’d be music or single-gear bikes, I’ve seen them grow closer and ultimately more productive. Camaraderie begets productivity. But I digress.

  
  

  My personality has granted me quite a few glitches. Besides being social awkward and whatnot, I have this tendency to overanalyze—and with over-analyzation comes some sort of judgement call. I’ve looked at the people I follow or those whom are retweeted to me and I see flatness. Even those whom I know are immensely multidimensional in person become this flat, one-dimensional, one-directional (and even worse, cliquey) computer speaker. I grew sick of being that, so I started to slowly expose my myriad of odd interests. I started to emote more. I started talking about Japanese music. People responded to those differently in both positive and negative ways and here I am, standing on my sandbox, speaking to a wall.

  
  

  I mean, do you SEE anybody else in the professional design community doing this:

  
  

  (╯°□°）╯︵ ┻━┻

  
  

  No, and that’s quite unfortunate. Quotes about sticks coming out of lower body parts suddenly come to mind.

  
  

  There’s a point I had to all of this, and that point is this: I want to do a search of my Twitter stream in 5 or 10 years and take a random selection of them. I want to look at that random selection and smile at the fact that they weren’t monotonus or all design-related, or all development-related, or even all Japanese idol-related! Those are also the type of people I want to follow because I love learning about people.

  
  

  So, if you’ve survived my fit of Tourette’s and have gotten this far, tweet one of your fandoms to me and show me your awesome personality. (⌒▽⌒)

  

• Making Rounded Rectangles Look Great

  Posted 28 days ago by Flyosity

  Great product design involves thinking about what features to prioritize, planning the user flow from screen to screen, getting user feedback and lots more, but at the end of the day, someone is going to be in Photoshop pushing pixels. The final visual design of a digital interface isn't going to design itself, and when a designer is crafting the look and feel, here are some elements they're typically designing:

  
  
  • Buttons
  
  
  • Panels
  
  
  • Windows
  
  
  • Profile Pictures
  
  
  • Icons
  
  

  If you really think about it, most interfaces (especially for iOS apps) use tons of rounded rectangles in different shapes and sizes. Long and skinny ones with lots of shine. Squarer, flatter ones with some texture. Smaller, slightly inset ones with photos inside. The list just keeps on going. I actually joke around with friends that my main job is making rounded rectangles look great, so I thought it was time to show off some common techniques.

  Drawing Them

  It's important to keep your elements in Photoshop in vector format as long as you can because they can be scaled and re-styled easily. To draw a rounded rectangle, I use (gasp!) the Rounded Rectangle Tool with Snap To Pixels turned on. This is incredibly important or the edges of your shape will lie on a half-pixel and look blurry. There are some other ways to draw rounded rectangles in Photoshop (which Marc Edwards has conveniently outlined) but I typically stay with the vector shape tool because it's easy.

  If the edges of your shape aren't sharp, then strokes/gradients/highlights/shadows you add later won't be perfect.

  

  Up or Down?

  If your goal is to craft subtle and realistic user interfaces that look and feel like real world surfaces, you'll be making a choice: is this element popping off the screen (convex) or indented into the screen (concave)? Buttons are convex whereas large panels containing text and other elements are typically concave.

  

  On the left is a convex button that is designed to look like it's bulging off the screen. It appears bulged out because it's made to appear just like a convex object would appear in real life if it had 90°, top-down lighting. That means that 1) the light catches the top of the object and adds a lighter stripe of highlight, 2) as the bottom bends back down towards the screen, the light is blocked and it gets darker (light-to-dark gradient), and 3) it casts a very subtle shadow, indicating that it's sitting on top of the surface. This specific combination of highlights, gradients and shadows is the most basic way to make a rounded rectangle appear bulged out and convex.

  On the right is a larger panel that is designed to look inset into the screen. The fill color is a mostly-transparent black, it has some inner shadows, and then a thin white drop shadow at the bottom. If we analyze this using the same lighting conditions as the previous example, it's made to look sunken in because 1) the edges or lips of the shape are at the surface and cast an inner shadow inside (these edges block light like an awning off a building blocks the rain, causing a shadow) and 2) as the bottom edge of the shape comes back up to meet the surface, the light catches that lip and causes an edge highlight.

  Download this PSD here.

  Pictures

  Most iPhone apps that display profile images have them look slightly sunken into the surface or popped out and semi-glossy. This is achieved with mainly the same techniques from above, but for the glossy one I added a diagonal gloss line (a white-to-transparent gradient cut into a triangle) as a separate layer.

  

  Download this PSD here.

  Mixing It Up

  Although there are distinct elements common in most convex-or-concave elements, there's no special formula for how to accomplish these effects in Photoshop. I typically tweak size and opacity sliders on Inner Glow, Inner Shadow, Stroke and Drop Shadow layer styles until things look good. Other people are Bevel & Emboss specialists. Here are some more examples of rounded rectangles styled in some different (but reusable!) ways.

  

  Download this PSD here.

  Scratching The Surface

  These are just some of the myriad ways you can style and use rounded rectangles in your interfaces. If you really want to see some creative designs, check out some icon designs on Dribbble. All it takes is some imagination and experimentation, and you can use gorgeous rounded rectangle designs throughout your interface.

• Life is like riding a bicycle

  Posted 29 days ago by Veerle

  
  

  “Life is like riding a bicycle. To keep your balance you must keep moving.”

   — Albert Einstein
  

  

• Naming Convention in CSS

  Posted 30 days ago by Jon Snook

  My mind is on CSS quite a bit these days. At Shopify, I'm jumping into projects that already well under way. As a result, it's been a great way to look at what I wrote in SMACSS and see how applicable it is to yet another project. (As if Yahoo! wasn't already enough of a testing ground.)

  With Yahoo!, I (and a team of people) were writing the CSS from scratch and creating our mental map of the project as we went along. Jumping into the middle of a project as I am at Shopify, I have to try and figure out why things are done the way they are.

  Here's an example of something that I ran into in the CSS:

  #loading-header .loading { background: url(spinner.gif) no-repeat 0 0; }
  
  [...separated by a few pages of code...]
  
  #content {
  
  [...separated by more code...]
  
    #loading-header { display:none; }
  
    .row { display:block; }
  
    &.loading {
  
      #loading-header { display:block; }
  
      .row { display:none; }
  
    }
  
  }

  The loading class has a spinner. Got it. But wait, there's a loading class inside an element with an ID of loading-header and another loading class that gets added to the element with an ID of content. Are they the same somehow? Is there some inheritence that is taking place?

  As it turns out, no. These two loading classes were named exactly the same thing but applied in two different contexts. They really had no relation at all except that the #loading-header (and thus, #loading-header .loading) is only visible with #content.loading. (The &.loading is part of SASS and adds #content in place of the ampersand.)

  One class is a state. Because it's a state, I prefer to prepend all my states with "is-". In this case, it would be "is-loading". The question asked when I first mentioned this is, "isn't the 'is-' redundant?" But as you can see from the example, it isn't. The naming convention clarifies its intent.

  In this case, I had to determine intent based on the CSS. Other times, you're looking at the HTML first.

  <div id="content" class="loading">
  
  <div id="loading-header">
  
      <div class="loading">

  Where do you begin to look in the CSS to find what you're looking for? You'd probably start with a search for ".loading". Now you're left trying to figure out which loading class applies to what element. The swaths of CSS that separated the relevant parts made it harder to see what was going on.

  The simple answer to this, of course, is not to naming two different things with the same name. However, I believe a solid naming convention clarifies intent and makes the project easier to understand. We've long applied naming conventions to programmery things like JavaScript and PHP. The same should go for CSS.

  
  
  

  

• Naming Convention in CSS

  Posted 30 days ago by Jon Snook

  My mind is on CSS quite a bit these days. At Shopify, I'm jumping into projects that already well under way. As a result, it's been a great way to look at what I wrote in SMACSS and see how applicable it is to yet another project. (As if Yahoo! wasn't already enough of a testing ground.)

  With Yahoo!, I (and a team of people) were writing the CSS from scratch and creating our mental map of the project as we went along. Jumping into the middle of a project as I am at Shopify, I have to try and figure out why things are done the way they are.

  Here's an example of something that I ran into in the CSS:

  #loading-header .loading { background: url(spinner.gif) no-repeat 0 0; }
  
  [...separated by a few pages of code...]
  
  #content {
  
  [...separated by more code...]
  
    #loading-header { display:none; }
  
    .row { display:block; }
  
    &.loading {
  
      #loading-header { display:block; }
  
      .row { display:none; }
  
    }
  
  }

  The loading class has a spinner. Got it. But wait, there's a loading class inside an element with an ID of loading-header and another loading class that gets added to the element with an ID of content. Are they the same somehow? Is there some inheritence that is taking place?

  As it turns out, no. These two loading classes were named exactly the same thing but applied in two different contexts. They really had no relation at all except that the #loading-header (and thus, #loading-header .loading) is only visible with #content.loading. (The &.loading is part of SASS and adds #content in place of the ampersand.)

  One class is a state. Because it's a state, I prefer to prepend all my states with "is-". In this case, it would be "is-loading". The question asked when I first mentioned this is, "isn't the 'is-' redundant?" But as you can see from the example, it isn't. The naming convention clarifies its intent.

  In this case, I had to determine intent based on the CSS. Other times, you're looking at the HTML first.

  <div id="content" class="loading">
  
  <div id="loading-header">
  
      <div class="loading">

  Where do you begin to look in the CSS to find what you're looking for? You'd probably start with a search for ".loading". Now you're left trying to figure out which loading class applies to what element. The swaths of CSS that separated the relevant parts made it harder to see what was going on.

  The simple answer to this, of course, is not to naming two different things with the same name. However, I believe a solid naming convention clarifies intent and makes the project easier to understand. We've long applied naming conventions to programmery things like JavaScript and PHP. The same should go for CSS.

  
  
  

  

• Naming Convention in CSS

  Posted 30 days ago by Jon Snook

  My mind is on CSS quite a bit these days. At Shopify, I'm jumping into projects that already well under way. As a result, it's been a great way to look at what I wrote in SMACSS and see how applicable it is to yet another project. (As if Yahoo! wasn't already enough of a testing ground.)

  With Yahoo!, I (and a team of people) were writing the CSS from scratch and creating our mental map of the project as we went along. Jumping into the middle of a project as I am at Shopify, I have to try and figure out why things are done the way they are.

  Here's an example of something that I ran into in the CSS:

  #loading-header .loading { background: url(spinner.gif) no-repeat 0 0; }
  
  [...separated by a few pages of code...]
  
  #content {
  
  [...separated by more code...]
  
    #loading-header { display:none; }
  
    .row { display:block; }
  
    &.loading {
  
      #loading-header { display:block; }
  
      .row { display:none; }
  
    }
  
  }

  The loading class has a spinner. Got it. But wait, there's a loading class inside an element with an ID of loading-header and another loading class that gets added to the element with an ID of content. Are they the same somehow? Is there some inheritence that is taking place?

  As it turns out, no. These two loading classes were named exactly the same thing but applied in two different contexts. They really had no relation at all except that the #loading-header (and thus, #loading-header .loading) is only visible with #content.loading. (The &.loading is part of SASS and adds #content in place of the ampersand.)

  One class is a state. Because it's a state, I prefer to prepend all my states with "is-". In this case, it would be "is-loading". The question asked when I first mentioned this is, "isn't the 'is-' redundant?" But as you can see from the example, it isn't. The naming convention clarifies its intent.

  In this case, I had to determine intent based on the CSS. Other times, you're looking at the HTML first.

  <div id="content" class="loading">
  
  <div id="loading-header">
  
      <div class="loading">

  Where do you begin to look in the CSS to find what you're looking for? You'd probably start with a search for ".loading". Now you're left trying to figure out which loading class applies to what element. The swaths of CSS that separated the relevant parts made it harder to see what was going on.

  The simple answer to this, of course, is not to naming two different things with the same name. However, I believe a solid naming convention clarifies intent and makes the project easier to understand. We've long applied naming conventions to programmery things like JavaScript and PHP. The same should go for CSS.

  
  
  

  

• Super Hybrid Robots

  Posted about 1 month ago by Avalonstar

  Last year, I presented the concept of J-pop to my colleagues of GitHub at my first summit. It was surprisingly well received. Since I missed a summit due to the wedding, I gave my second summit talk yesterday. When it came to this year’s topic, as always, Jen was the catalyst that got me started—two weeks in advance.

  
  

  Whew. I need to work on putting coherent sentences together, but at least the slides were pretty! ;) #ghsummit

  — Bryan Veloso (@bryanveloso) January 18, 2012

  Here’s a quick preface.

  
  

  The day I finished my first Django app, three or four years ago, my life changed. Up until then I was an interface designer who had a lot of ideas but never the foundation to go forward. Also, I feared it. But after that first successful app, I wanted to know the entire stack. So over the next few years I tried everything, from Cocoa to Puppet and now Redis and Rails. I followed what was interesting and what seemed fun at the time, even if it was a waste of time. So, I started to associate with the concept of a hybrid.

  
  

  Oh yes, my presentation. I found a lot of parallels to two of the greatest series of platformers of all time, Mega Man and Mega Man X for the NES and SNES respectively. I talked a bit about Mega Man X last month, but I completely ran with it this time. As to not derail the deck, I’m quite happy to present “Super Hybrid Robots” below:

  Finally, go be a fan! (o^_^)b

  

• New Adventures Conference 2012 Wrapup

  Posted about 1 month ago by Zach Inglis

  Photo by the talented Kitty Crawford I haven’t been to a design conference since SXSW 2007. I got tired of the same old speakers talking about yesteryears technology which they still didn’t even know how to use themselves. In that … Continue reading →

• Super Hybrid Robots

  Posted about 1 month ago by Avalonstar

  Last year, I presented the concept of J-pop to my colleagues of GitHub at my first summit. It was surprisingly well received. Since I missed a summit due to the wedding, I gave my second summit talk yesterday. When it came to this year’s topic, as always, Jen was the catalyst that got me started—two weeks in advance.

  
  

  Whew. I need to work on putting coherent sentences together, but at least the slides were pretty! ;) #ghsummit

  — Bryan Veloso (@bryanveloso) January 18, 2012

  Here’s a quick preface.

  
  

  The day I finished my first Django app, three or four years ago, my life changed. Up until then I was an interface designer who had a lot of ideas but never the foundation to go forward. Also, I feared it. But after that first successful app, I wanted to know the entire stack. So over the next few years I tried everything, from Cocoa to Puppet and now Redis and Rails. I followed what was interesting and what seemed fun at the time, even if it was a waste of time. So, I started to associate with the concept of a hybrid.

  
  

  Oh yes, my presentation. I found a lot of parallels to two of the greatest series of platformers of all time, Mega Man and Mega Man X for the NES and SNES respectively. I talked a bit about Mega Man X last month, but I completely ran with it this time. As to not derail the deck, I’m quite happy to present “Super Hybrid Robots” below:

  Quick Note: There have been pieces of this presentation that have been deemed awesome by my peers. But due to technological constraints, those pieces never made it in the PDF. So, if you want to see those pieces, ask me to present… or you can just use your imagination. ;)

  
  

  Finally, go be a fan! (o^_^)b

  

• The Great Discontent

  Posted about 1 month ago by Komodo Media

  The Great Discontent is this amazingly designed and written interview site ran by Ryan and Tina Essmaker, featuring creatives such as artists, illustrators, photographers and musicians. If learning about my story is your bag, head on over to the site to read the interview.

• A Weekend with Z Shell

  Posted about 1 month ago by Avalonstar

  Almost a year ago, I was introduced to the Z Shell (or zsh), an alternative shell to bash, through Kenneth Reitz. Unfortunately, at the time it felt way too foreign. The uphill battle to configure the damn thing outweighed the pros that zsh was meant to provide. Also, I was too entrenched with the default command line shell that had been spoon-fed to me ever since I installed Ubuntu for the first time.

  
  

  So I left it at that.

  
  

  Fast forward to the beginning of this year and I ran into this article, “My Command Line Prompt,” by Geoffrey Grosenbach of topfunky and PeepCode fame. I gained interest almost instantly. Why? The visuals of course. It was a great mini-tutorial on what zsh could do. So over the weekend, I grabbed oh-my-zsh, a wonderful starter kit from Robby Russell and went to work on the train to and from my parent’s place.

  
  

  Here’s what I came up with in pretty picture form:

  
  

  

  
  

  (The font I use is Inconsolata.)

  
  

  This is an amalgamation of ideas from Kenneth’s oh-my-zsh theme and the aforementioned blog post by Geoffrey. It moves everything but the current directory to the right side of the prompt, also including the current virtualenv or rbenv when applicable. It has an easter egg as well, mainly for my own giggling satisfaction when a command boards a ship to fail.

  
  

  If you’re interested in seeing the code behind this, you can take a look at my new dotfiles repository. (There are a few goodies in there which are beyond the scope of this post.)

  

© Copyright to respective blog post authors. Otherwise Zach Inglis of London Made