I Already Don't Like You™. Pretty Sure The Message Was Clear. I ALREADY DON'T LIKE YOUGO AWAY

Update on my Tumblr Theme

So, it’s been about a month since I’ve touched this bad boy. Making pretty good progress. The reason for delay was that I discovered a weird bug on touchscreen laptops. Depending on how a jquery plugin is built, browsers detect a touchscreen laptop as a touch only device, so mouse interactions (hover/click) won’t work. This was the case for an important UI feature I had built into my Tumblr theme: tooltips.

I was using the Tooltipster plugin for displaying post-menu options for each blog entry. Unfortunately, the way the plugin was built, it detected ALL touchscreen devices as just touchscreen, including desktop computers. So, a confused user on their laptop wouldn’t immediately know that they would have to tap their screen to activate the tooltip as opposed to simply clicking their mouse. Thus, bad UX/UI.

Granted, this right now, is a bit of an edge case, but this problem will not go away, and only get bigger. Better to future proof now, because touchscreen desktops/laptops are only going grow in usage. So I decided to do some basic jquery (a few lines) and use the .fadeToggle() function. Click the button, the container immediately next to it in markup appears (using the .next() selector).

Anyway, these screenshots are just showing I’m making some good progress on the responsive part. Though I have been considering changing up the design of the dropdown menu, and looking at using flaunt.js.

And so it continues.

Spread the
hotness.

Spread it like butter.

Vine preview of my progress on my Tumblr  theme.

This is in particular to the slide out navigation up top. I was running into issues with the tooltip, in particular to mobile and quality of the experience. So I did some research and found a nice little plugin, “Responsive Nav” that made a nice little slidedown menu. I had to modify the css so it would slide down at all breakpoints not just mobile.

And then you’ll see I added tooltips to the social nav. The social nav was a little tricky, because I wanted it to be somewhat semantic/screen reader friendly. So in addition to inserting the icon font, I also put the label next to it in ‘span’ tags and gave it this css class (snipt embed):

Pretty simple. I’ve been doing a bunch of stuff too. I’m almost ready to start coding the permalink page. That’s gonna get a little trickier now, especially since I’ll be moving the avatar image to the left from the top.

Anyway, back to work!

Spread the
hotness.

Spread it like butter.

So, working on this premium Tumblr theme, I hit a minor roadblock.

If you’re using a web service like google fonts or typekit, you’re fine. If you’re hosting the fonts yourself, well you’ll probably (most definitely) run into cross-domain issues. This is almost exclusively dealing with Firefox (and a little IE). In all of their browser security wisdom, they decide that linking to css3 webfonts from another domain (even sub-domains) is a big no-no.

Now, how do we get around that? There are a few workarounds.

  1. First, you could just host the fonts on your own web hosting space and and add an .htaccess file (just a text document with that extension) allowing permissions for websites to access fonts in that directory. Here’s how.
  2. Secondly, you could use a generator, like font squirrel, upload your font, make it create a base 64 encode. This essentially embeds your font face inside of your css file. Though the downside is now you have a hefty css file depending on how many fonts you’re encoding. Here’s an article explaining that.

Now, I’ve been aware of this issue, but since my solutions were small scale, I’ve always used the first option.

But since I’m designing a Tumblr theme with an icon font that needs to be self hosted, I can hardly upload it to my own hosting space. That can be problematic down the road if I ever change hosting providers and the people using my theme having old links inside their css from the theme. Plus the potential bandwidth from people downloading those assets could be exponential.

I’ll be using Tumblr’s static theme uploader for hosting all of the theme assets on the tumblr site. And since there’s the issue of cross domain (even sub-domains, sheesh) with firefox, the fonts still won’t work (unless Tumblr has set up a cross domain allowance for font hosting, which might be a possibility, but I’ll have to test that theory).

So base encoding it is gents. I’ve encoded a Woff font (firefox’s web font of choice), but will be externally linking the other fonts as there’s no issues with other browsers that I know of (I’m squinting at you, internet explorer).

