“One thing that really annoys me is when you view a site with a lot of images and as you’re reading, the page is jumping all over the place as the images load. If you define the correct height and width attributes on image tags, then the page will render faster (less reflows) as well as allowing your users to get on with reading without disturbance whilst the images load.”
Excellent tip via
camendesign. This man is the markup master. I’m continually awed by his attention to detail in all things web: it shows through his work. I came across this upon being linked from reddit to his pragmatic
Video for Everybody! post. I suggest reading it if you have anything to do with a service that offers videos on the web.
To whoever is responsible for the redesign of
Tumblr’s mobile site. I’m guessing an updated Tumblr app isn’t too far off. I just wish there was an apple-touch-icon for the mobile dashboard and an option to view the page in chromefree mode from the homescreen. The application is nice, sure, but nothing beats full screen landscape browsing goodness.
While I’m at it with the video embeds, I might as well put up this gem. This is
Synesthesia, found on
BOOOOOOM! It’s directed by a pair of geniuses under the alias Terri Timely. It’s mind warping, or at least bending. I recommend going ahead and watching all of their short films, especially the three most recent ones listed
here.
Just saw Adaptation, so naturally I went online to get some background on the film. And I thought: hey, Charlie Kaufman is a wonderful human being. I wonder if he’s made an appearance on the Colbert Report. Turns out he has. I guess this isn’t timely anymore. But it is still good times.
Edit: The default Comedy Central video embed might just have the most disgusting markup I’ve ever seen. Here’s what it recommends I place in the video embed field:
<table style='font:11px arial; color:#333; background-color:#f5f5f5' cellpadding='0' cellspacing='0' width='360' height='353'><tbody><tr style='background-color:#e5e5e5' valign='middle'><td style='padding:2px 1px 0px 5px;'><a target='_blank' style='color:#333; text-decoration:none; font-weight:bold;' href='http://www.colbertnation.com/'>The Colbert Report</a></td><td style='padding:2px 5px 0px 5px; text-align:right; font-weight:bold;'>Mon - Thurs 11:30pm / 10:30c</td></tr><tr style='height:14px;' valign='middle'><td style='padding:2px 1px 0px 5px;' colspan='2'><a target='_blank' style='color:#333; text-decoration:none; font-weight:bold;' href='http://www.colbertnation.com/the-colbert-report-videos/213523/december-09-2008/charlie-kaufman'>Charlie Kaufman</a></td></tr><tr style='height:14px; background-color:#353535' valign='middle'><td colspan='2' style='padding:2px 5px 0px 5px; width:360px; overflow:hidden; text-align:right'><a target='_blank' style='color:#96deff; text-decoration:none; font-weight:bold;' href='http://www.colbertnation.com/'>www.colbertnation.com</a></td></tr><tr valign='middle'><td style='padding:0px;' colspan='2'><embed style='display:block' src='http://media.mtvnservices.com/mgid:cms:item:comedycentral.com:213523' width='360' height='301' type='application/x-shockwave-flash' wmode='window' allowFullscreen='true' flashvars='autoPlay=false' allowscriptaccess='always' allownetworking='all' bgcolor='#000000'></embed></td></tr><tr style='height:18px;' valign='middle'><td style='padding:0px;' colspan='2'><table style='margin:0px; text-align:center' cellpadding='0' cellspacing='0' width='100%' height='100%'><tr valign='middle'><td style='padding:3px; width:33%;'><a target='_blank' style='font:10px arial; color:#333; text-decoration:none;' href='http://www.comedycentral.com/colbertreport/full-episodes'>Colbert Report Full Episodes</a></td><td style='padding:3px; width:33%;'><a target='_blank' style='font:10px arial; color:#333; text-decoration:none;' href='http://www.indecisionforever.com'>Political Humor</a></td><td style='padding:3px; width:33%;'><a target='_blank' style='font:10px arial; color:#333; text-decoration:none;' href='http://www.colbertnation.com/video/tag/Operation+Iraqi+Stephen%3A+Going+Commando'>Stephen Colbert in Iraq</a></td></tr></table></td></tr></tbody></table>
Oh HTML 5, you can’t come soon enough.
staff:
lloyda2:
It is not helpful in designing a theme that Tumblr throws in inline style attributes in its preview.
Thanks for catching that! That was left over from an ancient bug. We just pulled out the style attribute, so it shouldn’t be a problem now.
I might as well use this as an opportunity to list a few more issues lingering in Tumblr:
- The iframe which appears in the top right of each Tumblr user’s blog employs deprecated attributes and is responsible for four markup validation errors. No biggie: this one is a minor annoyance.
- Permalink pagination is broken, and has been for at least the past few months—possibly since the feature was first introduced. Going backwards in time works just fine, but there’s something wrong with the {NextPost} url which causes every single instance of the {NextPost} tag on every single permalink page to link to a (seemingly random) recent post submitted. See for yourself: Go here and press newer. Then do the same for this post. See?
- I feel like this one was intentional, but when I perform an indent from tumblr’s nice wysiwyg text editor, the resultant blockquote has a bunch of nasty style crud attached to it, eg:
<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">
I think this is unnecessary: the stylesheet of the user’s theme should be able to handle a blockquote appropriately.
Much thanks for listening to your users and for being continually diligent.
Updates to Safari don’t end there, however, as Apple has also (yes!) given us the option now to open links in new pages (the iPhone equivalent of tabs). Tap and hold on a link, and a menu pops up with the link path listed on top, and the option to Open the link (in the current page), Open in a New Page, or Copy to the clip board. As this is the same gesture used to allow Image Save in iPhone 2.0, if the link happens to be a picture, Image Save is rolled right into the same menu as a an additional option.
Cool. Just what
I wanted. Albeit a different implementation.
Back in February, my mother commissioned me to churn out a redesign for her website to go along with her upcoming book of short stories, set to be released in September. Her former site, also written by myself (back in 2005), was a series of hand-updated html pages. I took this redesign as an opportunity to add some much-needed dynamic content to the site.
Because my mom was a bit intimidated by the prospect of maintaining a conventional blog, I decided to rely on tumblr as the basis for the news section of the site. The prime criterion that led to selecting tumblr over self-hosted light weight blogging engines, such as Chyrp, was tumblr’s straight-forward dashboard interface. Even my technologically inept mother managed to figure out how to click “Text,” fill out two boxes, and tap “Create Post.”
The rest of the site was hobbled together with jQuery and Simplepie. Simplepie is a goliath of an rss parser (the single php file is a whopping 348 KB), but it was easy to bend to my will for use in a google calender-backed events page. I’m also filtering posts through Smartypants for typographical correctness.
I’ll probably come back to optimize the site further down the line, but for now, my client is appeased, and I’m sleepy.
GRADUATED CYLINDER. GET IT?
My fingers craft beautiful digital comedy.
compatriot:
Some major updates this time around:
- Added notes support
- Changed names for custom colors to make what attributes they change more obvious
- Made layout colors generally more customizable
- Fixed some formatting issues
- Altered reblog mention style to better align with tags in a post
Enjoy! As always, contact me if you see any bugs. The updated theme should be in the Theme Garden soon enough.
This update better reflects the current layout of my own personal tumblelog.
