People need to calm down about the change to comiXology. At least, fans should calm down. Retailers should probably start to panic.

DC Comics

“Now Kiss”

Every time something changes in tech for comics, “retailers should panic” always makes the rounds among the pundits. First it was Marvel Unlimited, PSP Comics, comiXology, iVerse, Kindle comics, Facebook comics, then retina iPads, now this. Comic shop retailing has been the only consistent consumer channel in the last decade.

In fact, it’s been publishers who have had more to weather, and with Amazon controlling the cards, DC, Marvel, and Image will have new contracts to contend with. I imagine that their initial deals with comiXology were very good while the start-up was shopping for an owner to buy them out. It makes sense, if comiXology’s end game was to get bought out, they’d need to bring over the publishers with them, they would have to make it worth the publishers while.

It’s more likely that publishers should begin to panic.

After all, comiXology gave every one of their readers the single most disruptive shopping experience within a month of their purchase, prompting even the most ardent Apple fanboy to uninstall it.

☛

By the way, this happened.

Sure, you can build email lists, push your show for more ticket sales on Twitter, personally reach out to tech companies to have their developers attend, but blog about it?

I knew I forgot something.

If you didn’t get to attend Front Porch last year, here are all the tech talks preserved on YouTube forever.

Front Porch conference video

source

☛

Setting color variables is an easy way to maintain consistency across css files. It prevents errors, easy to update, works great with mixins too. Coming up with names for each shade of red for your sites ui can be problematic. Red, dark red? lighter-red? lighter-red-button-border, etc.

Name that Color will take hex values and return names based on Wikipedia’s index of Crayola colors. The code for this color picker is available for download, as well as more color resources.

Admit it, $burnt-sienna is a much better variable name than $kindof-pink.

☛

Nothing quite like working in your perfect set up, coding the way you code, using your own stack, everything is coming up roses. Oh ya, the client mentions that all of this needs to work in IE8. No amount of statistics and citations to back your position will prevent this requirement. IE8 1, you 0.

CSS on IE8 isn’t bad. From the perspective that it’s not IE7, it’s quite good. Things that it can’t do are pretty minor to experienced developers. background-size, border-radius, rgb color support are minor hiccups that most will code around or provide fallback support for.

Getting IE8 to load the right styles based on media queries is another matter. Bootstrap’s solution is to use JavaScript… because of reasons. Another option is to let IE8 users only load CSS for small displays. It’s not a bad option actually, mobile-first design might actually a better experience for IE8 users. And it doesn’t really require any additional work. Unfortunately, it’s never an acceptable option for clients, nor should it be up to developers to dictate what users can or cannot view.

Putting IE8 specific styles into a separate file is supported by the browser, and hats off to Microsoft for having this feature available for it’s browsers.

<!—[if lt IE 9]><link rel=“stylesheet” href=“oldie.css”><![endif]—>

All other browsers will ignore this, but not IE8. What happens is IE8 will load this as well as the main file.

As the developer, maintaining two sets of code isn’t ideal. Here’s a way to write code once and have it output to both IE8 and A-grade browsers. These examples are written in LESS but will just fine in Sass.

So what’s happening here? The mixin is defined in a separate file that is meant for medium-sized screens. In this example the medium size is suitable with for IE8 support, but this can be expanded to include the any media queries as well. Both the main and IE8 css files import the mixin “hero-medium” and call it, but the main nests it in the media query.

However, moving between several files just to support IE8 can be more confusing than having everything in one place. Waiting until afterward to do this is just fine. The result will be the same, but a lot less cumbersome than writing a whole new IE8 file with completely separate code.

☛

Working with greeking (lorem ipsum) should never be an option when building or designing web sites. There is a previous post about the why’s and why not’s, as well as many sources that explain it far better.

The challenge comes when building something without knowing what the content will be. First, there’s content that goes through a copywriter, then legal, then proofing, etc. That kind of content is it’s own workflow, and hopefully the planets lined up and all that is completed before design work begins.

Then there is the other kind of content—data. This content can come from external API’s, environmental or conditional factors, and users.

User data can be easy to design for, but still needs to be tested for the unexpected ways users muck everything up. Not everyone has memorable names like Jonny Appleseed, or look like Kayne West. Sorry Dribbble, pretty pixels can be totally offset but non-model avatars.

This was a problem Twitter faced in when updated their design for custom backgrounds. What the designers built didn’t hold up to bad user input. Text became unreadable and they had to experiment with bad user data to make their design work (I mean, great user data).

Avatars Lots of users have added their Twitter avatars to UI Faces. They’re ugly, pretty, cartoons, pets, questionable at times, but they are perfect example of what to expect from users.

Names UI Names offers two gender name generators. The names are pulled from a list of the most common popular names in America, so they can don’t offer a lot of special characters or foreign names, if any. But the variety is large enough to suss out any design elements and UI.

Addresses What’s great about North American Address Generator is that is also provides a SQL statement. This is a lot better than 1234 Anywhere St.

