http://jorgepinon.com/Ev Williams on Ad-Driven Mediahttp://jorgepinon.com/posts/ev-williams-on-ad-driven-mediaEv Williams on Ad-Driven Media

January 20, 2017

Medium laid off about 50 employees, mostly in the ad revenue group. Ev Williams, the CEO, published a blog post about it that explained that their ad-driven revenue model -- the same model that drives most media sites on the web -- is broken and unsustainable to run a business.

Upon further reflection, it’s clear that the broken system is ad-driven media on the internet. It simply doesn’t serve people. In fact, it’s not designed to. The vast majority of articles, videos, and other “content” we all consume on a daily basis is paid for — directly or indirectly — by corporations who are funding it in order to advance their goals. And it is measured, amplified, and rewarded based on its ability to do that. Period. As a result, we get…well, what we get. And it’s getting worse.

I’m sure there are people out there looking to solve this problem, but until anything better comes along, publishers are going to keep failing on the business side if all they're going to hope for is ad revenue to sustain it. Publishing needs to move to a subscription model, with ads making up a smaller part of the revenue, just like sports teams rely on season ticket sales to provide a stable revenue base.

Until that happens, web publishing is going to be a volatile business.

]]>
Letter to U.S. Immigrantshttp://jorgepinon.com/posts/three-suggestions-all-us-immigrantsLetter to U.S. Immigrants

January 9, 2017

To all current and potential U.S. immigrants,

I think you should know these three things:

  • A few of us are racists or at least xenophobic. I’m sure the same is true wherever you’re from, but we have a long history of mixing races and cultures – including a couple of centuries of slavery – so it’s different here. This group of Americans will never want you here, but don’t think this makes you special. They feel the same about many other immigrants before you, too. Unfortunately you and your children, and maybe your grandchildren, will have to confront this prejudice from time to time. American laws and government services are established to help and protect you.

  • Many more of us will welcome you. Most Americans remember being immigrants themselves, or are just naturally more open-minded. Those Americans understand that the U.S. has always had a mix of cultures, which is in fact its major strength and the reason for its global popularity. Welcome people into your culture and teach your children to do the same.

  • Bring your culture but also accept ours. You should continue your own ethnic and family traditions and even share them with other here. You can even create your own communities. Many of us do. But the payment for living in America is to accept American traditions and civic responsibility. The more you do that, the better off we’ll all be. America is a land of mixed cultures and always will be. Add yours to the mix, and teach your children to do the same.

We’re all here trying to make our lives and country better and you can participate in that.

]]>
Automator publishing to S3http://jorgepinon.com/posts/automator-publishing-to-s3File the following under: “Mac Nerd”

Automator publishing to S3

December 20, 2016

I use Harp JS for this site. (Harp is a static site generator with almost the perfect balance between simplicity and customization, and I hope it lives for a long time. Go check it out.) I then host the static html files in an Amazon s3 bucket. A fairly common setup these days for static sites.

The publishing flow involves running a compile command for harp to generate the static files. Then uploading all the html—and sometimes a few static assets—to s3 via some FTP client. It’s not very tedious but I’d like to make the publishing step as friction-less as possible to remove any excuses my lazy brain has against writing more.

What I’m going to try here is to use Expandrive to mount my S3 bucket as a volume on my Mac, then use Automator to rsync the local Harp-generated files to the mounted S3. It does remove an extra manual step, but perhaps more importantly, it removes my need of having to think about what files were changed. Rsync can figure that out and just upload the changed files. So my full flow will be:

  • write post in markdown and update the data.json file in Harp
  • Run harp compile from the command line within the Harp directory
  • Double-click the desktop Automator script to trigger the sync to S3.

My hope is that this is easy enough that I’ll write a little more.

As for Automator, here’s the action I used:

Automator script
My super basic Automator script for publishing to S3

Nothing much to it. Once the S3 bucket is mounted to my iMac using Expandrive (and it usually is), I can use it as the target in the rsync command. The www directory is where Harp outputs the static site files after a compile.

]]>
2017 Shows U.S. Moving Away From Coal Energyhttp://jorgepinon.com/posts/energy-positive-outlook-20172017 Shows U.S. Moving Away From Coal Energy