We’ll see folks. My desktop computer is still out of commission, so I’m gonna have a hard time testing on IE9. It looks like IE9 has a similar policy, but it also supports the woff format as well.

Blargh. I spent an entire evening researching and prepping files just for this. I do it all for you people. hahaha

*** EDIT***

ORRRRRRRR I could just use svg graphic with a javascript backup for older browsers. I would just have to save out individual files for each icon. Though it would make it more of a pain to change colors with css (researching that right now), plus that would be more http requests. Plus side I wouldn’t have to worry about cross domain, and the vectors would be retina ready. And actually thinking about it, with the exception of the optional social icons that can be turned on and off, I don’t really use that many icons so it might actually be lower from a bandwidth perspective.

Spread the
hotness.

Spread it like butter.

buildthemes:

image

Tumblr have announced new reblog and like buttons using the variables {LikeButton} and {ReblogButton}. Sample code can be viewed from the updated theme documentation.

“Now Tumblr users can interact with a post right from your theme,” said Tumblr staff in an email to theme developers….

Whoa. This is a big deal. Nice.

Reblogged Via: Build Themes

Spread the
hotness.

Spread it like butter.

So guys, you know how I’m working on that minimalist Tumblr theme with a slant towards writers/authors? I just had a realization, that could possibly be awesome. And could be something you might love as a concept.

Let me back up.

So, I was sitting there trying to figure out how I would distribute this tumblr theme to make it available for everyone, while offering people a chance a secure, “pay-what-you-want” shopping solution. Now, there are a variety of solutions, but one stood out. I landed on Gumroad:

image

A former designer of Pinterest is behind the concept, and it’s been getting rave reviews.

Gumroad seems to have what I love: simple, beautiful UX/UI that won’t get in the way of my designs. And what’s even more awesome? you can use their javascript plugin to integrate it into your site if you don’t want your users leaving the page for another experience. It can either: 

Damn sexy if you ask me. Read how it all works here.

So, what’s the idea, you may ask?

What if there was a single purpose Tumblr theme made, integrated with Gumroad, just for selling your digital wares?

A simple way to set up a social commerce experience maybe. Now the only thing would be that the author would need to know very basic html to add a special class to the “buy now” link that would make each shopping button work.

Also I specify only using the “text post type” for simplicity’s sake when creating the browsing layout for the index pages. Using the link post type could work, but you can’t insert headlines (with jumping into html mode) and directly upload images (text post type only). That would be an awesome feature upgrade, being able to format text into headers (h1, h2, h3, etc) directly with the post formatting toolbar.

So that brings up another proposal:

UI/UX feature request for Tumblr

Here’s how the post formatting toolbar looks now:

image

Here’s a UI concept of how it could possibly look:

image

Now, I don’t believe in unnecessary feature creep, or making things bloated. But that could save a lot of people time and grief, especially long form writers or people who like to break up their content with subheads. Just a thought. That would be a nice little touch, that would save power users so much time. Tumblr is awesome, I just wanna help it out a little more. Seriously, tell me if I’m off base.

Jumping back to the theme idea:

I wonder if i could just make a instructions document to go along and offer and html snippet template for the user to paste in…just thinking out loud.

Maybe it would/should be marketed towards more digital savvy people. Anyway. What do you guys think?

Spread the
hotness.

Spread it like butter.
back to top

Who the hell is this guy?

Who the hell is this guy?

Oh wow, someone's actually reading this? OK, this is happening. My name is Alex and I'm a designer with slight anti-social tendencies. I'm black, live in the DFW metroplex, work at an ad agency, and drink alone in the dark on week nights. While being black, I write this blog as a creative outlet when not starting flame wars over the best episode of Battlestar Galactica (Gaeta's Uprising or The Final Five Revelation of course). I share interactive & design inspiration, the latest in pop culture, movies, and general nerdery.

I am currently unmarried and live alone. I make egg sandwiches and have no pets. I like eating tacos with no pants as well.

high resolution medium resolution mobile resolution

viewed on a high resolutionmedium resolutionmobile resolution device

OLDER