Posts tagged html - Entropy and Ecstasy

How to center text vertically beside a logo?

Fri, 24 Apr 2015 10:47:38 GMT

You've got a sweet logo, but you want a tagline centered vertically beside it.

<header class="logo-container">
  <img class="logo" src="http://placehold.it/200x200">
  <p class="tagline">Clever Tagline</p>
</header>

Chirs Coyier has a wonderful guide to centering things and using the translateY(-50%) technique is appropriate here... but that puts the tagline on top of the logo rather than beside it. Moving the tagline over with the left property puts the tagline exactly where we want it. Final CSS below (jsfiddle):

.logo-container {
  position: relative;
}

.tagline {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* move the tagline beside the logo */
  left: 200px;

  /* no margin/padding for better centering */
  margin: 0;
  padding: 0;
}

Don't Try to Reminplement HTML in your Rectangle of Joy (redux)

Tue, 28 Dec 2010 13:21:11 GMT

As a brief addendum to my previous post about HTML, I just thought I'd point out that Google's Webmaster Tools work on my phone while Bing's do not.

Obviously, checking on your website from your phone may not be a core use case (after all, the only reason I know it works on my phone is that I've been travelling and just happened to try it out while away from my "real" computer) but phones and other mobile devices are an increasingly important way people use web applications. Consequently, if your web app lives inside a Flash or Silverlight rectangle you're cutting off an entire class of uses.

Don't Try to Reminplement HTML in your Rectangle of Joy

Wed, 15 Dec 2010 21:22:03 GMT

I recently signed up for the Bing Webmaster Tools and it prompted me to install Silverlight. I thought: "That's kind of weird... I'm pretty sure I've got Silverlight... I mean Netflix..." but I installed it, restarted my browser and... it prompted me to install Silverlight again. Okay, Silverlight doesn't work with the Firefox 4 beta, duely noted. It not working with a Firefox beta is legitimate legitimate. Even if someone in the depths of the bat-cave in Redmond has Silverlight binaries that work against the current Firefox betas, I can see not releasing them until it RC's. I get it, but it's still a lame user-experiance.

I switched to Chrome, and then the real page actually rendered. Good. I started pokeing around and land on a page with a scroll bar so I tried to scroll down... and nothing happened. I tried again, nothing. I looked closer. The scroll bars are wrong, text selection doesn't work, neither does Ctrl+Click, and the text is just wrong. It's kind of noisy. At this point that I realize that the whole page is Silverlight rather than just the graphs and fancy bits.

The Take Home Lesson

Don't try to make you're alien rectangle of joy do what HTML does.

The second you notice that you're headed down the road of implementing browser features in JavaScript, Flash, Silverlight or whatever, stop, turn around and start heading back, because here be dragons. Don't try to make this work. You're not going to get it right. Microsoft didn't get it right, and they have way more dudes than you. I'll grant you that HTML+CSS+JS might not be the most powerful client-app toolset ever imagined, I mean even getting certain things to even just line up can be a pain, and the siren song of a single place for documentation/tools must be alluring, but you're not going to get it right. Browsers do so much. They are huge pieces of software that that do all kinds of stuff and you're not going to be able to copy the behaviour people care about in any meaningful way (especially since there are ways that the browsers legitimately differ when it comes to things like "What happens when I right-click on a link?").

Play to the browsers' strengths. Laying out text? Linking pages togther? Use HTML. Save shelling out to your magical rectangle for things that browser's don't already do well (like rendering interactive 3-D environments :-). Even shelling out to Silverlight to draw graphs is kind of boarderline at this point because there are lots of tools for drawing charts with JavaScript+HTML at this point and they will almost certainly give you a better result.

Embrace your platform. Don't try to build around it, lest you end up re-implementing it poorly.