December 19, 2016

2016 has been a depressing year, especially the end of it, if you're interested at all in seeing renewable energy become primary source of the world’s energy.

However, there are a few data trends published by the Brookings Institute that look very promising. For one, the country is definitively moving away from burning coal for electricity. The growth next year will be in natural gas and renewables. Someday we’ll have to ween ourselves off of natural gas but at least it's cleaner than coal. But the renewables are the big news, and it's nice to see Texas such a big area of investment.

Chart showing power capacity being added from 2017 and beyond, by technology type
Brookings Institute chart showing 2017 power capacity sources

It’s sad of course that my own state of Florida — the “Sunshine State” — is not leading the effort towards renewables. In fact, it seems like we're more aware of natural gas deep underground than we are of our own sun which literally burns us for most of the year.

]]>
Microsoft’s New “Inclusive Design”http://jorgepinon.com/posts/inclusive-design-from-microsoftMicrosoft’s New “Inclusive Design”

Aug 12, 2016

I missed this great long read by Cliff Kuang on fastcodesign.com back in February about how a new design thinking concept has taken root in Microsoft:

De los Reyes and Holmes, with the help of design experts including Allen Sayegh at Harvard and Jutta Treviranus at the Ontario College of Art and Design, eventually hit upon a vein of design thinking descended from Pat Moore, and universal design. Dubbed inclusive design, it begins with studying overlooked communities, ranging from dyslexics to the deaf. By learning about how they adapt to their world, the hope is that you can actually build better new products for everyone else.

This is similar to the idea of accessible web design, which is misunderstood to mean that it’s for allowing your site to work on screen readers, the class of browsers that deaf people use to surf the web. It’s much more than that. By thinking in terms of accessibility throughout the web design process, you end up with a product that works well for everyone.

By properly designing and coding a web form, you not only make it easier for screen readers, but also for people with temporary or permanent motor disabilities in their hands, as well as for perfectly able people riding on a moving bus.

This idea of “inclusive design” sounds like a revelation within Microsoft. If it does take hold there, I hope the idea spreads just like responsive design has done. Really inspiring story.

]]>
Untitledhttp://jorgepinon.com/posts/john-and-woman-arms-crossedAug 3, 2016

Juxtaposition of an illuminated illustration of John the Evangelist sitting at his desk and Picasso’s Woman with Arms Crossed.
Left: Illuminated portrait preceding The Gospel of John (Burny MS 20)
Right: Picasso’s Femme aux Bras Croisés
]]>
Dr. Cleaner UIhttp://jorgepinon.com/posts/drcleaner-menubar-uiDr. Cleaner Widget UI

Aug 2, 2016

The menubar widget for Dr. Cleaner on Mac OS X
Dr. Cleaner’s latest UI design is beautifully efficient.
]]>
House on an Islandhttp://jorgepinon.com/posts/house-on-an-island

July 7, 2016

Fun with Adobe Sketch on my iPad Pro. Pixels on screen.

An iPad drawing of a house on an island at almost sunset.

]]>
Thoughts on Javascript Frameworkshttp://jorgepinon.com/posts/thoughts-on-javascript-frameworks

Thoughts on Current Javascript Frameworks

July 6, 2016

In the dark days (90s), websites were created using a murky mix of css and js inside the html via attributes (bgColor="#888888" onClick="javascript..."). Any web developer nowadays, upon seeing one of those html files should shake their head at least as much as when seeing the page itself in a browser.

The web standards movement pushed web design forward by promoting the use of CSS and organizing site code by following the concept of “separation of concerns,” moving css and javascript out of html so the three elements make for more stable code. But there were many other benefits, including accessibility and wider browser support, performance gains from browser caching, code simplicity, and my favorite one, future-proofing.

Fast-forward to July, 2016 and javascript is now in the forefront of web development, with javascript frameworks the de facto way to build a web app.

These frameworks offer some performance advantages that are hard to dispute. And as large web sites get even larger and more complex, separating functional components into modules makes sense, and frameworks encourage that. It’s no surprise that the two most popular frameworks at the moment, Angular and React were developed by Google and Facebook, respectively, companies with unbelievably large and complex codebases and the business need to squeeze every nanosecond of performance out of the site.

