Arguments against responsive/adaptive web design

It’s actually the perfect answer.

Yes and no. Mobile is not just for people on the move anymore. I have read this before in articles, and it rings true on a anecdotal level too, what with faster phones, larger screens, and better usability, people are surfing the web on their phones, no longer being a “user on the run.” In fact, I use my home computer less and less, if at all, to surf the web casually. I use my phone now while sitting on my couch. So the assumption that people are not using their phones for casual surfing can lead developers to exclude information that the user may still want, like the range of info and capabilities. I can tell you just for myself, I still want those features while I am on my couch with my phone, rather than having to fire up the computer, or view the desktop version. What’s the solution? Who knows, but I would be wary of that assumption.

Exactly. No assumptions about what the mobile user wants unless you absolutely know for sure, regarding your using audience.

Yes, but as a little home test, I surfed a news site full version one week, and the dedicated mobile version of the same the next week, and I noticed that the dedicated mobile site was WAY faster, was getting pretty much the same news content, and it sucked my battery way less. I bet that has something to do with the fact that the dedicated mobile site was able to control the scripts downloaded to the phone, rather than all scripts downloaded from the desktop version even though only viewing the mobile adapted version. Seems likely.

So you do all your layout in CSS? Do you use Photoshop (or other paint programs) still after that? For me I’m having a hard time realizing how you design the site though without a layout in mind. Could you explain your process of how you do it?

and I noticed that the dedicated mobile site was WAY faster, was getting pretty much the same news content, and it sucked my battery way less.

Less BS is fed to the “mobile” versions.

Frankly, it’s usually not that desktop users are actively asking for that crap, they’re just fed it and they don’t necessarily notice all the stuff it does.

They possibly also needed to cut back on 3rd party advertisments or serve them in some other way for mobile.

Which is a big HINT HINT to current web sites to quit bloatin’. There’s a reason plugins like Readability are popular.

So you do all your layout in CSS? Do you use Photoshop (or other paint programs) still after that? For me I’m having a hard time realizing how you design the site though without a layout in mind.

Some of us only ever learned to make layouts with CSS, after getting architecture and content flow setup/tested, so wasting time in an image editor doesn’t help us any.

You started out that way, you think visually, so for you that’ the fastest way to get going.

Now Crusty’s probably going to say something about how he once was an art-fart as he occasionally does, but frankly I doubt that he ever really visualised things the way real art-farts do.

You can probably still teach yourself how to whip out a multitude of layouts using CSS alone rather than some image editor… heck, Stephen Hay is giving a course on it like next week in Utrecht or somewhere (Rabid Prototyping), but it takes time to train your brain that way I would wager, if it’s already wired for Photoshop.

Exactly. And that’s why it’s important to give people access to the full site if they want it.

Yes, but as a little home test, I surfed a news site full version one week, and the dedicated mobile version of the same the next week, and I noticed that the dedicated mobile site was WAY faster, was getting pretty much the same news content, and it sucked my battery way less. I bet that has something to do with the fact that the dedicated mobile site was able to control the scripts downloaded to the phone, rather than all scripts downloaded from the desktop version even though only viewing the mobile adapted version. Seems likely.

That’s where the “server-side wizardry that gives a slimmed-down page without all the cruft and fancy-pants scripting and artwork” that I mentioned comes into play. The news site is unlikely to give you different content on the mobile version, you won’t see different articles so there’s no need to maintain a separate site – but the pages are automatically converted into a low-bandwidth mobile-friendly format on-the-fly. Obviously, whether you want to invest in that kind of technology depends on resourcing and traffic levels.

You know…I’m thinking if more web designers/developers start thinking and designing more responsibly responsive then most likely web as a whole will be a better place, even on the desktop. I guess I’m thinking more utopia…ish. :slight_smile:

