by Alex Holt | Mar 17, 2013 | Dev, Web |
There is a definite lack in technology preventing responsive design from being the amazing revolution that it should be. The big issue is that as yet, there isn’t a good way to tap into the wider context of a use case – we just get to look at screen size.. The premise here is, if you’re viewing a site on your mobile phone, the use context is completely different to if you are viewing it from google, thus the content that you need front and centre may very well be different also. Imagine a fictional design studio – you’re heading to a meeting with the creative director and you’re running late. You realise that you’ve left the studio’s address on your desk at the office, you know which metro station you’re heading to but you can’t for the life of you remember what street their office is on. SO: you fire up Safari on your iPhone (or whatever browser / smartphone you use – you have a smartphone, right?) and you google the company. Upon hitting their website (we’re going to assume it’s *not* an old school flash site that probably wont work at all – rather, we’re going to assume that since you’re going to meet these guys, they’re on top of their game; their website is standards compliant and uses recent technologies).. So: what you really need in this use case is, ideally: their address details and a link to a google map showing where their office is OR alternatively, a quick link so you can phone through and ask their receptionist for the address. A desktop user... by Alex Holt | Nov 17, 2012 | Dev, Web |
I’m in the (very slow) process of porting a few of my more content heavy sites from their old CMS systems across to docpad and http://node.js. One of the things i’m doing is converting all my CSS to SCSS – which i’ve previously always done by hand. However i just found this:http://css2sass.heroku.com/, which allows me to paste in CSS and it will actually convert it to SCSS. This includes intelligent rule nesting... by Alex Holt | May 25, 2012 | Dev, Rants, Web |
So, this week I’ve been teaching web design at Shillington College in Sydney. Today we had an interesting discussion about <section> vs <div> for marking up regions on a page in HTML5 – in our case: particularly the main content region (which previously we style as <div id=”content”>. The debate stemmed from the (somewhat obsessive) idea that <div>’s are evil. The evil part of the <div> tag has more to do with the sloppy, messy usage that has become rife with the advent of WYSIWYG software that invariably writes terrible HTML. What people seem to not understand – or be reluctant to accept is that <div> is still a perfectly acceptable element in HTML5. Furthermore, I would suggest that there is no more semantic meaning in the use of <section> than <div>. As far as I see it, neither of them carries any intrinsic meaning. The other new HTML5 elements all have embedded meaning.. but section is really no more meaningful than <div> or <span> or any of our other un-semantic tags. The issue here stems from the seemingly conflicting messaging in the spec. on one hand we are being told to avoid the <div> tag, while on the other hand we are told to use it instead of section to markup a region: Note: The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline So, while I understand the... by Alex Holt | Jan 3, 2012 | Web |
I often harp on about how responsive web design is MORE than just adaptive CSS layouts. I believe that we should be building websites that contextually respond to the device/screen size in question. How does this apply to microcopy? Now, this is not a new concept, however it is necessary to articulate it in order to understand what i’m on about when i talk about responsive microcopy (microcopy being the small bits of fluff copy on the site that help guide the user and introduce areas). While building the latest iteration of my personal site, I wanted to write some friendly, conversational microcopy that would help guide the user around the site. However the design is completely responsive, and i found that the microcopy became waaay too long winded on small screens (read: mobile). SO I came up with a simple set of responsive CSS classes that would hide and show content based on my responsive stylesheets. So in my base CSS I have: .show600, .show768, .show992, .show1382 { display: none; } And then, in each respective responsive stylesheet i have a declaration that will make these elements display again. 600.css: .show600 { display: inherit; } So, when the user’s browser is over 600pixels high, my responsive CSS kicks in and this element is displayed. To use it i have HTML like this: <h4>This is some microcopy. It's really interesting<span class="show768">, however the user on a mobile might <span class="show992">find most </span>of it annoying</span>.</h4> So now the copy will render on browsers smaller than 768 like this: This is some microcopy. It’s really interesting. But once the browser spans more than 768 we get the... by Alex Holt | Dec 12, 2011 | UI/UX, Web |
As Google Chrome’s market share grows it has become necessary (in my pedant’s eyes) to acknowledge that some people will be viewing your site without a status bar and subsequently with no grounding or footer space. In order to combat the unsightly finish this gives to a site, I have decided to include a border-bottom: 3px solid #ccc; in the body style for the new Outside In Media site – http://outsideinmedia.co.uk A minor issue, but also easily fixed.. so check it out.. and maybe you might want to use it in... by Alex Holt | Jun 15, 2011 | Dev, Web |
Something I’ve noticed recently which makes me wonder about people’s understanding of how web design works is the designer/developer obsession with validation. I’m definitely not the first to realise this (i’m pretty sure i read an article not so long ago at jeffcroft.com – where Jeff made the same point), but i’ve been surfing the web a bit this weekend, and noticed how rampant this issue really is. Validation of web sites is a good goal(a best practice), however it is not something that requires you to put a badge on your site.. or a link saying that you are CSS2.1 valid. Customers, clients etc don’t care… they care about whether or not your web site works (preferably in all browsers). Valid code is something all web designers ought to be producing, but you shouldn’t put a badge up on the site.. it’s like putting a badge that says “MY WEB SITE WORKS” – of course it does, the person reading your little badge is viewing the page. This site validated while I was building it, but i think now the CSS is technically invalid (i use the opacity: property a bit). But when a site i build is valid, I’m not screaming it from the rooftops, what if something I add breaks the validation later? Besides.. I take it as a given that a site I produce will validate (at least the XHTML – I sometimes use similar CSS hacks to save time.. shrug). It comes down to a question of pragmatics. In any real world project there comes a time where you have to sacrifice what you KNOW is... 