But by taking the module idea and expanding it to propose we should combine a module’s html and css in with the javascript is a step way too far and sounds to me like js devs making everyone play in their world. I like the idea of somehow organizing code with modules in mind, and even the idea of keeping all of a module’s pieces somehow more tightly coupled, but I can’t go for mixing html and css in js anymore than I could when it was js and css mixed in with the html.

I've heard arguments from the React side that separating html, css, and javascript was only a superficial separation anyway because all those things are needed by each module. A date-picker module needs all three things, and keeping them in the same file is actually better for organizing your code. This argument sounds compelling, until you get past just code organization and remember progressive enhancement.

Combining everything into a module’s React javascript file may be convenient and make your site load a bit faster, but that’s not good enough to ignore the cost. There are people in the React and Angular communities that do a lot of work to encourage progressive enhancement and accessibility, but React and Angular aren’t leading that charge unfortunately.

I hold on to the position that javascript should not be required. Javascript can vastly enhance the user’s experience but if done right, the site works without it. Same with CSS — makes things look way better, won’t make the site useless if it’s missing.

Brad Frost said it very well:

At the end of the day this idea of progressive enhancement, this idea of Web standards, of starting with HTML and layering on CSS and layering on behavior on top of that is foundational work.

There are many more frameworks than React and Angular, and many more on the way. I’m sitting back and waiting for one of them to promote itself with a web-standards-first and accessible-by-default approach. I’m pretty optimistic that it will show up, too, because the reasons why web standards were important before are still true. There’s always a strong case for making your site future-proof.

]]>
Transcribing Mr. Tambourine Manhttp://jorgepinon.com/posts/transcribing-mr-tambourine-manTranscribing Mr. Tambourine Man

October 18, 2015

Tonight my daughter asked me to play Dylan’s Mr. Tambrourine Man for her so she could write down the lyrics. I had played it this morning in the car and she found herself singing along, just like she had done a previous time weeks ago. She has an amazing ability to learn a song’s lyrics after hearing it once or twice.

I could never do that. It takes a lot more rounds to store a song in my memory. Many times I’ve enjoyed a new song so much that I repeat it over and over to the point of embarassment, and then just a couple of times more. In the case of many Bob Dylan songs, this was sometimes combined with writing down the words and even perhaps some sketching (this was before the internet provided easy, ad-riddled access to hundreds of websites full of song lyrics).

It’s always better to write something down yourself in order to learn it, and so after a few seconds of silent excitement over my daughter’s interest in Bobby Z, I happily obliged.

No internet for this! Not even the use of that giant book of Dylan lyrics I have somewhere. I instead set her up with my headphones and queued up the song for her to play and rewind as needed.

Yes’n she played through the whole song tirelessly, pausing when she couldn't understand the words and writing when she could. She got a sense of the imagery and mood. She smiled at the aliteration, and she understood the narrator’s plea. I feel like tonight I was able to create a small space safe from the ceaseless din of simple pop music, where she could hopefully learn that the words of a song don’t have to be pablum. Music can also include poetry.

I won’t push for more because discovery doesn’t work that way, but if she ever asks for another one I’m thinking either When the Ship Comes In or Boots of Spanish Leather. And someday Lily, Rosemary, and the Jack of Hearts.

]]>
If I Were a Beehttp://jorgepinon.com/posts/aurora-if-i-were-a-bee

If I Were a Bee

July 30, 2014

[Aurora's bee-related homework writing.]

If I was a bee it would be really tough. The good thing is I don’t have school. But I still have to squeeze out of the hive and collect pollen for the queen every week. On weekends, I quit doing work and usually rest in the hive. Sometimes I go down to the park and have a picnic. Whenever the skin of our hive cracks, I quickly repair it with honey. I am the second best bee because I’m good at distracting bears. We always have a quart of honey a day.

SAFETY! POSTER

Rules About bees

  1. Never go near or touch a bee’s hive.
  2. Do not scare bees away because it will sting you.
  3. If a bee lands on your finger, do not kill it. Instead, pet it very softly.
]]>
Planhttp://jorgepinon.com/posts/aurora-office-plan