Yes my brain is very trained. But I’ve gotta retrain my brain for a lot right now…so I figure now’s a good time to just relearn the way I do things and learn a new way. So basically you treat the browser(s) and your CSS as your layout program? Or your “Photoshop”? So instead of Photoshop being your canvas, the browser(s) becomes your canvas. Right? Or am I still thinking in the wrong concept. I think I am because then it’d still be device dependent right?

So are talking about wizardry other than simply building an adaptive website? From what I gathered in the original article on the original post of this thread, if the news sites employed that technique, their mobile sites wouldn’t by anywhere close to as fast as they are with dedicated mobile sites, because mobile users still have to download all that scripting crap, right?

Are you talking about server side wizardry that allows for a mobile dedicated site, without the need to maintain a double publishing system? That’s something I would like to look into even though I am not a scripter by any means.

Me too. I have always started in Illustrator because it allows me to work fast, while understanding how I will achieve the final product with clean CSS and HTML. The reason I have always done that is so I can provide comps to the client before work begins.

If I build in CSS, then use Photoshop/Illustrator to add graphics, doesn’t that mean I have completed the project before the client sees and approves it? I definitely want to learn better methods, but I don’t want to end up building an entire project out before its approved. Because if they hate it, I have wasted all my time.

That’s exactly it. You’d need to use PHP or a CMS of some sort to put the actual page content into lighter ‘packaging’. (Disclaimer, I have no idea how to achieve that, but I’m certain it can be done!)

Yeah, the people who submit the articles on news sites probably have some kind of customized CMS that publishes to both places. I’m sure there is a third party CMS that would do that.

So basically you treat the browser(s) and your CSS as your layout program?

Yes. Which means you mostly have to already have the basic idea of which content goes where and much navigational structure already, otherwise you have nothing to start with (and this is sketches on paper and whatnot, though I know there are some very expensive wireframing programs out there as well).

So you have an idea of the ideal source order, and you start throwing examples of it into HTML (even if it’s just divs, but ideally you have enough real content to use appropriate tags), and then with CSS you just do real quick outlines: use borders or background colours to show sizes and positions, and really nothing more.

The benefits of this are: this basic setup will already work cross-browser, because you built it that way. It also gives you examples you can show on screens of various sizes, so assuming the content is not supposed to be radically different for mobile, you can show right there and then what these boxes will do on “mobile” size screens. Or TVs. Or whatever.

Throw it up on a server and the client can see it as well. If you choose garish colours then nobody will wonder if that’s the real colourscheme (we’ve all heard web companies say sometimes their clients think the lorem ipsum is the real text and “we don’t speak Latin here”!). Colourschemes and fonts and spacing and whatnot come later.

I would think that this would be when you bring in the designer. They have a skeleton they can see and play with on a screen, and then they can do whatever mockups they want to show the clients. If they either know CSS themselves or work with the front-ender, that’s ideal. The Designer can come up with ideas and the front-ender can implement them, and at some point the basic layout is stable enough that the designer can go make a “mockup” for the client to look at. There, the client is approving fonts, colours, spacing, shadows, whatever. All that extra stuff.
And after the the client okays that and the front-ender has a go at implementing it, time for more user testing! Those colours sure are perdy, but are they readable?

One of the biggest mistakes charity web sites make is not making it clear how to donate! for example. Some of those sites look great! They were done by professional designers. But the content didn’t come first (and that may not have been the designers’ fault, but whoever thought up the content-flow of the site, or the lack of usability testing).

To me, the idea that you draw for clients a picture of how their website might look in Safari 5 on a 27" Cinemac monitor, and then several more, and then have the client pick one… sounds like an idea fit for vanity sites like luxury products (who even today are mostly Flash). Those aren 't really web sites, they’re large web-based advertisements, works of art on their own. They aren’t supposed to do much except look pretty. They aren’t supposed to work on a wide scale of screen sizes.

