Un momento…
The rarely unedited, onlineblog journal of one Jorge Piñon.
about me
I'm a web designer and currently Design Director at Choose Digital, doing as much as I can to help a great team create useful webapps for digital media distribution.
It seems we’ve been talking about “mobile” as soon as the iPhone made its debut. Suddenly websites and apps were being used by people using their fat fingers on a small screen instead of a point-and-click precision on larger and larger screens. And those users were moving around.
UPDATE: Jim Ramsden has a very good post about this very thing.
The web design community has responded incredibly (as they do) to this new paradigm. New techniques come up every week for molding user interfaces to be touch-friendly. Many of which are actually good practice for any context: clear and simple content, bigger and easy-to-read font-sizes, cleaner code, lighter page weight, etc.
Ethan Marcotte showed us how to build responsive layouts and 320-and-up introduced the ”mobile first” approach, and now everyone seems to think that whether your strategy is mobile first or not, you need to consider mobile users.
In the meantime however, Apple made the iPad and the tablet was born (we can ignore previous attempts). And this thing is mobile but not small. A 1024px screen can be tablet or desktop. D’oh!
As soon as the iPad came out, I’ve always been annoyed when it gets categorized as a mobile device. Maybe because it was easy to see it as a large iPod Touch? Many (most?) people use their tablets in their living room, accessing the web through wi-fi. It’s more like a laptop, which is more like a desktop than a smartphone. The line isn’t just blurred, it’s gone.
Let’s look up from our keyboards for a minute
We’ve been reacting to Apple’s devices for 5 years now and I think we need to step back and consider our definitions. First, let’s stop calling anything ’mobile’. Mobile only matters for things like traffic apps.
Does your app actually care whether a person is moving? If we stick to the good practices I mentioned above (clear and simple content, low filesizes), most of us can stop using the word "mobile" altogether. GPS positioning can also apply to non-mobile users ("Where’s the nearest coffee shop?" also applies to someone sitting at their desk).
So if not mobile, what are we talking about? Well, mobile was a way to consider context. So what’s context? (Luke Wroblewski has a bzillion great posts about all this):
Input method:
touch
mouse
voice
Touch and mouse should be considered equivalent. Stop using hover events.
Screen size:
single-column
2-more columns (based on line-length)
Save yourself some grief and start with single-column CSS. Add min-width media queries for larger breakpoints. Use %-based widths in between breakpoints.
Environment/position:
hand
lap
desk
wall (TVs already have browsers)
Most combinations of InputMethod/ScreenSize/Environment represent real users, or will soon enough.
How about "Dashboard"? "Glasses"?
I think it’s best to make webapps full-width and maybe even full-height. Web sites that mainly have text content (blogs, corporate sites, etc) should always tie their column widths with the measure of the text. And always follow the great Principles of User Interface Design.
And Apple is at it again
If rumors are true, we may start seeing wearable devices soon, with presumably smaller screen sizes than even smartphones. Apple’s expected "iWatch" (silly to call that thing a "Watch", btw) is expected to be made of flexible glass?
Everyone is wondering when some company (Apple) will announce the new amazing way to control TV. Yes, there’s also the question of content, but the controller is hardware, and that’s Apple’s strength.
UPDATE: Arstechnica just posted an article (Feb.10, 2013) about the sad state of remotes for Smart TVs.
Main points to consider:
AppleTV’s little clicker sucks.
Gestures are for insane people, or sane people who don’t mind looking insane (also, if I scratch my ear, does the channel change?).
Touch-enabled TV screens make no sense, the whole point is to be "remote"
Only special people like a keyboard on your sofa
The answer for a better TV input method is solved. It’s here, and it’s plain as most solutions tend to be in the long run. It’s your iOS device of course. After all, why do we still call the iPhone a "phone" at all? I use it as an actual phone – to make or receive a voice call – about 10% of the time. Hell, if we’re going by most-used function, it probably should be called iCheckMailAndSocialMedia.
If you’re like me and have an iPad as well, you know that you can control your AppleTV with either your iPhone, your iPad, or your iPod touch. In fact, we can all sit around the sofa with our touch devices and all control the AppleTV at the same time. Like a bunch of idiots.
Second screens are already being considered in all kinds of ways to provide secondary content to the primary content on the big screen. The Wii U is trying to make a second screen a natural element of gaming. Well, my iPad is the perfect size for that too.
I don’t have an iPad Mini, but since it was rumored and the specs started to leak out, I’ve been convinced that it makes a perfect TV remote. There will be a small breakthrough soon when Apple does release a new solution, but that solution will be a really good Remote app, which of course will spawn dozens of (better?) alternates from third-party devs. The current Remote app in the app store is very basic, and it works, but it needs a little more imagination before it can inspire the industry – and that, after all, is what Apple has always been best at.
Speak when it’s quiet, tap when it’s not
Imagine the near future when you can grab any iOS device, speak your voice commands into the remote app when you’re alone and it’s quiet, or use the touch controls to navigate or search when it’s not (or if you have an older device without Siri). I know it’s like this because it’s how everyone on Star Trek communicated with the ship’s computer. Bridge protocol required everyone (except the Captain) to use the touch screen interface, but back in their rooms everyone’s using voice commands.
It’s a touch remote. It’s a second screen. And it’s a voice input device.
It’s a touch remote. It’s a second screen. And it’s a voice input device.
You’ll never see anyone on the S.S. Enterprise use arm gestures to call up a Romulan Ale.
I’ve heard some people say that flat touch screens make for bad remotes because you have to keep looking at it to know what you’re doing. And it’s true, but the bigger picture makes that problem insignificant. The benefits are too great, and it seems at least that so is the momentum towards ubiquitous touch devices. Haptic feedback may be poised to solve this problem anyway.
The Bigger Problem
As Steve Jobs replied to an audience member at the D8 conference (video on allthingsd), the problem is the "go-to-market strategy". In other words, it’s not that there are no breakthrough ideas in hardware or UI. In fact, I bet Apple has those pieces already in place waiting for an answer to the bigger problem – content. Until the day when content is not controlled as it is by cable companies, any TV breakthrough will be doomed to fail. Most likely each year will bring an incremental step and Apple (and others) will have to decide when there’s a viable strategy.
Background-image is the fundamental way to get non-content images into your web design. Our CSS files are riddled with it. Textures and patterns, old-school rounded corners, a handful of image-replacement techniques, etc.. Heck, we even very often add some empty divs and other elements to our markup just to add another background image.
The most common use of most image replacement techniques is to use the background-image property to add a logo to the page while still including the company name in the markup.
You want the company name there for "when CSS is turned off" (a.k.a. screen readers and spider bots) but every client wants their logo at the top and not just the name typed out in HTML, because well, branding. So part of every image replacement technique involves hiding the text somehow so that the background-image — the logo — can be seen in it’s full, customer-engaging glory.
Something occurred to me one day, probably while trying to figure out Cufon...
Presenting "foreground-image"
Let that sink in for a few seconds, "foreground-image".
Right!?
Suddenly, image-replacement techniques are unnecessary. Leave the text right where it is. It’s like progressively enhanced branding. It’s image-replacement without the need for the “replacement” part.
Instead of javascript show/hide techniques which are often not accessible (although there are ways), this gives us another method by dynamically adding a foreground mask to hide an item visually. Parallax on foreground and background images?
As for event binding and DOM manipulation, I assume this would be trivial since we’re still talking about a single element. There may be a challenge with foreground images somehow preventing clicks on the element itself, for example. Not sure. That's where my mind starts wandering and I go get a snack. I’ll leave it to those super bright people in California or Oslo to figure out how to make that work. To quote Dan Benjamin, I’ll give them that idea. They can go run with it.
I think this set of properties would be an instant hit with CSS coders. With all the background-image tricks in our bag, there should be a lot of good ideas that foreground-image should inspire.
Update
Lea Verou (@leaverou) suggested that the conent property in CSS3 is meant to do what I'm proposing for foreground-image. After reading up a little on it I still think foreground-image is useful mainly because content: url() doesn't allow for either image-repeat or sprites. I do agree however that (once browser support catches up) the content property is a better solution for most simple image-replacement techniques.
@marcoos coded up a demo of content: url() which is supported at the moment on Webkit and Opera.
It's also important to note that the content property was only for :before and :after pseudo-classes in CSS 2.1. The CSS 3 spec adds support for all elements.
Most of the time when I need to create icons and other UI-type image assets, I fire up Illustrator. It seems that most, or at least a lot, of designers use Photoshop. The stuff on Dribble usually blows me away but I've just never been convinced that rich, depth-illusioning interfaces are for me. Maybe because I went to Art School and associated more with the post-impressionists than the realists. Flat over realistic. I wanted to make art like Picasso, Hans Hoffman, Matisse, Alexander Rodchenko, and Basquiat. The phrases manerist and trompe l’oeil made me cringe.
So whenever I have to create an icon or whatever else falls in the UI image category, I just can’t bring myself to open Photoshop. It feels like the wrong path. Illustrator isn’t a perfect fit either, but it’s roots are vector instead of pixel. I know you can use Photoshop like a vector tool, but that’s not what it was originally for.
Features that Photoshop lacks:
For what it’s worth, here’s a quick list of what I wish Photoshop had right now. These things are in Illustrator already.
Symbols
I read about a neat way to use layers as variables or some such but it was complex and unintuitive. I felt like I was looking at Photoshop's bloat layer
A glyphs palette
Why Photoshop still doesn’t have this is ridiculous. You literally have to launch Illustrator, open the glyphs palette, copy a glyph, jump over to Photoshop, select the Type tool, paste, change the font to the one you found the glyph in. Don’t remember which font? Launch Illustrator again...
"Select unused swatches"
Option-click little tiny squares to remove from the palette? C’MON!
While I’m making lists, Illustrator really, really needs:
Better slice control
On the rare ocassion that I have to create html email (sorry, all recipients), I have to deal with this crap. Aligning Illustrator slices to a 1-px grid is like whack-a-mole (“Why did that point’s x-value change to 4.99999px?!”)
Effects to match photoshop (inner shadow, inner glow)
It’s like they started to do stuff and got tired. A few of Photoshop’s effects palette stuff is here, but only a small group and they don’t work the same. The silver lining here is that it always reminds me that I could do without that extra Inner Glow anyway.
OK, forget Effects, all I really need is Base64
The only effect I would really like is noise. How awesome would it be to be able to add noise to a shape in Illustrator with a simple palette that generates data:image/png;base64 patterns? Don’t know what I mean? If you don’t know, now you know.
Other, non-Adobe Options
If you’re out there saying “This idiot’s never heard of Fireworks” or “only dumb sheep go with any Adobe product. Sketch/Pixelmator/Gimp/Inkscape is my tool of choice.”, I love you. You guys are my kind of trailblazers. Please keep those companies in business so that their software matures enough for me to dedicate myself to learning it and depending on it.
While I'm starting to build out this (long overdue) journal, I'm implementing some new-ish tools and strategies that I recently got into. At the moment the main ones are Compass and SMACSS. Actually, I'm creating Compass files based on SMACSS. There's at least one already on Github but part of the learning process is doing it myself from scratch.
While there are a lot of systems/frameworks/bootstraps/whatevers out there to learn, I think it's important for me to take from each one what I need to create a good system that works for my needs. The three at the moment that are worth studying:
320andup - I think @malarkey deserves credit for being the first to develop the idea of starting with mobile and using media queries to target larger screens. And I didn't realize until just now that Jina was involved with it too.
Also, if you're in any kind of school learning to code HTML and/or CSS, once you get past the basics, put the Dreamweaver book down, get Textwrangler or Notepad++ and start learning about any one of the list above. You'd be more useful to any future employers.
So anyway, this site is a testing ground. Step lightly.
Since having to work on the Play Framework at my job, I've been getting used to using the Terminal in Mac OS. To participate in team development in Play (and also when using Git for version control), a web-designer-who-also-codes should really get comfortable using Terminal. Testing, debugging, keeping your local server up to date with the rest of the team... even starting/stopping the server, is all done with Terminal commands.
Another part of my job, and for my personal stuff, I also use Expression Engine. I've loved #ee since I first used it. They positioned themselves as the best CMS for web designers, and although that statement is arguable, what isn't arguable is that you as the designer, has 100% control of the code output. That, more than anything else, is what won me over. Other CMSs I tried at the time were adding some extra markup as pre-configured modules and I'm too strict with my code to live with that.
I never used the Terminal for EE development, but now that I find it useful for work-work, I found a way to do just that. It actually isn't just for EE development but for checking apache error logs in general. It's using the "tail" command in Terminal.
Just type this into your terminal prompt (remember, this is for Mac OS users. I'm running Snow Leopard. Linux, or other apache distributions may have a different path to the error log):
tail -f /var/log/apache2/error_log
Sidenote about Liferay
Speaking of being strict with code output from a CMS, one of the reasons I left my previous job was the new move towards using the Liferay platform to build client sites. If you're a web designer who cares at all about your code, and need to adhere to client brand guidelines and mockups, beware of platforms like Liferay. The system is powerful as hell for big honking enterprise sites, but it makes you either deal with their markup or go over a very steep learning curve before you're able to edit core modules.
It took me the better part of a day, with plenty of help, just to get it all installed on my laptop. And then "ant builds" just to see the result of adding a 1px margin. Pass.
Christian Heilmann (aka @codepo8) put together a nice little list of typical Mac OS browsers and how to disable java in each.
There's a screencast as well but the bullet points are simple enough. I found a couple of other plugins that I turned off while I was in there too.
We visited London last Thanksgiving (Paris, the year before), and I took an afternoon to see the Tate. The scale of the central chimney of the former power station is awe inspiring. It didn't seem real to me from any perspective or distance.
Mark Zuckerburg once said that “no one wants to make lists.”, referring to the tedium of defining nuanced relationships in social networks. Facebook offers no distinction between one "friend" or another. Many of your Facebook friends right now are people who you regularly visit, who you give presents to on their birthdays or on Xmas. Maybe they're people you've been real-life friends with for years.
Another one of your Facebook friends is your mother, or maybe your boss. Sorry!
It's as absurdly simplistic to label everyone a "friend" as it is to simply "like" something.
No normal human would call everyone they’ve “friended” on Facebook an actual friend (and, sadly, using the word "friended" is almost normal human speech now). I actually believe the opposite of Zuckerburg's inference: I believe most people would indeed like to fine-tune their online relationship definitions. And making lists is probably not the correct mental model here. Lists require labels first, and as soon as you create any label for anything, there will immediately follow a case that doesn't fit it. It's probably why Facebook just uses "friend".
The real problem is that no really good UI exists yet. Google Plus’s Circles is the best attempt I've seen so far. Not only can you create as many circles (lists) as you want, you can name them anything you want. (i.e., "BFFs", "Work Friends", "Knew in High School", etc.)
It's a good step. And although the problem is far from solved, I think the concept of circles is the first bold attempt to approximate the inner algorithm each of us uses in the real world to define our relationships. It would be great to see other apps build on that idea.
The ubiquity of Helvetica, and the fact that it's free, makes it very difficult for a designer to resist being drawn to it, especially early in his/her career when he or she is not as confident in their voice.
Helvetica provides the voice for them. Or rather, because Helvetica's neutrality makes it essentially a typeface without an opinion, it allows young designers to avoid that decision and focus instead on aesthetics.
Apparently, it's new to some people that two spaces is an unnecessary relic of the days of the typewriter. Welcome to the 90s (maybe 80s, I wouldn't know). Now get this, on screen (especially email) it can actually be a good thing to use the extra space after a period.
Yes, modern typefaces have made the need for two spaces obsolete. Yes, two spaces is a relic of the era of monospace typewriter fonts where a period took up as much horizontal space as any other character, making it difficult to easily recognize ending of sentences. Many people learned it in high-school typing class and they cling to it like it was written on stone tablets.
Office Admins, listen... When using Word, you should not use monospace fonts (like Courier) and you should absolutely not use two spaces after a period.
Email, however, is a different story. Plain text email isn't about typographic color or rivers or English-vs-French Spacing. Hell, it isn't even about grammar. It's about communication, delivering your message quickly and clearly and moving on. It's about reading important messages from your boss or stupid jokes from Brian from Sales.
Bottom line: NEVER use double spaces after a period for printed documents. It's antiquated, unprofessional, or both. But it isn't a bad thing to add an extra space in an email. Or 3 spaces. Or throw in a line break. Do it, not because it's a rule you learned in typing class, but because it makes your message easier to understand.
This Slate article sounds like my typing teacher (who in 1989 must have been in her 80s, so it can't have been written by her. May she and her ruler R.I.P.)
One huge barrier when deciding to invest in any company is how to evaluate it’s business. So many stories about fraud has to have taught us that we simply can’t take the CEO's or CFO's word for how successful the company is. Public companies are obligated by law to open their books for investors to evaluate. The idea of course being that investors get to see clearly what's really going on.
The problem is that there are no standards to publishing this documentation. Web geeks, see where I'm going with this?
Much like web standards allowed sites to break out of the indecipherable tag soup of nested tables and spacer gifs, a published set of standards can make investing easier and safer for everyone outside of the Wall Street frat party. And it would only have to gain enough traction to make some headlines. It needn't be enforceable. If a company doesn’t want to follow the standards, they don't have to. Investors will decide for themselves whether it's important enough to get good data.
These standards exist. And not only do they exist, they're called what you think they'd be called: XBRL.
Idea for company - convert financial reported data and output XBRL, make software for easy analysis.