“Plan”

March 4, 2014

[A note found after a visit by Aurora to my office one day]

  Conversation & Notes
  Plan

  Hide in box room
  Look at papers
  Figure out the mystery
  While man out look in
  Computer
  Go back in box room
  Sneak through the
  Kitchen
  Ask daddy for lunch

  -----------------------

  Working in government
  att.com/mygreatdeal
]]>
Overcast apphttp://jorgepinon.com/posts/overcast-appOvercast app

July 24, 2014

For me the best thing about the new Overcast app has nothing to do with any of its features. I listen to podcasts just about every day, and have been doing so for a long time. A podcast app has had a preferred position on my iPhone dock for years now. But that’s not what makes Overcast important for me.

Many of us who have listened to Marco Arment for years now on his own podcasts have been lucky to have a view into the life and work of an independent developer. He has shared everything from running a one-man business to his daily routine to preferred methods of coding, hosting, hardware/software setup, relationships with other developers, sales decision processes…. Marco has shared a lot.

And it isn’t that Marco is unique in this regard. Our industry as a whole benefits from the amazing amount of sharing that exists in the community. But people interested in iOS development or being an indie developer of any sort, have had a special opportunity here.

The reason Overcast is important to me is because in a way we have been sort of spectators of the Overcast project, whether we’re customers or not. And for those of us geeks that love learning about these things, it’s lucky to have a peek behind the curtain.

We learned about the idea when he first had it and why he decided to create it.

We learned about some of the limits of the struggles he had when he was building it.

We heard about the beta testing period and learned his strategies for launch.

We learned about how he receives and responds to feedback and criticism.

He has even shared some of the project's roadmap ahead.

It’s been fun to watch. And the app’s not bad either.

]]>
Radio Button Buttonshttp://jorgepinon.com/posts/radio-button-buttonsRadio Button Buttons

July 9, 2014

It happened that I was working on the design of a registration form at work when Luke Wroblewski posted on Google+ about “Button inputs”. I was working with radio inputs instead of buttons, but the idea is the same.

The point is that tapping buttons is easier for mobile users than dropdowns, never mind text inputs. What I was working on was styling radio buttons with a more button-like feel, with nice touch targets and states. In fact, a lot of our focus these days at work is thinking about everything in terms of touch-first (a variant of mobile-first, specifically about interface design).

Check out the jsfiddle for Tappable radio buttons. (These still need a lot of polish)

]]>
The Munsell Color Wheelhttp://jorgepinon.com/posts/munsell-color-wheel@media (min-width: 1100px) { body { background: url(/posts/img/colorwheelMunsell.svg); background-size:cover; } }

The Munsell Color Wheel

May 16, 2014

The Munsell Color Wheel
The Munsell Color Wheel
]]>
App Dot Net in Maintenance Modehttp://jorgepinon.com/posts/app-dot-netApp Dot Net in Maintenance Mode

App.net announced this week that it is essentially leaving development/growth mode and moving to maintenance mode. They're letting go of their full-time employees and hiring consultants on an as-needed basis.

It makes me sad that ADN couldn't become a techy or geeky alternative to Twitter. Since Twitter's growth into full mass audience appeal, I always thought that niche social networks would start cropping up everywhere. I thought that niche social networks would be good replacements for the outdated forum. In fact, when ADN announced that their character limit would be 256 instead of Twitter's 140, I took it as proof that replacing online forums was exactly what they were going for.

Now, barring a surprise twist, it looks like the App.net experiment is sadly closing down. Good job to them. The quality of apps that they got developers to produce was suprising. Wedge and, my favorite, Riposte are good examples.

And good for those developers and geeks that did in fact post regularly (Brett Terpstra, John Marstall, Brianna Wu, Matt Gemmell...) and otherwise supported the effort. The problem of course was finding time to add another network to the current list of apps that are always pulling for our attention. ADN just didn't have the appeal for enough of the uber-geeks who may have encouraged their many Twitter followers to give it a try.

