commadot.com

Responsive HTML Templates

There has been alot of movement in “responsive HTML” over the last 2 years.  Basically, responsive means that the page will morph as the screen gets smaller.  It changes to use the available space more effectively. All the way down to the phone browser level, it changes fonts, image sizes, padding, etc etc.  All to make the experience optimal for that sized screen.

In 1997, I lamented about how hard it was to deal with Netscape and Internet Explorer and their versions, plus 640×480, 800×600 and 1024×768.  Now there are three major browsers that update every 3 months on hundreds of screen sizes.  The matrix has gone up exponentially.  How do you QA something like this?  How is this sustainable?

I was trying to design a page editor application that gave a non-programmer power to make responsive pages using as much WYSIWYG UI as possible.  It’s incredibly complex.  There are so many variations and approaches.

Responsive HTML Templates work best when your layout/content scope is going to remain static.  A blog is a good example where you know the structure is not going to move around much.  It sucks when your layout is changing all the time, like a public website or even an application of moderate-high complexity.  If I was making a portfolio site, I would definitely consider a responsive template to get me started.

It’s good to stay on top of the latest trends, but this one feels like it is highly unsustainable by mere mortals.  It’s the best we have at this time.  I wonder what layout strategy we will take 10 years from now.

Not the most insightful blog post, but it was on my mind.  Besides, how will you know the good posts from the bad if they are all good.

Comments

