I’m building a one column website, with nice big 17px body text.
It would be very easy to make responsive: using percentage width and max-width. But more of a pain to make heights, vertical spacing and font size responsive or proportional to the width.
i.e. as an industry we have the tools to make a site responsive in terms of width, but it is much more laborious to make height responsive: every item has to be altered at every break point, whereas widths can be fluid.
So…
For my one column site, it is much easier and arguably better to scale the site using viewport scaling. On a tablet or phone the site scales to fit the viewport. Everything is kept proportional and it looks better.
In a responsive design, just as widths are a function of device-width, I
think heights should be relative to content size/length.
As a print designer, there were very different expectations for “user
interaction” or “user experience”… the viewer used their eyes, and you
really just considered reading-distance. Preservation of design appearance
could be more easily supported and enforced.
However, designing for the web - and now devices - is just so different. I
think that visual appearance doesn’t connect users to content in quite the
same way as it did with print. Instead of attracting users with slick
design tricks, the content itself must be worthy and rewarding of their
efforts to view it.
This is good I think - it’s certainly teaching me to abhor the soulless
marketing-babble that filled my print career and embrace a very different,
content-first approach to my work. Hardly easy, I find that I have to be
craftier about my presentation and a whole lot more flexible with my
creative “vision”.
These are just thoughts, and very late-night ones at that. I’d want to just
focus on making the content accessible, even if it meant loosening my
spectacular design.
“Content first” is one of the reasons why I’ve gone for a simple one column layout: there are no distractions, no fluff, just the content.
The second reason for going with a one column is that it is also “mobile first”.
Using viewport scaling or fluid widths it will work on mobile and desktop. On desktop I plan to employ background images or colour to ‘fill’ the screen, so that doesn’t just look like a monolith drowning in white space.
What interests me is that RWD is held up as the holy grail, but it seems for my site that viewport scaling is a lot better. Everything simply scales up or down proportionally depending on the viewport width.
There are methods that you can use to make vertical adjustments fairly easy on responsive websites. These tend to hinge on using ems or rems as size units for things like padding and margins. However, these don’t integrate very well at all into a Freeway environment.
According to my limited testing, practically all devices should support viewport scaling (with the exception of Opera Mini on Android).
In essence, because the browser support is practically the same, do whatever is easiest, as long as you aren’t having the compromise on usability. The site that you linked to holds up very well on mobile devices, with the exception of navigation links being very small. However, fixing that with some responsive CSS would be easy.
Do what works best and is easiest to implement. Test on many devices. Be happy. Save the world.
“The site that you linked to holds up very well on mobile devices, with the exception of navigation links being very small. However, fixing that with some responsive CSS would be easy.”
That’s interesting. You’re right it is too small. But I don’t think that adjusting the CSS at certain break points will work. The viewport is fixed (at 640px), so there won’t be break points.
This is obviously a problem with using viewport scaling - you don’t get the fine control over elements – everything is simply scaled proportionally.
I need to look into rems (ems sound difficult to grasp). Do all browsers support rems? Presumably I could measure everything in rems (and percentages for widths) such as text, line-height, padding, margins etc? Could I then alter the size of the rem at certain break points, automatically and proportionally adjusting the size of everything by altering one line of code?
I understand it is tricky to work in rems in FW - so it is just as well that I’m starting to hand code (a lot easier than I thought it would be).