But wait, ADN isn't dead yet. Maybe a niche social network only needs to exist and maybe have a few contractors occasionally oiling the gears to have a long life. Some people may continue to use it and attract a trickle of others. And that could be what a niche social network is supposed to be. Maybe eventually ADN will in fact become the place where geeks go when they want a little more geek culture conversation than Twitter has to offer.

I'm paid up for another year, so as long as Dalton keeps the lights on, I'll keep checking in.

]]>
Wufoo Blog Updateshttp://jorgepinon.com/posts/wufoo-blog-updatesWufoo Blog Updates

April 18, 2014

Popup div titled, 'Since You’ve Been Gone.' on Wufoo start page
Popup box on Wufoo start page

I really like how Wufoo shows you a list of posts from their blog since your last log in. “Since You’ve Been Gone” is a simple div that pops up on the start page with a list of short summaries and links to the full entries.

]]>
Flat is fine, but legible is betterhttp://jorgepinon.com/posts/flat-is-fine-but-legible-is-better

Flat is fine, but legible is better

February 3, 2014

Back in the 90’s in both print and web (most web design then was done by print designers) tiny type and low contrast was trendy for a time. I hated it. It was one of the reasons why I started looking for something different and found Designing With Web Standards.

Evernote iOS homescreen
Evernote’s iOS7 homescreen

For me, Evernote has always been an inspiration for good design of a complex interface. I’ve always liked it’s layout and typography, and use of green as a focus and highlight color in an otherwise minimal dark-light design. But a recent redesign of the app changed the way they used green. Or maybe it’s more accurate to say that the change was to only use green.

I use Evernote (although not avidly) and I wish they’d bring some of the contrast back. Yesterday I actually found myself closing the app as soon as I opened it and tried to find what I was looking for. It’s the third time that’s happened this week. But this isn’t really about my preference or sad print design memories. Accessibility guidelines require certain contrast ratio between text color and background, and Evernote's iOS app homescreen listView fails the requirement.

My guess is that in their move to make the interface flatter and more in line with iOS 7, the contrast got scrapped along with the shadow and illusion of depth. I predicted that the flat trend was going to make some designers forget accessibility and the general rule that web design is only as good as its effectiveness in communicating content.

Low contrast email help text
Funny! (Not Evernote, but from a real email)

Contrast helps make things legible.

]]>
Sad Mac App Dialogshttp://jorgepinon.com/posts/sad-mac-app-dialogs

Sad Mac App Dialogs

January 21, 2014

I've always customized my Finder windows to include what I think are very useful buttons. There's a lot you can do to suit your needs. To customize a window toolbar, Ctl-click on it:

screenshot of basic MacOS window toolbar

What you get is a panel that slides down, revealing a whole lot of customization that would make a Linux user's eyebrows rise ever so slightly.

screenshot of opened customization panel

Drag any buttons in or out of the toolbar. Move them around. Get all designy with it.

I love the “Path” and “Action” buttons and have added them anytime I get a new computer or upgrade my OS. First day. Those little things make working in the Finder many times more efficient. In fact, one thing I miss from my brief time working on an XP maching (shudder) was the ability to actually add files and edit filenames right from within any dialog box.

Unfortunately, on a Mac, app Save and Open dialog boxes don't let you do much other than the task itself. It’s a window into your filesystem, and let's you navigate around, but no editing. Even “quick look” works on a file in a dialog box. But there’s sadly no way to edit an app toolbar to add buttons like “Path” or “Action”.

Here's the sad, uncustomizable app dialog box toolbar on Mountain Lion (10.8.5, and I think it's the same in Mavericks):

screenshot of an iCloud dialog toolbar

Thanks to John Siracusa for pointing me to Default Folder X. It seems to do a lot of what I want and more. This sentence from the website says it perfectly:

It also lets you get info on, rename, and delete existing files, putting the Finder’s power in every Open and Save dialog.

It’s $35 for a single license ($30 each for 2 or more), which is more than I usually spend on utility software, but the $25 I paid for Alfred was money well spent, and this looks like a winner too. If you’re like me and need to talk yourself into anything more than $5, keep in mind that Mac OS is now free.

]]>
4K monitors and images for the webhttp://jorgepinon.com/posts/4k-and-web-images

4K monitors and images for the web