But I also realise that’s how much of the business works. Client expect to see several, full-scale and almost-complete-looking mockups, because yes, they don’t know what they want til they see it. That’s pretty much endemic in humans. Also, when several companies are bidding for a project, the winner is often based on who makes the prettiest mockup. But if you’re starting with the design they pick and then trying to stuff the necessary content inside, I personally believe that makes usability problems where none should have started. It means that drawing of a website on a 27" monitor now needs a whole new idea for the “mobile” version.

View this page* in a small (less than 400px wide) browser. That’s actually what I started with (minus the colours and stuff). I wrote that design first, in CSS (layout-wise). Later I took that HTML and made a “CSS mockup” of what it would be the main page on desktop, so the boss could see and okay it (or not). He wanted changes with the buttons and whatnot, it was shuffled around a bit, but he never saw the mobile base (maybe by now he has). Since the mobile base was mostly done, it was pretty easy to hang stuff on it for the “desktop” version, and you see in the mobile style just background colours… I made the actual images like the logo and the textured stuff later.

*the markup is only partially mine. Every time I show that site, I also cringe and want to point to my actual code and say “see??” but, meh. I need to learn to deal with dirty paws on my code and grow up.

If I am not mistaken, I believe this is why the grid systems were invented, like YUI, blueprint and 960.gs, to quickly mockup sites without the intention of actually using them in the final product since they are not semantic.

Nice. Is there a reason why you used HTML 4 instead of HTML5? I was thinking since I have to do mostly everything from the ground up I may as well start with HTML5. But I was just curious why you’re using HTML 4. I see it’s strict so there’s probably no need to change it right? But if redesigning a site and starting from the ground up do you suggest using HTML5?

BTW, I haven’t gotten a chance to completely read everything, but this seems to say it provides to solution to the loading of big images on adaptive sites.

Creating responsive images using the noscript tag | Head

Is there a reason why you used HTML 4 instead of HTML5?

I know that you were asking that to Stomme poes, but it could be because HTML 4.01 just plain works and is actually a standard.

True and I understand that. So what are the reasons then for jumping into HTML5? Is it simply because of some of the new features that people are starting to use it? What should we be using? Does it matter?

Impatience? Irrational desire to do whatever X does because that must be the new right way? Not stopping to think that HTML4 works perfectly adequately, is virtually device-agnostic, and is actually set in stone as a standard that isn’t at risk of changing while you’re looking elsewhere. Certain new features make some sense in some cases, as long as one can be sure that they degrade gracefully.

So can CSS3 be used with HTML 4.01 Strict?

Yes, of course! The two are completely independent standards. The same caveats about graceful degradation apply, naturally.

I use a lot of CSS3 in my site, but not served to IE8- and not used in a way that could cause issues if it fails.

As I said before, the paint program is still involved, but I call upon it LAST to make things like border images, gradients, backgrounds and other presentational affectations that may or may not apply to all media targets. Background images and gradients for example have no business wasting people’s ink when sent to media=“print”, so you change those all to background:none; – as a rule for print I usually just display:none menus and “read more” links, set it to black text on white background, and use just text for all the content elements…

The process is thus: First thing I ask is “what’s going to be on every page of the site?” – simple question, usually it’s the topmost heading (site logo/name under which all other headings are subsections), the main menu, and the page footer typically with a disclaimer in it. I plug these into HTML using semantic markup, typically inside a div#pageWrapper to set any widths, heights or other desired layout on. I then take a sample page – like the home page, and repeat the question; what’s going on it? First thing would be the “main content” area like news posts and intro text to tell people where the devil they are. (SO many websites fail miserably at the latter – assuming you have any clue what you’re looking at). I usually put them in that order inside div’s… like say div#subSection… and since most of the time content goes into a two or three column layout with content being the dynamic, I’ll toss in a double wrapping div#contentWrapper, div#content just because on 99% of websites that’s how they’re laid out. Heading tags as appropriate making sure I have a valid and proper heading cascade (for people who navigate via headings like the blind), toss in a few horizontal rules for CSS off users and to semantically say where sections started by major headings end.

