The Importance Of Dynamic Content
As most people know, both WordPress and Drupal belong to the class of software known as content management systems (CMS). The benefit of these systems is that they allow users to create content easily, often by typing in content via a dashboard or some other simple form of entry. The actual HTML generation is taken care of by the CMS, allowing the user to focus on creating content without worrying about the details of the HTML.
I’ve had my personal blog for nearly ten years now, and have been on WordPress for nearly three. As I write content, there’s always the implicit expectation that my content will come with me wherever I go in the future, no matter which CMS platform I end up choosing. With that in mind, it’s important for that content to translate properly as technology and our use of that technology changes (for example, screen resolutions increase, or the world shifts slowly towards mobile blogging).
When an image is inserted in a post, many people still hardcode the width and height parameters of the image. The problem with that approach is that it generally ties the content to a particular presentation, and makes it difficult to transition in the future. For example, let’s say you manually specify a width of 400px for an image. If one day you decide to change your theme post area to display 500px worth of content, suddenly all your images are too small. To fix the problem, you most likely have to go through and manually edit every IMG HTML tags to change the width. On a blog with 1000 entries, that doesn’t sound particularly exciting, does it?
A far better approach is to use CSS to specify the desired width and height. Most modern browsers support the “max-width” parameter, and those that don’t typically have workarounds. With that approach, you can simply change the layout via CSS whenever you want to overhaul the look and feel of all your images.
For some people, that probably sounds really straightforward. And yet, many third party plugins (and in fact, some popular CMS systems), add hardcoded width and height parameters to content. Every use video from YouTube or other services? If so, you’ll also probably notice that the EMBED code contains specific width and height parameters, which for most people don’t work well with their blog’s theme. What happens when you view a 500px video on a 320px screen? You could be in trouble if the width is hardcoded.
We fixed some of these problems with Blip.it, and made the plugin automatically generate it’s own width and height. We’ve also been testing out a new BraveNewCode video plugin on my personal blog that addresses this problem in a more generic way. Using WordPress 2.5 and above, you can simply use a shortcode to access any video on the web, and have it automatically size to the proper dimensions on your blog. Should you adjust your theme presentation sometime in the future, you can simply adjust the width and height for all videos in the dashboard, and have all your previous content automatically change as well. In addition, the code generated by the plugin validates against W3C in all cases, unlike the EMBED tag (that YouTube and others still provide) which was deprecated.
Anytime you generate content that has an explicit width or height tied to it, you really need to stop and think if there’s an alternative. You may very well be affecting the future look and feel of your website by doing so.
5 Comments
-
A prevalent line of thought about specifying width and height when using an tag is that this allows the browser to parse the image faster; it knows how much space it needs to allocate in advance, rather than relying on a CSS declaration or examining the width of the image itself. As a web developer I do this, as do a lot of others I know.
Also, I was a bit puzzled by this: “For example, let?s say you manually specify a width of 400px for an image. If one day you decide to change your theme post area to display 500px worth of content, suddenly all your images are too small. To fix the problem, you most likely have to go through and manually edit every IMG HTML tags to change the width.”
I’m not quite sure I understand what you’re implying. If you change your theme post area to 500px instead of 400px, your images won’t change size whether you specify the width or not. If the image is 400px it’ll still be 400px. Are you talking about using CSS to stretch out of proportion in order to fit a container? If so then I humbly suggest that your results will probably look silly. If you change a container from 400px to 500px and the images within are 400px, if you want them to be bigger you’ll still have to manipulate the images.
-
BNC Development Guru
1 year, 7 months
Obviously it depends how much you scale the image up, but in most cases I’ve run into it, the image was larger than the post area anyways, in which case you were already scaling it down. For example, most people I know include Flickr photos in their posts, even though the standard Flickr size is larger than their post area. In that case, it’s definitely possible to adjust the size of the image via CSS and still have it look correct. Also, I would argue that in many cases, scaling an image or a video up by 10-20% looks far better than having a smaller version that looks obviously out of place in the context of the rest of the content.
I’m not sure I buy that specifying width/height speeds it up. I mean, CSS is parsed before the image, so it could potentially read that before it reads the inline definition for the image. Also, I’m fairly sure that XHTML strict doesn’t allow any width/height or inline styles either, so using those elements basically means you’re forcing your clients to be in transitional or below when designing their sites.
-
BNC Design Guru
1 year, 7 months
As an addendum, are the nanoseconds gained by hardcoded declaration worth a dime, really? It’s more likely that the optimization of the image itself for the web will yield far greater results in terms of speed than in hardcoding its width and height.
-
Hardcoding the dimensions in the HTML does speed up rendering, depending on the layout.
But anyway, that doesn’t matter since the difference is neglibile in most scenarios in this day and age.
Good post. CSS can override inline HTML widths though, so perhaps part of this post is moot? I used max-width for my iPhone CSS layout (which is not perfect yet, but getting there).
Die IE6!
Random: Your RSS feed has blown up with about 27 new RSS entries for 2 new posts. I clicked on one to get here and it went through about 5-10 (no idea) feedburner redirects. What is going on?
-
That’s a problem I’m trying to figure out right now. I coded my own blog from hand, and I’m still working on making some adjustments and improvements. The next thing I’d like to add is a image uploading script, but what how should I resize the image? If I make it too small, then it looks bad if I decide I want to make it larger. If I make it too big, it takes too long to download. Ergh.
As a side note, I’m sure you’ve probably noticed, but for some reason this post keeps showing up in Google Reader. Right now for your RSS feed it’s just this post, thirty times. Don’t know what’s going on there.