January 18, 2014

Dave Rupert has a good post about what 4K monitors mean for responsive web design. One point he makes in particular stuck out for me.

4K displays really reaffirm the need for a responsive images solution. If you choose to support 3840×2160 or 1920×1080@2× with full bleed imagery, it would require a 10 megapixel image. As it happens, you can’t even send a 10 megapixel image to all devices because iOS will simply will not accept them.

It’s a good point about iOS but the bigger problem is simply bandwidth. I’m sure Dave knows this but it’s worth saying. It doesn’t matter how many pixels your monitor has, we simply can’t send that many mega kilobytes of data for each image. Even if server-side responsive images were already here.

This image at 3200x2400px (unoptimized) is over 22MB. Bringing it down to 600x450px, optimizing with Photoshop, and saving at 50% jpg quality brings it down to 114K.

Image of Iguana at Seaquarium in Miami, FL

On today’s desktop monitors, that’s still considered a large image—it takes up about half a page. Here’s what that same image looks like on a 4K monitor (@1x):

Illustration of a 600 pixel image on a 4k monitor

Marco Arment predicts that Apple will have a 4K monitor in 2014.

##Tightening our belts

We’ve been kind of spoiled for a couple of years here with most desktop monitors in the 1366–1920px width range and handheld browsers on 4G. Heavy javascript payloads and big images have become popular, but 4k monitors are going to make us carefully watch our bitmap image sizes.

Designers are going to have to add a 4K version to their wireframes and layouts, and big-image sites are going to need alternate designs for 4K screens. The good news is that designers and developers will probably be the first to adopt the larger screens, so image size/bandwidth will jump out at us right away.

]]>
Onboarding should be easyhttp://jorgepinon.com/posts/check-your-email-for-a-link

Onboarding should be easy

August 4, 2013

Onboarding in web and software design jargon refers to the process of converting casual visitors into registered accounts. There is more focus on this part of the user experience than any other (with perhaps the possible exception of the e-commerce checkout process) because acquisition is seen as vitally important to any software, especially by the tech press, the venture capitalists, and the tech-press-venture-capitalsts.

I think too much is spent on aquisition, at the expense of top user tasks. There should be at least as much effort in keeping your loyal users satisfied and happy as in attracting new ones. If you can turn your loyal users into ambassadors, acquisition takes care of itself.

But there's one part of the acquisition process that often wastes all the effort spent on marketing and copywriting. Just when a visitor has made the decision to create an account, the actual registration process is unnecessarily complex and even silly.

If you had a brick-and-mortar store, you would advertise, spend time and money on presentation, even clean the windows, but you would also make sure that the front door is easy to find and open. Yep, I just made an analogy between and e-commerce site and a physical store!

I'm sure everyone will agree that we should make the sign up process as easy as possible, but the obstacles that get in the way of that are often too much to overcome. Especially in larger organizations. These obstacles are internal requirements, entrenched traditions, marketing “needs”, or simple corporate politics.

Email verification or it didn’t happen

One of the most pernicious registration obstacles is the email verification process. This has to have been conceived by some hateful bank IT person back in the early 90s. I picture him creating a button in Dreamweaver with the label “Submit”, all the while anxious to get back to work on next month's Flash intro page.

I started using Trello a few months ago and immediately felt good about using it when the sign up process involved (1) picking a username and password and (2) entering my email address... and using the app! No email to look for, no re-entering credentials. I was in.

I was surprised both at how easy it was, and how obviously bad it made traditional registration processes.