12 responses to “Responsive HTML Templates”

  1. StartupProduct Avatar
    StartupProduct

    Thanks Glen!
    We reposted this with highlights at http://bit.ly/19NfRqo and got some tweeting feedback which I’ve directed back here to continue the conversation!

    Reply
  2. Sallie Goetsch (@salliegoetsch) Avatar
    Sallie Goetsch (@salliegoetsch)

    The term is “Responsive Web Design,” or “RWD” for short. It’s controlled primarily by CSS, not HTML. You have to add media queries to your CSS stylesheet for each different screen size, or size range, that you want to design a layout for. It makes creating a theme much more time-consuming, and it has some drawbacks, including the impossibility of WYSIWYG for all screen sizes. Many people think that RWD is a transitional phase, but we are not sure what it is a transition TO.

    Your own theme is supposed to be responsive, but something is messing it up. I would say it’s the background image. This theme isn’t supposed to allow for one, and background images, unlike regular images, do not scale. Your header image will scale; your galleries will scale; but background images are not placed within a and can’t be sized in percentages.

    Reply
    1. Glen Lipka Avatar
      Glen Lipka

      My template works OK in phone screens but isn’t ultra responsive. I’d call it mildly responsive. There are templates out there (not just wordpress ones) that go to town and have a staggering amount of flexibility.

      Reply
      1. Sallie Goetsch (@salliegoetsch) Avatar
        Sallie Goetsch (@salliegoetsch)

        You’re using Twenty Thirteen. If you look at it on my demo site at http://mediabistrobeta.rhymeswithsketch.com, you’ll see it responds perfectly. Ergo, there is an issue on your site, either specifically with your theme, or with the particular beta of 3.6 you are using versus the one I’m using. (I didn’t update when I heard they’d taken out the new post formats UI.)

        Reply
        1. Glen Lipka Avatar
          Glen Lipka

          I modified it…hmm, maybe I broke it’s progressiveness. 🙁 I will try and fix it.
          UPDATE: Yeah, I was trying to bring the margins in and it messed up the progressive part. I eliminated it and its working fine.

          Reply
          1. Sallie Goetsch (@salliegoetsch) Avatar
            Sallie Goetsch (@salliegoetsch)

            Yep, that was it. Twenty Thirteen is a fun theme if you like post formats, but it is designed to take up the full width of whatever size browser you have. Also, don’t modify a theme’s files directly. Always create a child theme or use the custom CSS module in Jetpack. Otherwise your changes will be overwritten whenever there is an update.

            Twenty Eleven and Twenty Twelve are also responsive themes, and there are many other responsive WordPress themes for different types of sites. Twenty Thirteen is aimed at bloggers, particularly those who use different types of media, quotes, etc. Twenty Twelve is more for business sites. Graph Paper Press sells some great responsive portfolio themes for photographers. The latest themes from StudioPress and Elegant Themes and Woo are all responsive (with varying degrees of success at different screen sizes).

            Anyway, if you search for RWD or Responsive Design, you will find tons of tutorials and debates as to its merits. We did a meetup about it in April. Converting an old design to be responsive is harder than starting out with a base theme that’s already responsive and modifying it.

  3. Glen Lipka Avatar
    Glen Lipka

    Yeah. I worry that the responsive approach will be superseded by something else in a few years. It makes it hard to design a WYSIWYG interface to design these. (That’s part of what I am working on)

    Reply
    1. Sallie Goetsch (@salliegoetsch) Avatar
      Sallie Goetsch (@salliegoetsch)

      This is the Internet. You didn’t expect anything to stay the same for more than a year or two, did you? I’ve been building websites since 1995, and this year’s best practice always becomes next year’s worst blunder.

      There has never yet been a really good WYSYWIG web design tool. Most of them generate appalling code and none of them lets you do what you can do if you know HTML, CSS, and PHP. What’s more, entirely too many of them seem to have the wrong aim: turning your web editor into InDesign. Print is fixed; web is not. I’d rather see tools that help people take advantage of the fluidity of the Web and of devices like the Kindle where layout is in the reader’s control.

      Reply
      1. Glen Lipka Avatar
        Glen Lipka

        My first website was in 1994. Certainly have come a long way since then.

        My job is to design web applications that allow marketers to do for themselves that otherwise would have been done by web developers. That empowerment is more important than good markup.

        With that said, I want to design/build something that will last at least a few years. 🙂

        Reply
        1. Sallie Goetsch (@salliegoetsch) Avatar
          Sallie Goetsch (@salliegoetsch)

          “More important than good markup…” Only up to a point, because bad code will defeat the purpose they’re aiming for. And if they don’t understand anything about the medium, they may have the wrong purpose. A car is pretty usable, but if you start driving without knowing the highway code, you are a menace. Do we want to make it possible for the marketers to create monstrosities? Giving people DTP didn’t give them design skills.

          So do you REALLY want to give your client the ability to insert every random font, color, table, etc. into your site, break the layout, and so on, in the name of empowering them? Will that help them achieve their business goals? Or do we want to give them the tools that actually let them do their jobs? (Of course, there is no one size fits all for those jobs, which is why you get software, and themes, with too many options/features, most of which most users don’t use.)

          Very often it goes like this: Client thinks s/he wants the shiny, the theme with a billion options, half a dozen sliders bundled in, extra this, extra that. Client installs it, sees so many options to configure she can’t begin to find out where to start, panics, runs away. Price of theme now wasted. Theme is useless for customizing via code–the ones with all the options always are.

          Or the client installs the enhanced visual editor, proceeds to mess about with font sizes and colors and highlighting and this and that. Can’t figure out how to undo anything she’s done wrong. Creates an ungodly mess and has to pay someone to fix it, when spending an hour or two learning just the very basics of HTML tags and shortcodes would have let her look at the HTML editor and fix the problem. (And when knowing anything at all about design would have kept her from using so many darn font sizes or applying them as something other than heading styles to begin with.)

          I’m very much in favor of empowering my clients, but also of educating them. Sometimes it will be less work for them to learn and use a little code than to try to work around it.

          Reply
  4. Glen Lipka Avatar
    Glen Lipka

    Thank you, oh bringer of great wisdom. I am better now than I was a moment ago. I need to spread the gospel. Hallelujah!

    Reply
    1. Sallie Goetsch (@salliegoetsch) Avatar
      Sallie Goetsch (@salliegoetsch)

      Okay, I WAS getting a bit high and mighty there, wasn’t I? I have a very bad tendency to lecture.

      Reply

Whatya think?