I also rarely would ever use images larger than 256px wide or 32K pixels total as they are too large to be deployed on a website IMHO.

I also maintain on my sites a set of ‘targets’ for size of everything combined – that’s HTML+CSS+SCRIPTS+IMAGES – 70k in 16 files is the ideal, 140k in 32 files is the maximum I’ll allow on any page with the possible exception of a gallery page.

In any case, once I have nice semantic markup of the content (or a reasonable facsimile) I start making the screen layout using CSS. By making the elements be placed and sized by CSS, the content and layout can dictate what images to use dodging the bullet of ever having to worry about shoe-horning content into images they don’t fit. I set the outermost wrapper, I set the column widths, I toss in some attractive paddings and margins (usually working in multiples of 2, 4 or 8 since the math is easier AND it’s easier for the computer to work with on rendering)… set the background and foreground colors to something attractive and accessible… and poof, screen layout. Goes very quickly and it’s easy to move things around accurately – MANY times easier than dicking around with layers in photoshop. Client asks “can this text be bigger” you go “sure” change one line of CSS and the whole layout adapts. “Make this brighter” – edit one line… “space these out more” – add padding to one element target, poof they all reposition.

Only at the end do I even THINK about what I want to hang on the layout for images – sometimes I’ll screen-cap the page so I have a color and size reference – then do a paintover keeping in mind that some things need to grow in width, EVERY major content text element should be able to adjust it’s height as the maintainer adds/removes/edits content OR when the user is using large fonts/120dpi or larger settings (something around 80% of sites designed in photoshop fall flat on their face in regards to).

Used to be I used a script I call quickswitchy (which was way simpler than mcSwitchy) to swap a class based on width – I still do this feeding people without scripting a crappy little stripe. Now with media queries I’ve expanded that for phone support too.

To give you an example, this is a template for an upcoming re-launch of one of the websites I maintain… which is in a holding pattern right now waiting on the CMS it’s going to run on to be completed (right now a three man project).

Index of /cbt4Template