Too many web apps make you go to your email to find the link they sent (you know, like it's fun). Then click the link (which annoyingly opens another browser tab, maybe even in a different browser), which returns the message “Thank you for registering. You can now log in.”… Wha?! Log in? again?

All of which is only to satisfy either the IT person who needs to make sure evil robots are not signing up, or the Marketing VP that wants to make sure they have our “real” email addresses. I don’t have to go back to the brick-and-mortar store metaphor, do I?

There are other common obstacles, but most are similar to email verification. Bad marketers don’t see users as customers but as things to be stripped for data. Any form, including and especially the sign-up form, is seen as an opportunity to get as much personal data as they can.

No doubt some of this data would be useful to improve the user experience of certain interaction flows, but don't litter your registration form. Ask only the bare minimum to sign-up and gather more info later if you must. Where I work we started using the Trello model. We let users in after completing the most basic form, and although we do ask for email address, we worry about verification later and explain the reason for it. It has worked very well.

Conclusion

We need to root out each and every obstacle that gets in the way of easy sign-up, and kill them like mosquitos. Listen, when a visitor decides to sign up, use that momentum to pull them into your site/app as far as you can. Heck, if it's ecommerce, go for an actual purchase conversion. You may not get that kind of interest from them again.

Take a strong stance in your company about this. Advocate for users at every meeting. Don't let marketing tell you that gender has to be part of the registration form. Phone numbers and email address really don't either.

And fergoodnessake, never use the word “Submit” on any button, ever.

]]>
You’re not still using the word “mobile”, right?http://jorgepinon.com/posts/mobile-doesnt-mean-that

You’re not still using the word “mobile”, right?

February 24, 2013

It seems we’ve been talking about “mobile” as soon as the iPhone made its debut, when websites and apps were suddenly being used by people using their fat fingers on a small screen instead of a point-and-click precision on larger and larger screens.

The term “mobile” doesn’t really help in any practical way for most apps and yet we see it everywhere. To solve design problems, web designers and developers have responded incredibly (as they do) to find new methods, 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 ”mobile-first”, and now everyone seems to think that whether your strategy is mobile-first or not, you need to consider mobile users.

Ethan’s demonstration of the power of media queries completely changed the way a lot of us build interfaces. We can tell what your browser’s pixel width is and respond accordingly. But the word “mobile” runs us into a logical problem. It’s safe enough to assume a small screen is a “mobile” device, but that ends abruptly at 768 pixels. Why?

Because Apple then made the iPad. And this thing was mobile but not small.

When the iPad came out, it’s pixel dimensions were 1024 x 768 (landscape). That was also the most common desktop screen width at the time.

The iPad was immediately called a mobile device. Maybe because it was easy to see it as an embiggened iPod Touch? But it almost completely invalidated the idea that pixel width was an indicator of a “mobile” device.

What to consider

If we stick to the good practices I mentioned above (clear and simple content, low filesizes), we can stop using the word “mobile” altogether and focus instead on other things that smartphones and tablets have made important:

Input method:

  • mouse
  • touch
  • voice

Probably the most important factor that smartphones and tablets have brought to web design is the touch interface. Luckily for many projects, touch and mouse can almost be considered equivalent. Stop using hover events and make link and button targets bigger.

Screen size:

  • single-column
  • 2 or more columns (based on line-length)

From 320 to 5120, every pixel counts. There are more devices coming out all the time with different form factors and pixel dimensions. Design for every size—it’s possible with fluid layouts. Save yourself some grief and start with single-column CSS. Add min-width media queries for larger breakpoints. Use %-based widths in between breakpoints and always keep the line length in mind.

Environment/physical context:

  • handheld
  • lap
  • desk
  • wall (TVs already have browsers)

These of course bring to mind their pixel widths, but I'm refering to the user’s physical method of interaction and their distance from the screen. Font sizes are a good thing to focus on when moving up or down that list.

Most combinations of InputMethod/ScreenSize/Environment represent real users in a practical sense. Forget “mobile”.

]]>
The TV Remotehttp://jorgepinon.com/posts/the-tv-remote

The TV Remote

January 30, 2013

Some people are 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.

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 this 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, I think) to use the space touch screen interface, but back in their space rooms everyone’s using voice commands.

You’ll never see anyone on the S.S. Enterprise use arm gestures to call up a Romulan Ale.

It’s true that flat touch screens make for bad remotes because you have to keep looking at it to know what you’re doing. But the benefits and economics of it makes that problem moot. 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 the point at which their go-to-market strategy is viable.

]]>
Proposal for a new CSS design layerhttp://jorgepinon.com/posts/a-new-design-layer

Proposal for a new CSS design layer

Published 2013-01-08. Edited 2013-12-14

​Here’s an idea that’s been banging around in my head for a couple of years now.