And to really see user info in actions, use faker.js to pull data into your UI.

It would be great to see more generators like these. Custom backgrounds, usernames, social feeds, anything that always sits out of the control of the designer but touches everything designed, it will make a better product for the client and the user.

☛

There are more tedious things than creating sprite sheets from scratch. Setting all those images into one image, and measuring all the dimensions of each item, it’s coordinates in the file, and then writing the CSS code for use on the page. There are more tedious things, but none come to mind.

Using Grunt to leverage the process has turned out to be really useful. grunt-spritesmith has been a godsend for making the process a seamless step in the RWD workflow.

One caveat, the install is a bear. So be patient. For novice npm users this will not only be new territory but grabbing another developer to get it working will save some time.

From previous issues made in their github, this is a recommended workflow I’ve come up with:

Example directory

Have two folders, one for standard displays, another for retina or high dpi displays (if you’re into that sort of thing). The order of the images in each folder need to match, so be aware that “2x” can affect that. If the images in the “2x” folder, for example, is in a different order alphanumerically with Grunt runs, the values won’t match in your CSS.

Set grunt.js to run the sprite task like below.

Here we set the source of the images, the output image (generated), Sass file (or LESS or CSS), how the image is referenced in CSS, and the namespace for your sprites.

Punch in grunt sprite in your CLI and grunt steps through each one. You should have two new images and two .scss files. Spritesmith can create as many sheets as needed, for this example only two are used to show the next part. If new sprites are needed later on in the project, these files can be updated and everything will still work.

source

Using the sprite mixin will output width, height, background position, etc. for the sprite automatically. Because the “retina” sprite sheet is twice as large, this mixin needs two arguments to pull it off.

One more thing to consider is the file sizes for the images are really large, So optimize, optimize, optimize.

☛

Today, a foreign package arrived on my doorstep. What started as a Kickstarter has turned into a physical deck of cards.

Constraint Cards comprise of 52 unique and helpful design guidelines for web designers. No images, for example, is a huge design constraint for some. In the same vein so is designing for mobile. It challenges designers to work with less. Paper only, Focus on data, or One type face are pretty much the opposite of using Photoshop to create.

☛

One good thing about following a bunch of know-it-alls on Twitter is they like to post things they create. One bad thing about it is the amount of noise between the posts I want to read. Google Plus has a much stronger signal to noise ratio. It has some really strong communities as well. The node community, for example, has a high tolerance for beginner questions, something lacking in StackOverflow.

Web Platform Daily is easily my morning read.

Probably the best option for staying up to date are email newsletters. They’re curated to show import and or popular articles.

I started a github repo for resources. Feel free to add or amend.

Newsletters (in no particular order:

• Breaking Development
• Web Tools Weekly
• Web Development Reading List
• HTML5 Weekly
• Web Design Weekly
• JavaScript Weekly

☛

]]> Thu, 02 Jan 2014 15:20:59 -0600 Martini Lab http://martinilab.com/pretty_good_year http://martinilab.com/pretty_good_year

^^^

As far as getting things done, this year has been really good. In March, I left The Richards Group after launching two sites (Richards/Lerma and PanCan Annual Report) to work at Oven Bits. Not a lot of time to waste, as Instead App got a new site for itself. Just recently, the hard work at Cellucor paid off and went live as well. There were many other projects for Oven Bits as well. Travel Texas, EDP, Red Mango, and Bible App for Kids all went live this year.

Front Porch was a big accomplishment as well. Dallas’ own front-end developer conference has its first inaugural year - something I hope continues for years.

So what for 2014? Time to dust off this blog, update it’s css and back-end code I think. Hopefully get a podcast started with my colleagues. Improve my skills across the board, goes without saying.

What I would really like to see this year is more focus from myself and everyone on what we can do to make our industry better. Front Porch was a good example of what happens when a few people with the same goals can make their industry better. It wasn’t perfect, but it was damn good. And from what I can see, much needed.

☛

]]> Tue, 31 Dec 2013 14:59:58 -0600 Martini Lab http://martinilab.com/is_rss_dead http://martinilab.com/is_rss_dead

Google Reader

I certainly hope not. But it very well may be according to Google.

Google Reader is shutting down in July. Feedburner isn’t the service it used to be either, with AdSense and API no longer available with the service.

Maybe blogging is dead. Or, at least the landscape for being a blogger has changed. Between optimizing content for mobile, and social strategies for traffic, the rules for building an audience has been evolving over time.

Some sites are abandoning those rules altogether. With sites moving to paywalls and subscriptions (The Magazine, Andrew Sullivan, Salon has been using this model for years), maybe the rules used as far back as just a year or two ago probably don’t even matter.

RSS isn’t really dead. Neither are microformats, but who uses that anymore? Regardless of the industry, RSS is now a tinkerers toy. Everyone else will have to actually visit a website. *shutter*

☛

]]> Thu, 14 Mar 2013 08:55:00 -0600 Martini Lab