That was built on exactly the process I describe in about two hours. View the page with images disabled. Try it with CSS disabled and images on. Try it CSS off images off… Change the screen width and watch the entire layout shift to fit… Admittedly it loses some of the presentation IE8 and lower – but big deal, the layout is still FUNCTIONAL in those browsers. Unfortunately it DOES exceed my size target, being 190k in 24 files – but that’s still better than the current website chock full of nasty web rot, half assed coding techniques, and other vomit that I slapped together 7 or 8 years ago before I understood any of this stuff – which tops out at 160k in 64 files under normal circumstances – but I have to smack the news maintainer around with a wet trout as the news page is now an ungodly 11 megabytes and bloats the home page out to 2 megs… Time to dig out [url=http://homeelectrical.webs.com/photos/electrical-tols/hand%20reamer.jpg]this handy tool.

Sad part is that’s a step up from the DHTML nightmare that preceeded it, or worse the “slapped together in a wysiwyg” before that. It’s kinda comical that with each iteration the page looks better and gets smaller.

Admittedly said layout is not the graphical gloryland your PSD jockeys sit around wanking each-other off over – but neither are any of the major Internet successes. Facebook? E-Bay? Amazon? Google? Not exactly a graphical tour-de-force which is why your artsy-fartsy crap is rarely seen outside personal blogs, local companies who don’t realize their website is a money pit instead of revenue generator, and your art trend gallery websites like “zen garden” – which may be very attractive – and most always ultimately USELESS from an accessibility standpoint with their crappy fixed widths, crappy absurdly undersized px metric fonts, illegible grey on grey or tan on tan well below contrast minimums, serif fonts combined with the small sizes making text even MORE illegible, and most always desiged with the “designer first, who gives a rats posterior about the content.” attitude. (zen garden’s home page alone is proof enough of that)

Again, often very pretty, but ultimately useless if it interferes with reading the content, adding/removing content, or getting your content out to people…

In other words, treat text like the first class citizen of the web it is. Whoever said “a picture is worth a thousand words” lost sight of the fact that you often need one explicit word to get the job done…

Let’s say we were trapped on a beach and didn’t speak the same language. I held out a hot cup of coffee and said “tchukala” – what did I say? Drink? Hot? cup? Coffee? Here? Have some? Want some?

I know, I know… don’t gimme that smegging Star Trek crap, it’s too early in the mornin’

After all, there’s a REASON constructed speech supplemented (as heiroglyphs) then eventually replaced pictographs. Roman lettering and Arabic numerals FTW.

Is there a reason why you used HTML 4 instead of HTML5?

It’s an update of an older site. Here’s the old shell still sitting on another, releated site (ugly, huh…, that design predates me by several years!). I just kept the doctype. No reason not to… other than, when I use (legal) ARIA attributes, HTML4 doctype makes the validator whine. HTML5 doctype, it doesn’t, however ARIA, like CSS3, has nothing to do with which HTML doctype you’re using, so you can just ignore.

I actually validate with the XHTML strict doctype (just tell the validator to substitute), so that I can get caught where I’m not strict enough while keeping whichever crusty doctype I actually have… since, again, browsers don’t actually read doctypes… they just check that they’re complete.

HTML4 also whines about negative tab indices, but I’m using those pretty much for IE6 to work, and sighted keyboarders don’t tab onto empty nothingness. Oh well.

However on my own, local copy, I have added some HTML5 goodness: new form input types on the forms pages (“Direct Afsluiten” is basically a page that’s all form), some of the new attributes like “required” (and also the ARIA versions, and watch out! HTML5 boolean attributes are true when they exist and false when they don’t! ARIA “booleans” can always exist in the markup but be set to =“false” or “true”!).

Turns out, browsers who know any of the new HTML5 junk really don’t give a rats what doctype you use, so I discovered I could update the stuff that might help users on mobile (new input types on some phones offer more targeted keys on the touch screen) without having my colleague change teh doctype. Which is fine by me.

What should we be using?

Only the stuff that works today, degrades in all browsers without needing a crapload of scripts, and is accessible (cough cough canvas cough cough). Don’t use <canvas> for anything other than changing the colours of pixels on a screen, becuase that’s all it does today (Doug Scheppers? is working on an idea to combine canvas with svg so there are working objects in the canvas that AT can latch on to… but I’m not holding my breath.) No building GUIs in that thing, that’s retarded. Use svg : )

Many of the new form input types only add awesome (color is a huge, obvious exception to this) and degrade to type=text otherwise.
Leaving types out of your <link>s to CSS files and your <script> tags… why not? Browsers have been ignoring them all along anyway.
The meta charset=“utf-8” works because apparently so many people had been getting the correct version wrong for so long (putting quotes in teh wrong order) that browsers understand it even though “charset” is not and never was a valid “attribute” of the meta tag. Shrug.
I’m staying away from most of the new elements simply because today they are still tripping up screen readers… I’m giving it a few years. Plus IE needs Javascript (sure, it’s small, but…) just to see the tags, and that goes against my Tim Berners-Lee hippy ideal of teh interwebs.

But… it likely depends on your audience and just keep in mind that any of it could be revoked at any time (look at <hgroup> jumping in and out of the spec…) and that there are, in fact, two competing specs, who disagree with each other in various areas.

Admittedly said layout is not the graphical gloryland your PSD jockeys sit around wanking each-other off over – but neither are any of the major Internet successes. Facebook? E-Bay? Amazon? Google? Not exactly a graphical tour-de-force which is why your artsy-fartsy crap is rarely seen outside personal blogs…

I will argue that while I’d prefer a working, ugly site, there is little reason why someone who is good at design can’t take something that’s well-built and also make it the very best art-fart-ness has to offer. That’s what designers are good at, and you can take any functional site and make it more eye-candy-licious with a good designer (a good designer is one who understands the web and is aware of device, browser differences and keeps an eye on total filesize).