UPDATE (2013-01-10): some good feedback below about the CSS content property.

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, a handful of image-replacement techniques, fancy borders, etc. Heck, we even very often add some empty divs and other elements to our markup just to add yet more background images.

The theory is that the html represents the meaningful content and all visual design should be “in the background”—and there’s certainly sound thinking there—but in reality designers can, and do, find ways to use those visual elements to convey meaning as well. Sometimes for me there’s a cognitive conflict between using visual design to communicate and keeping those designs in a background layer.

Designers are always looking for ways to create compelling sites that do both those things. In fact, for many of us and for a long time, that is what web design is all about.

An example born in this communication-vs-background conflict is the group of techniques known as image-replacement, a solution to the problem of using CSS background-image properties to add a logo to the page while still including the company name in the markup. You want the company name in the markup for screen readers and SEO but branding wants a logo. So you set the logo using CSS background properties and then hide the html text itself somehow so that the logo can be seen in it’s full, customer-engaging glory. Genius solution really, but those are hoops we’re jumping through. I mean, text-indent: -9999em?

Then something occurred to me one day, probably while trying to figure out Cufon…

Presenting “foreground”

foreground-image layer
semantic content
background-image layer

What if there was a layer equivalent in every way to the background layer, but that displayed above the html? Think of “foreground-image”.

Right!?

Background properties are so basic to any web designer that a foreground layer that maps exactly to a background layer would be an instant hit. Suddenly, image-replacement techniques are unnecessary. It’s like progressively enhanced branding. It’s image-replacement without the need for the “replacement” part, because the logo would simply overlay the perfectly semantic text below it without any changes to your html.


    Acme Corporation
    .branding {
        foreground-image: url(logo.png);
    }

That’s it. And of course all the other related properties should be available too, including the shortcut:


    .branding {
        foreground: transparent url(logo.png) no-repeat;
    }

There are very cool embellishments that can be really simple right off the bat. How about a fade-to-white on the bottom?:


    .faded {
        foreground: transparent url(fade-bottom.png) repeat-x left bottom;
    }

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.

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, but also because I'm specifically not talking about content. I'm sure that once browser support catches up, the content property is going to be a popular solution for most simple image-replacement techniques, but at least it's current documentation doesn't imply several of the features foreground-image would support.

@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.

]]>
Why I can’t switch to Photoshop for icons and other UI assetshttp://jorgepinon.com/posts/why-i-cant-use-photoshop

Why I can’t switch to Photoshop for icons and other UI assets

September 9, 2012

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 was always better than realistic for me. I wanted to make art like Picasso, Hans Hoffman, Matisse, Alexander Rodchenko, and Basquiat. The phrases manerist and trompe l’oeil made me cringe.

That’s probably why the Flat Design Era sounds right to me.

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.

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.

  • Symbols

    I read about a neat way to use layers as variables or some such but it was complex and unintuitive.

  • 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.

Actually I’m soooo close to buying Sketch...

]]>
Disable java on Mac OS browsershttp://jorgepinon.com/posts/disable-java-on-mac-browsers

Disable java on Mac OS browsers

August 29, 2012

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.

]]>
Tate Modernhttp://jorgepinon.com/posts/tate-modern

Tate Modern

March 6, 2012

towering image of the Tate Modern's central chimney

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.

This is one of my few photos showing such obvious 3-point perspective.

]]>
No one wants to make lists (that way)http://jorgepinon.com/posts/no-one-wants-to-make-lists-that-way

No one wants to make lists (that way)

February 12, 2012

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.

]]>
For whom Helvetica speakshttp://jorgepinon.com/posts/for-whom-helvetica-speaks

For whom Helvetica speaks

February 10, 2012

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.

]]>
Yes, you can use 2 spaces after periods.http://jorgepinon.com/posts/you-can-use-2-spaces

Yes, you can use 2 spaces after periods.

February 4, 2012

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.)

]]>
A service for regular investorshttp://jorgepinon.com/posts/a-service-for-regular-investors

A service for regular investors

February 1, 2012

Update: XBRL has its own website, or two and, of course, an iOS app!

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.

Everyone will be able to ignore rating agencies.

]]>