Who Funds the Learner?

The Vanishing Entry Level

Empress of Balance – Colored Pencil – Richard Lee (2012)

New Stanford/ADP dashboard data shows entry-level roles contracting 3.8% per year in AI-exposed occupations, while older cohorts (35-50) hold steady. 

Once upon a time, junior designers earned their stripes on the slow and steady path. Depending on their date of entry, that might have been designing websites that didn’t convert, or building flows that confused users. Then they were shown how performance metrics suffered, or they sat behind the glass during usability testing while a senior designer traced the confusion back to decisions the fledgling designer made three sprints earlier.

Junior developers earned it in similar fashion. Maybe it was an accidental reveal of not-ready-for-release site content, or perhaps a 2 a.m. troubleshooting session that traced a production breakdown back to their front-end framework implementation choices. Different rooms, but the same mechanism. The lessons we learned before AI was on the scene? They cost us something, yes.   But it’s that sting that made them stick, and with enough mistakes under our belt and the learning that lies therein, we develop judgment. 

Of course, precisely how that pipeline was configured was never sacred. Just familiar and commonplace. You might even go so far as to call it common sense. 

Calculators erased the requirement to do math in one’s head. Digital layout tools led to no more hand lettering.  CAD erased the bottleneck of hand drafting.

Each time these changes landed on our doorstep, a chorus of practitioners insisted the new abstraction layer would produce generations that couldn’t really do the work, and could only operate the machines that were doing the work. But each time, judgment reconstituted itself one layer up. The “entry-level pipeline” was never a fixed pathway, it’s always been whatever the current domain, team and process kept at the bottom rung.

Why is this time different? I believe that AI advancements and adoption are so visible and widespread, this time we can watch the abstraction layer shifting around. We’ll either see the pipeline reform or see it fade away completely.  We’ll see it clearly in the data, which no one’s arguing we have more of than say, when calculators first rolled out. 

The Fork In the Data

In August 2025, a Stanford Digital Economy Lab team led by Erik Brynjolfsson published a finding that has since grown into a live-time dashboard built with ADP Research, covering roughly 4.6 million workers across more than 730 occupations.

The data’s headline is that employment for AI-exposed workers ages 22 to 25 is contracting at roughly 3.8% per year as of the most recent data, and that the decline has accelerated since the first year of measurement. Workers 35 to 40 in the same occupations are growing at about 2% annually. The squeeze reaches past new grads, as well. The 31-to-34 cohort is down about 1.7% year over year. 

Across all workers, at any age, in any domain and context, AI-exposed occupations are down just 0.2%. Generally, jobs are holding on.

Within the same firm, entry-level hiring in the most AI-exposed roles fell about 13% relative to less-exposed roles. 

It’s the On-Ramp That’s Collapsing

The Fortune piece covering the dashboard put it plainly: AI “absorbs tasks before it absorbs jobs.” It reaches first for retrieving, summarizing, scheduling, formatting. The tasks junior people have always been handed, because those tasks never required years in the seat. 

It’s worth noting that the Stanford team thankfully ran some controls on the research, taking interest rates, pandemic overhiring corrections, and the pervading sense of global despair mostly off the table as competing explanations for this collapse of the entry level pipeline.

ADP’s chief economist, Nela Richardson, points at the operative variable: whether an organization deploys AI primarily as automation or as augmentation. Occupations where AI is brought in and augments human work show durable employment growth. Occupations where AI is introduced and automates tasks outright? Those are shrinking. 

Same Tech, Very Different Outcome

The difference lives in an organization’s collective mindset and in the decisions that company’s leadership makes across several factors (talent training & retention, AI deployment and the usual build/rent/buy decisions). These decisions typically roll out without the “talent strategy” label, though that’s where it appears things are headed. 

Hold that thought, because it’s the crux of everything that follows. Why? Because supervising AI output requires exactly the judgment we are quietly ceasing to train when AI is deployed primarily to automate entry level work vs augmenting those occupations in a sustainable fashion.

A Strong Counterargument

I want to hand over the mic for an optimistic read on this debate, because I believe it has strengths, and a potentially viable path forward. 

A principal designer I respect at a mid-size HR-tech company pushed back on an earlier piece of mine, one arguing that AI adoption orchestration is becoming a dedicated role. Her stance on the ‘emerging role’ question, in her own words: 

“I’m not entirely convinced this is a dedicated role. If the company creates a culture of knowledge sharing, it’s a great way to surface workflows that may benefit others… I think each person should be empowered to build what works for them specifically, share when appropriate, and adopt builds from others if useful.” 

Her org runs on that model today. A dedicated channel, with people sharing AI workflows and skills proactively. No gatekeepers required. Having spent time in the very culture and org this approach is working in, I wasn’t surprised to hear it appeared to be effective in mitigating some of the worst aspects of AI Onboarding Debt.

But beyond a thoughtful, transparent culture where folks share with intention and strategy,  there’s an even stronger case to be made for saving the entry-level judgment pipeline itself.

Judgment Comes from Decision Cycles, Not Keystrokes

The grunt work (design critiques, code reviews, support ticket triage) was never the point. Rather, it’s been the fee those early in their career had to pay to move up, to take on more responsibility and be given more power.

If AI waives that fee, a junior designer who once would have owned five flows across two years can now learn fifty lessons vs. five. They see dozens of cycles go from project to shipped to results in the same span of time. A junior developer sees the same shift, from five branches full of hard-won wisdom to fifty shipped-and-broken cycles. More repetitions, not fewer.

The traditional pipeline wasn’t the most ideal filter in the first place. It selected for who could (and was willing to) endure years of low-leverage work, and for who had the pedigree to get hired into the pipeline at all. Neither is a great predictor of judgment.

The Fork Itself Is an Optimist’s Best Evidence

The Stanford/ADP finding doesn’t say “AI destroys entry-level work, full stop”. It says entry-level work contracts where AI is deployed as automation, vs how entry-level work holds on just fine where AI gets rolled out as augmentation. That’s proof that a viable, extensible path is live right now, and visible in the same data-driven dashboard. An org that deliberately pairs their junior staff with AI as a force multiplier (versus cutting staff and trusting that shiny new agent) is running the augmentation condition, even if they don’t frame it that way.

Where the Counter Doesn’t Hold Up

The verification bootstrap

Today’s design and development veterans catch bad AI-generated decisions because they made enough bad decisions of their own to spot them before they cascade. The next cohort will inherit that verification mantle, but sans the specific quality of cycles that make recognition possible for those who’ve been around the block a few times. Those fifty watched cycles,  blissfully absent of grunt-work and guaranteed sting-free? They don’t have the same stressors, and don’t dish out the pain that spurs judgment the way that five lived-cycles do, at least not in most domains.

A newbie pilot’s required flight-simulation hours compile into judgment because the feedback is fast and unambiguous. Either the plane crashed or it didn’t.  

Design work rarely offers that, and neither does most engineering above the unit-test level. When a junior designer’s flow gets shipped and the confusion it causes surfaces as a slow bleed in adoption metrics three quarters later, attribution is hard because it’s tangled with someone else’s redesign and a rebrand marketing swore was crucial for their Q4 goals. A junior dev’s architecture calls look fine until it’s load-bearing under features they hadn’t scoped and didn’t have the experience to proactively account for.   

Delayed, diffuse, and hard-to-attribute feedback doesn’t write to long-term judgment the same way a simulated stall warning does for that newbie pilot in training.

What the Data Reveals About Choice

Even if we grant the augmentation model everything it appears to offer, that path still has to be chosen.  The ADP Research dashboard is the record of what’s actually being chosen at scale: role contraction is concentrated in the same place as automation-mode AI deployment, with the net effect growing month over month by roughly half a percentage point. 

It’s not a data artifact, it’s the result of deployment decisions by thousands of firms, made mostly by default. A junior IC navigating cycles with judgment-producing stressors (the  augmentation model)  built in is a cost center without a plainly visible, near-term payoff. 

Nobody is budgeting for the learner, and four years of data have revealed the preference for the vast majority: nobody is about to.

Even If Augmentation Wins, There’s a Cost

Say augmentation wins outright and judgment keeps forming. It’s still worth naming what that victory actually costs, because the maturation process isn’t instant.

The advancement of digital layout tools produced designers whose judgment formed differently, yes. However, it formed no less rigorously than those who did hand lettering and used rubylith.  It also resulted in a period where the in-between cohort absorbed the digital disruption, without a playbook and with a dual learning-and-practice load. They carried both digital and analog knowledge and techniques, without any extra for the trouble. 

The 2023–2030 workplace entrants are in that awkward phase right now, whether you fall on the pessimistic or optimistic side of this topic.  And while I don’t have a confident estimate for how long this phase will run,  5-7 years would be my guess based on prior precedents and the degree to which AI seems to confound precedent entirely.

The Category Error

Here’s where the real question and the designer’s sharpest observation come together. Her sharpest observation wasn’t the culture argument, but a question she raised in passing about the hard part of AI deployment and adoption. 

“The socialization, governance & trust that comes along with it… whose responsibility is it?”

Organic knowledge-sharing culture solves for process and tooling diffusion. In an org doing things right, relevant and effective workflows built by one person quickly reach the rest of the org, even without a dedicated role driving that outcome. That’s a real problem, a real source of pain I’ve had several seniors convey to me, and one that the model her org practices addresses well.

That said, formation of judgment is a different problem wearing similar clothes. A shared channel of AI workflows may tell a junior how to build something, or perhaps even what to build. 

But it doesn’t put them through the cycle of thinking, building and shipping, then watching the consequences land. It doesn’t knock them down, make them wince and then clamber up and step back to the drawing board. 

We need to find new ways of building in the reps the verification bootstrap shows us are nonnegotiable. While conscious diffusion can move artifacts between people who already have judgment, it doesn’t manufacture judgment in people who don’t yet have it. An org can run a flawless sharing culture and still have zero judgment formation happening underneath it. 

In this scenario the collapse just happens quietly, even inside companies with excellent knowledge sharing. A few years on, there won’t be any juniors capable of exercising judgment and independently making calls that require it.

I’m not claiming my designer friend’s model is wrong, and it answers the diffusion question well. But her own “whose responsibility is it?” still sits on the stack one layer down, where the artifacts stop and the judgment has to kick in.

Who funds the learner

If the fork is real, and the data says it is, simply naming your org’s AI deployment strategy as “augmentative” doesn’t mean the judgment-formation pathway will build itself, even inside the best sharing cultures in the industry. Someone has to figure out what a junior must do across those fifty watched cycles so that watching turns into judgment.

The apprenticeship cannot consist solely of watching fifty data points of exposure. There must be real stakes. There have to be consequences a junior human gets to feel, and real accountability for catching what the AI gets wrong. 

Someone has to build the structured apprenticeship interlaced with using AI to speed up and automate what doesn’t contribute to building judgment. That’s a role missing from most headcount plans, and the revealed-preference data says it’s losing the budget argument every quarter the dashboard reports.

So the age-old mechanism survives: entry-level to senior decision maker. Judgment can still form on the far side of this AI transition, the same way it formed on the far side of every transition before it. But it won’t form by default, and the question every org is answering right now, whether by strategy or by default, is the one this piece can’t answer for them: 

Who funds the learner?

UX Had to Beg. AI Didn’t Even Knock

A Long, Long Time Ago

It’s 2013 in beautiful Knoxville, Tennessee and I’ve just been hired by a healthcare software company to build up a UX design team. The focus? Physician-facing and care team facing  applications and workflows. The kind of context where deep knowledge of how clinical users actually think and work isn’t a nice-to-have, it’s a requirement. 

Except that’s not quite what happened. Over the following months, through a series of smaller decisions and quieter conversations, the picture changed. The team never materialized and the role drifted. What they actually needed, it turned out, was someone to evaluate vendors and manage design relationships. An art director, something I had done before, pretty extensively. And yet…

The contextual knowledge that healthcare UX requires, the kind you build through research and iteration and repeated proximity to actual users? It got treated as a secondary consideration. Engineering was the center of gravity. Design just orbited it. I trained my replacement and left exactly one year after I started.

Two years later

At Siemens Healthineers, I’m sitting across from an engineering manager who has politely but clearly already decided this meeting is a formality.

We’re talking about PET scanner workflow software. The screens that a nuclear medicine technician uses to dial in radiation sensitivity, read radiological event data and confirm what’s been captured and what’s still pending. Heady stuff. 

The screens are all in black and white. Dense gray scale without much visual hierarchy. No color cues and no summary of present state. Just numbers and toggles that the technicians had been memorizing for years, because the alternative was slower.

I had some questions, and with tech constraints onboarded, I soon had upgrade proposals:  better resolution, colors to encode and depict radiation sensitivity ranges, a progress summary surfaced where it was actually needed and changes that would reduce the cognitive load in workflows where errors had real consequences.

The engineering manager looked at the mockups, and then at me, then back again at the mockups. “We’ll think about it,” he said.   That quarter, I ate a lot of catered lunches at my own brown bag events talking to engineers, clinicians and physicians as well as product managers, sales and marketing. 

Doing Reps – UX Adoption

Here’s what UX adoption actually looked like in that era, from the inside. 


Perhaps you were in a new practice trying to earn a seat at a table that had been set without you. Engineers and executives didn’t dismiss UX because they had evaluated it and found it wanting, but because it looked decorative. Soft and touchy-feely. The frou-frou department, one executive at another company once called us. (I’m not making that up.)

The resistance lived at the top and in the middle and the people with institutional authority were the skeptics. Which meant that one of the most promising paths forward was bottom-up proof. 

Meaning what? Patient, persistent and high-quality work that kept raising the bar. Usability testing session videos where engineers sat and watched real users struggle with interfaces they had built. HCI fundamentals explained in terms of sensory memory and visual processing, in the language of people who thought in systems. Brown bag lunches and hallway conversations. Prototypes that were better than anything anyone had seen before from a design function.

One full quarter of pursuing this at Siemens Healthineers and then…Then a YES.

Two companies, two shapes

They both circled the same problem: UX climbing uphill against institutional skepticism, converting the powerful through evidence they couldn’t easily dismiss.

There’s a documented failure mode worth naming here, one which Debbie Levitt wrote about in 2022 in UX Magazine: UX practitioners who responded to that skepticism by democratizing their work, running design sprints and workshops that invited everyone to “do UX,” inadvertently taught organizations that UX was something anyone could do. The tactics designed to build buy-in ended up hollowing out the credibility they were meant to establish. 

The ones who navigated it well held the line on expertise while still opening the door. Proof positive rather than participatory theater.

AI arrived differently

It didn’t send a calendar invite. It didn’t ask for a pilot program. The budget showed up first, and then the mandate. Then the all-hands where leadership explained that we were going to be an AI-forward organization, effective immediately, and wasn’t that exciting?

The resistance to this new influence flipped from technical and leadership to creatives and engineers in the trenches. 

We’re talking Design and Development, the people closest to the craft. Everyday users who had been handed tools they didn’t ask for and told to use them. These are the skeptics now. Not the executives, and not much engineering leadership. The people with institutional authority are already sold while the unconvinced are the practitioners.

Same adoption problem, with an opposing polarity.  So what does that reticence actually look like up close? Some of it is displacement anxiety, which is real and reasonable. Some of it is quality concern, also real. Some of it is ethical unease about training data, authorship, environmental cost. Some of it is something harder to name: the feeling that something is being done TO you rather than WITH you. That the conversation started without you and ended before you arrived. That last one sucks, doesn’t it?

Resistance Vectors

Here’s what I keep returning to… That the tactics that worked in 2013 were designed for a specific direction of resistance.

Brown bag lunches work when the VP needs convincing. They don’t work when the VP is already sold and your creative director is the holdout. You can’t mandate your way to bottom-up trust. And you can’t run a workshop that teaches skeptical practitioners that “AI is good, actually” without recreating the exact failure mode Levitt described. You’d be running AI evangelism theater, basically going through motions that signal organizational enthusiasm while building neither genuine capability nor genuine confidence in the people you most need to reach.

So what does the reverse playbook look like? I don’t think we have a settled answer yet, but some hypotheses are worth examining.

Proof by invitation, not assignment. Let skeptics choose their own first use cases rather than handing them one. The brown bag that worked at Siemens wasn’t mandatory. It was catered, which is different. People showed up because they wanted to, and left having seen something they hadn’t expected.

Honest failure visibility. Show where AI breaks, not just where it succeeds. Calibrated trust is more durable than converted enthusiasm. The usability testing videos that moved engineers at Siemens weren’t highlight reels. They were uncomfortable to watch, and that was a big part of the point.

Craft preservation framing over craft replacement framing. What does AI protect practitioners from, rather than what does it take? That reframe isn’t just spin, and more often than not it’s a more accurate description of what’s happening in the workflows where AI is genuinely working well.

Peer signal over executive signal. Who in the skeptic community is actually using these tools well, and are they visible? In 2015, the practitioner who moved me forward with engineering management wasn’t the VP. It was a senior engineer who had sat through a usability session and couldn’t stop talking about it afterward. Credibility traveled laterally before it traveled up.

None of these are prescriptions, and obviously the playbook for these tactics is still being written.

Next Generation Adoption Attitudes

One more layer of this problem is being built right now, and it’s further out than many folks are looking.

On a recent road trip, my teenager told me about AI at school. Compulsory exposure. Tools introduced without much context for why. Classmates who had concluded, from their first extended contact with AI, that it was something to be skeptical of or dismissed. Not because they’d evaluated it carefully, but because their introduction felt like something being done to them.

Sound familiar? The adoption problem isn’t just in current workplaces. It’s being reproduced downstream in a generation whose first impressions are forming right now. That’s a longer conversation and it deserves its own article. But it’s worth naming here: we’re not just behind on the current adoption curve. We may be behind on the next one too.

Wrapping Up

In 2013 the question was: how do you convince the people with power that this practice has value?  Well, we figured that out. Imperfectly and slowly, with more catered lunches than anyone should have to sit through. But we figured it out.

The question now is different. How do you build genuine trust with the people doing the work, when the people with power already believe?

I don’t think we’ve found the answer yet, but I’d love to talk with the bright minds working on it.

—–

#AIAdoption #AIAdoptionDebt #DesignOps #UX #Leadership #ProductManagement #EngineeringLeadership #FutureOfWork #NextGenerationTalent

The 30-Point Sprint: How Leaders Hoard Capability Instead of Building It

A staff engineer at a scaling tech company told me about their managing director — someone with organizational authority, access to the best AI tools, and apparently a lot of enthusiasm for using them. The director had assigned themselves 30 development story points in a single sprint. The rest of the team was carrying 6 to 16 each.

“They vibe code everything,” the engineer said, shaking their head. Their team was left babysitting that output.

I’m not here to cast shade, and I’ve seen enough versions of this pattern to know it’s rarely malice — it’s excitement without governance. Glee without the long view. AI makes execution feel effortless, and when that feeling hits someone with organizational authority, the natural instinct is to run with it and stay in motion.

But I keep thinking about what a different story that could have been.

Imagine the same director, the same tools, and the same gap in formal coding skill. Instead of assigning themselves 30 points, they walk into a team standup and say:

“Here’s the problem I was trying to solve, and this is how I approached it with AI. Show me how you would do it the traditional way — and then show me how you would do it with the AI tooling we’ve implemented. Let’s talk through the strengths, drawbacks, and leverage opportunities for all three approaches.”

How different would that be for the team? For that leader? For the org’s health as a whole?

That’s not a weak play. That’s one of the highest-leverage moves a leader can make — using their own ignorance as an opportunity to build a structured learning platform. The team gets to teach. The leader gets to learn. The org gets a three-way comparison that surfaces assumptions, tradeoffs, and best practices that would otherwise stay locked in individual heads — or leave entirely when those people move on.

It becomes a running growth exercise. It compounds, to the good, for a change.

Instead, the reality

30 story points for someone who should be focused on meta-level engineering concerns. A team stuck babysitting their leader’s output. And an opportunity for something genuinely great quietly wasted.

AI gives leaders without deep technical chops a real reason to lean in — not for the first time, but never has it been so readily accessible. The question is whether they use that access to hoard capability or to build it.

The answer is what separates a manager from a leader.

Originally shared on LinkedIn.

It’s Users All The Way Down

Sometimes in the process of defining your users, you’ll discover that, much like turtles, there are layers upon layers of them just waiting for their stories to be told.

Background

Joining a company late in 2014 as their new UX professional (and founding member of a growing team) has been an eye opening experience. Not only have I been able to finally practice what I’ve been preaching and learning the last few years, but I’ve been exposed to the healthcare industry – which is entirely new to me. Tons to learn = tons of fun.

Anyone in experience design must carefully consider their users’ goals, circumstances, capabilities and habits. This is one way for us to get out of our own heads and as far into our users’ heads as possible – avoiding the trap of designing for the users we’re most familiar with: ourselves.

Identify the users we’re serving is a great place to start. This sounds simple and it can be – but it can also be a complex puzzle (with all the edge pieces hiding and the corner pieces eaten by your dog.)

What my company does

At a high level, we provide a secure and efficient communication platform for the healthcare industry. The platform helps patients, practice staff and hospital staff efficiently contact physicians.

The problems we solve:

  1. handling the bazillion ways that physicians within a hospital or practice setting need to be contacted depending on situational context.
  2. sending information to a physician in a way that is secure and does not violate laws around the privacy of protected healthcare information (PHI).
  3. maintaining a fine balance between the needs for privacy and accessibility on the part of the physician.

Who are our users?

User (Turtle) #1: Our external users

This group includes doctors, nurses, acute care staff and hospital / practice management. They’re the obvious answer to the ‘who is our user’ question – the system was designed to meet their needs and everything revolves around maintaining and enhancing the capabilities that our platform extends to them.

If we push out a buggy feature or misjudge the utility of an enhancement and sacrifice something more vital, these are the people who feel it the most. We should be in close contact with representative members of this group, testing things out and gathering feedback constantly. This group will (and should!) receive the highest prioritization when it comes to evaluating features, to doing user research and to planning and executing usability testing. That said, don’t stop here!

User (Turtle) #2: Patients

Our healthcare professionals are themselves serving another group of users: their patients at member hospitals and practices across the country. These are the folks that our external users are under oath to care for, and who they went to school for a dozen years to serve.

This is the group who pays the price for inefficient communication practices. It’s the folks who have seen their premiums and deductibles climb year after year and who in too many cases don’t have insurance at all. They pay dearly for any healthcare they receive. This is you and me, when we visit our family doctor or when we land in the emergency room after falling off the roof in an ill-advised attempt to save money on chimney repair.

While we can’t prioritize designing for this group over the others, we should always consider the impact of our decisions on these people.

User (Turtle)#3: Internal Users

We have another group of users not immediately obvious to the naked eye: our internal users. These are the folks that use a suite of applications to onboard new external users and that support their needs on a 24/7 basis, 365 days a year.

They don’t use the exact same set of tools as our external customers, but they’re touching the same data and hitting the same systems. Their needs are also much more diverse since they service every type of external user and must become experts in the task flows for those users. This is no small feat, as the training required for these folks to become proficient runs from a full week to a staggering 3 months.

When considering the needs of this user group, striving to avoid introducing further complexity is a big priority. Beyond that, a large part of your backlog might revolve around taking steps to reduce that complexity even further (and therefore lighten the cognitive load of using the system).

If you’re in this situation, your company’s bottom line could be affected nearly as much by internal facing changes as it is by changes that affect your external users.

User (Turtle) #4: Executive Team

You’d think we had all the bases covered, but there’s actually one more group of users to touch on. Let’s call it the owner/executive team, made up of company ownership and senior leadership in both your external users’ companies and your own organization.

The goals and tasks of this group tend to be pretty straightforward, and sometimes seem pretty far removed from what the other three groups of users are concerned with. That said, while I don’t recommend placing too much weight on designing for this group, I do believe it’s a mistake not to consider their needs. Pulling off a win-win effort that enables this group to hit their goals tends to be a self-reinforcing success for a company.

Wrap Up

If you only take one thing from this article, know that accommodating anything less than every group of users in your designs is a Bad Thing.

Imagine that your executive team has seen the effect that your team’s UX design and development work has had on the bottom line – and so they foster a culture that values and encourages such efforts on an ongoing basis. This belief is folded into the company’s core values, and soon the sales, support and product development teams are all on the same page.

Your external users consistently see improvements, enjoy using your product and feel that their feedback is valued and acted upon. Inevitably these happy professionals pass those benefits on to their own customers . For our patients user group that manifested through cost savings, less time in the waiting room or waiting on a surgery date, and better quality of care.

Your internal users don’t have to jump through hoops to support the customers since the support tools they have been given are performant, intuitive and easy to use.

Wouldn’t that be a beautiful place to work? Are you ready to make it happen?

Design Constraints Are Awesome

While reading some material recently I was particularly struck by a correlation between the sentiment of “designing for monochrome first” (for color deficient users) and the design movement termed “Mobile First”.

In both cases, the designer aims to build their interface elements such that the largest % possible of users will have accessibility to the data, based on the real and perceived limitations of the environmental factors imposed. After baseline accessibility and usability you can worry about nuances and aesthetics.

Monochromatic vision strips the designer of color-based tools and techniques, forcing you to fallback to the use of shape, contour, contrast and pattern. The Mobile First design sensibility forces the designer to carefully prioritize what elements of the design are truly needed to accomplish the goal(s) of the product, framed within the limits imposed by a smaller display. You also have to consider the contextual differences in usage between a mobile device and a desktop computer, and within the vastly different feature sets of modern devices.

I often hear about project constraints in terms of drawbacks, of obstacles to building the perfect widget. It’s much more helpful to think of constraints as helpful wayfinding elements on the road to successful project definition. If you know what they are, you won’t waste time in rabbit holes and you’ll be able to focus your time and attention on crafting the best product possible – one that will meet the unique needs of your users, whether or not they can see colors and regardless of what they’re using to access your offerings.

Notes from CodeStock 2014′s “Regular Expressions” presentation

Brian Friesen’s talk on Regular Expressions was probably my favorite of the conference. You gotta admire a guy who builds a regular expression engine to properly demo and train folks up on the ‘devil’s language’ (as I and others I’ve known have called it)… Folks that hate regex and those that live and breathe the stuff all got something from the session. Good stuff.

Regular Expressions – now you have two problems

Brian Friesen
@brianfriesen

Works at Quicken Loans (side note, I used QL last year – hands down the best UX I’ve ever seen in a mortgage product/service)

github.com/QuickenLoans/RegExpose

Regexper.com

Regular-expressions.info

The Bible:
Mastering Regular Expressions by Jeffery Friedl
– can read the first 2/5 of the book and you have enough
———————————————————————–

1. RegEx are hierarchical

Root node = the whole expression

ABC would tree out like this:

ABC – root
A – character literal
B – character literal
C – character literal

2. RegEx do their thing sequentially

A RegEx will match if each of its child nodes matches in sequence
After a match, the RegEx engine will continue trying to find further matches until it has covered the entire string.

RegEx are by default case-sensitive

Character classes are surrounded by square brackets
– for a range, use a dash.
– if you need a dash in the match, put it at the beginning of your set within square brackets
– you can also include specific characters or numbers to match against
– can include a-z and A-Z, or you can pass an additional param to ignore case
– a negated character class = add a “^” carat character before a match. ie [^a-f0-9] would ignore a-f

Shorthand matches
– \d is the same as [0-9]
– \D is the same as [^0-9]
– \s matches whitespace chars
– \w is the same as any word character, meaning [A-Za-z0-9_]
– . matches any character, depending on options (ie except for new line character)

Alternation
(it’s a pipe dream)

| character means “or”
– linos|tigers|bears ‘lions’ would match, but regExp doesn’t know if its the BEST match, so it saves state (a breadcrumb) and moves to check the other choices.
– if a match hits on the last option in a set of choices, no state will be saved, no breadcrumbs etc.

Quantifiers (quantifiers are always AFTER)
(Because sometimes, quantity trumps quality)

Greedy Quantifiers (greedy means quantifier always wants more, ie. will keep going)
——————
– ? = optional
– * = will match zero, will match many
– PO*P would match “PP” as well as “POOP”
– + = must match at least once to succeed
– NO+! would match “NO!” as well as “NOOOOOOOOOOO!”
– {} = match a specific number of things
– \d{3} = this means match exactly 3 digits
– \d{3,15} = this means match at least 3, but up to 15
– \d{3,} = this means match at least 3 with no high end limit

Ultimate lazy quantifier: .*

Causion against using “*.” – can lead to a match failing since the greedy ‘any character as many as possible’ matching could lead to skipping more specific matches after the *.

Lazy Quantifiers – will only match as much as is needed, without going overboard
Once a match is made it will pass control to the next match paramater until it’s needed again…
—————-
.*? = Lazy
{3,5}? = also Lazy (in this case, once 3 digits were matched, the next node in regexp would be matched)

– ab.*?cd would match “abc12345cd” with the lazy quantifier returning to the ‘c’ character repeatedly before going back to the next number character

More alternation
—————-
(?:white|dog|brick) house
– match against “dog house”

Quantifers + grouping
———————
(?:NaN)+
– match against “NaNNaNNaNNaNNaN”

Notes from CodeStock 2014′s “Angular Is Awesome” presentation

Josh walked us through building a simple Angular app, using the lessons learned from Wintellect’s recent dev and launch of a global enterprise software app.

Angular is for AWESOME!
Josh Carroll
@jwcarroll
technofattie.com

The code
github.com/jwcarroll.ng-contacts

directives – typically an attribute on an element

————————————————-
ng-app
ng-init (used to inject a title in his demo)
– ng-init=”contacts=[bob1,bob2,bob3]”
– plugged it in with {{title}}
ng-model
– he bound an input to the ‘title’ var he had leveraged in the injected title
– ng-model=’title’
ng-repeat
-ng-repeat=”contact in contacts”>{{contact}}
ng-search
– “searching by ‘{{search}}'”
ng-if
– truthy comparison results in rendering the stuff
– empty string resolves to 0 so nothing would render

ng-controller – find the controller, and hand off DOM control to the controller by adding ng-controller to an element (ie a containing element)
– ng-controller contactListCtrl as ctrl (do a one time all inclusive effort to make $scope aware of all your controller’s functionality)

ng-view (a new html tag by virtue of angular)
– ala

ng-animate – a way to harness css3 animations

General
pipes (|) are filters. (think gulp)
– takes in something and returns something
– example was var AgeFilter (which returned a function as the filter)

$http as a param passed to function
– this.$http.prop etc.
– _this.$http.get(){
.success(callback) //this is a promise
}
– same for delete, etc

Modules
– used an IFFE function
– a module is a container holding the stuff related to the application

Controllers – just a JS object
$inject = a way to tell NG you need a component (used with $scope)
– $scope being where the data binding happens

Lodash (_. prefix)

Services
– must register a service
– can inject a service into a controller

Routing
– ngRoute (out of the box routing within angular)
– colon (:) is a routing parameter
– as in /contact/:contactId?
– routing as SPA method.. each route can be passed a different controllers (essentially a path-specific template) etc.

Handling when a route fails (ie error handling)
– he made a new js file: routeError.js (again, directive is a new html tag)
– which contained a new directive

Notes from GiantConf 2014′s “Building a Whole Team UX Design Team” presentation by Phillip Hunter

In his presentation on day two of GiantConf 2014, Phillip Hunter talked to us about “Building a Whole Team UX Design Team”. Here are my notes from his talk.

Phillip Hunter – Building a Whole Team UX Design Team
@designoutloud
http://www.minotaurdesign.com/blog/wp-login.php

His belief is that in the UX community, team building is much like early days in baseball scouting.

The focus on stereotypes:
on rock Stars in the industry…….
(is that a person w/ diseases and who trashes hotel rooms? lol)

On Ninja’s….
(is that the person who kills people in the night? lol)
Focus on design mishmash – (beanie/knit cap and glasses, lol)

– Stereotypes don’t help us build better UX teams. Avoid them.

(slide of the major pieces of most companies) – All these people are ENABLING the user experience.
– most of us are in Product development team.
– so it’s silly to think of one small piece of the org as wholly responsible for the UX of a company

4 primary capabilities (as a grid):
– engineering leading technology
– maintaining strong teams
– running a successful business
– enabling great experiences

The practice of creating experience is a SERVICE – look to service design for cues

Strategy means defining and inspiring before hiring

Hiring a dev, designer, tester because you need to developer, design and test is premature.

Context + capability to help you know the best way to create that holistic UX mindset.

OAQH- Orient, Assess, Question, Hypothesize

Setting the team-building CONTEXT:
– what are our goals, values, constraints and principles as a corp?
– what do we need to get done?
– why?
– how much/how fast?

Setting capability requirements:
– What do we need to be god at?
– How good? How will we know?
– What are our priorities?
– Not who…. (yet)

Liz Bacon’s infographic on her definition of user experience design
– pie chart of sorts
– ranked herself within each facet

Building effective structures within the company:
– Complementary strengths vs homogeneous development
– Breadth and depth of skill across people
– Increase participation

Beyond hiring and skills:
Shape align and inform with biz goals
Aim for impact, scope, scale, diversity, resilience, sustainability

Crazy list of necessary skills (all of which mapped back to the grid of 4 above)

Atomic elements of necessary high level skills

Have the right project members been identified?
In what areas will augmentation be the best thing?
What kind and from where?

Building Your list of necessary Skills
Skill name
-skill 1, 2, etc becomes `> color, line, shape 2. Latent need identification, ebrand integration, prototyping, etc.

Gathering list items:
Ask your UX leaders and ICs, your UX enthusiasts, your Product owners, your Execs and sponsors.

(ranking 1-5 etc)
Skill name – Current Level – Desired Level – Priority
– – – –
– – – –

Perceived skill gap
– gap value on its own wasn’t that compelling/illuminating
– Gap value multiplied by Priority – this really surfaced the true GAP in context

Conversations that can come out of the above types of analysis?
Who does that already?
How can you get them involved?
What do your colleagues want to be good at?
X is how we need to craft our job description for HR!!!

sixboxes.com
framework for aligning people’s desires with their roles, and ultimately their ideal internal path that also benefits the company

– issue challenge to add UX to everyone’s job
– Let people find their point of contribution

HIRING (since sometimes you just have to…..)
– understanding and implementing the strategic framework from above
– involve the team to determine fit and talent
– Hire the inspired

Phillip’s slides (Thanks, Phillip!) – http://www.slideshare.net/philliphunter/building-a-whole-company-ux-team

Notes from GiantConf 2014′s “Embracing the Suck” presentation by Chris Harrison

In his presentation on day one of GiantConf 2014, Chris Harrison talked to us about “Embracing the Suck”. Here are my notes from his talk.

Chris Harrison – Embracing the Suck – 10:45a Thursday, June 12

@cdharrison
cdharrison.com

Embracing the Suck: Military phrase meaning to make the best of whatever situation you’re in..

Background:
– Weight loss – 529 to 377
– weight gain due to being depressed, hating what he did, etc.
– Making sites since 1996.
– Former fulltime freelancer
– now: frontend dev for Morris Communications (magazine division)

2013 state of the workplace
30% engaged and inspired
18% actively Disengaged – sabotage their coworkers (cost 450-550 million a year)
52% permanent case of the mondays – do just enough not to get fired

Sometimes you just gotta suck it up.
– Consider the alternative – it could be worse.

– dan willis, “great takes work”
– choose your battles and spend your energy wisely

Negativity is a cancer! (this could be a talk topic!)

Sometimes complaining takes more effort than just getting things done.

Don’t fear new. New = opportunity. (he was told he’d be doing all joomla and drupal work. This was not happy news)
– learn on the companie’s dime
– doubtful he could have learned this stuff as a freelancer (no time/money in it)

Everything you do is a learning process for everything.

– thomas edison’s quote about opportunity and how it looks like work.
– fabio at mailchimp, lead html email designer. was hired to do ui/ux, but they approached him to do HTML emails.
– we know as an industry that html emails suck.
– when he heard this, he embraced the challenge.
– 5 years later he’s an innovator in a field where it was thought there was no room for innovation left.

Opportunity opens doors…

Help your team…
– concept of jumping on hand grenades (someday you’ll need help from the person you help today)

Small wins are still wins. (make it something awesome despite the scope)

Make learning a priority
– learning about sass etc and givng talks about it.
– things suck less when you share what you know with your coworkers
– codeschool etc. as good options for continued learning.

“Sneak” new technology/techniques into projects, but strive to get buy-in from your coworkers (if not management)
– Demonstrate the benefits of incorporating these new techs into an existing workflow

Find creative outlets
– draw more.
– starting doing illustrator avatars for friends
– take pictures! (vader, ninja turtles)
– lilvaderadventures tubmler

Scratch your own itch – side projects rock
– itembrowser.com – his first responsive project
– learned media queries, etc.

Start using your powers for good
– jingle jam (10k) benefiting safeHOMES charity
– design + development + marketing
– someone could really use your talents!

Happiness depends on ourselves – aristotle
Even sucky work can make you happy. Give it a chance.

Notes from GiantConf 2014’s RWD workshop with Brad Frost

In his RWD workshop this last weekend at GiantConf 2014 Brad Frost plowed through the history, current state, best practices and possible futures of the RWD philosophy/approach. Here are my notes from his talk.

June 14, 2014

His experience: web on mobile for 4+

  • Responsive Design Patterns
  • ThisIsResponsive.com website and github (http://bradfrostweb.com/blog/web/this-is-responsive/ & http://bradfrost.github.io/this-is-responsive/index.html)
  • (older site) – Mobile web best practices
  • WTF Mobile Web (what not to do)
  • Cosigner of Future Friendly Manifesto
  • Worked for R/GA at one point…showed the company logo slide to illustrate that no one knows what they’re doing.

General Landscape

  • i6bb mobile subscriptions
  • in america, 91% of americans have a mobile… 56% of those are smart phones.
  • 1.5 mm android activations a day
  • 1/3 americans have an ereader/tablet
  • 20% of ALL internet traffic is mobile
  • 68% of americans access the web via phone
  • 33% of those ONLY use the mobile web
  • Mobile web pictogram –
  • 157mm users ONLY use FB from their mobile
  • What are we sharing from mobile on social? (text photos videos and LINKS)
  • 51% of referral traffic to media sites came from FB mobile
  • blog.cloudfour.com – good status on mobile – a comprehensive guide

Approach – Options

  • Do nothing. (rant: cultivating a nation of slide swiping screen surfing zombies)
  • Make an APP!
    • App glut
  • Links don’t open apps
  • pros and cons of course
  • Separate Design Experiences (Nielsen’s advice, to build two sites and cross-linking to make it work.)
    • more dedicated, optimized, catered experience
    • no need to adapt
    • potential to be more performant
    • url redirection (getting a mobile version of a site on your desktop due to a link given to you)
    • content parity
    • content governance
    • device database
    • SEO issues (better to keep your links under the same single site)
    • Continuity issues
    • The Space Between (kindle fire, etc.)

Strategy

  • Build a barebones mobile responsive site, and grow it over time.
    • eventually kill the old clunky desktop site
  • Responsive retrofitting a site
    • j spool’s ‘escalator of acquired knowledge’ (people hate when you completely tear down and rebuilt their beloved sites)
  • Mobile First (progressively enhanced, future friendly, awesome)
  • Piecemeal approach: “our responsive header is almost done”
    • seen on really huge sites in recent times. footer, header, module by module
    • acclimatizes the user
    • he’s only seen it in large companies, but he thinks it could work very well for small
    • companies/sites/teams, perhaps more so.

Foundations

  • Ethan Marcotte @2010 in ALA
  • Fluid Grids, Media Queries, Flexible images
  • the Fluid grid should do most of the heavy lifting! (don’t go crazy with media queries!)
  • Context is needed
    • Adaptive is a bigger container than responsive, and itself contains responsive
  • There are other parts, but RWD is what stuck.
    • Feature Detection
    • Server side components*
    • interdevice communication
    • performance, etc.

Principles of Adaptive design

  • ubiquity (this is for everyone, for anyone, for us all
    • diversity is not a bug, it’s an opportunity) – step reiger
    • mobile users will do everything desktop users do, if it’s accessible.
    • Content parity
    • Context
      • Quantitative
      • Qualitative
  • flexibility
    • embrace the squishiness
  • performance
    • 71% of mobile users expect mobile sites to load as fast or faster than desktop sites
    • you have 5 seconds of someones time…
  • Future friendly – Invest in your content. -> Make APIs, not war

Frameworks

  • Bootstrap, Foundation by Zurb, etc.
  • Jetstrap/Bootkit
    • these are all well and good, but lead to look alike issues
    • One-size-fits-all
    • Potential for bloat/unneeded stuff
    • might not do what you need
    • integration issues
    • have to subscribe to someone else’s decisions
  • Tiny Bootstraps, for every client. – Dave Rupert
  • Front end style guides
  • promotes consistency cohesion
  • easier to test
  • better workflow*
  • creates a shared vocabulary
  • useful reference
  • Lots of front end style guides coming out (started with starbucks. starbucks.com/static/reference/styleguide)
  • problems with these:
    • Time consuming to create
    • treated as an auxiliary project
    • often too abstract
    • often seen only as a designer/development tool
    • created after a project launches
    • often incomplete, only serving present use cases
    • often lack a clear methodology

Atomic Design

  • josh duck’s periodic table of html elements
  • @dmolsen
  • Abstract ————————-> Concrete
  • Creators ————————-> Clients
  • Atoms, Molecules, Organisms, Templates, Pages
  • Reference, Build, Build, Build, Reference

the pattern

  1. ATOMS (input field)
  2. Molecules (search module)
  3. Organism (site header)
  4. Templates (site header bundled into a whole page template) -focus on content structure (reference to mark boulton.co.uk – content strucure first, not required to have content first)
  5. Pages (the pouring in of real & true representative content to see if it all works)
  • validate or invalidate the atomic design thus far
  • you test variations of the template at this point (still the same template though!)
  • does it scale? (content length, list item length, etc.)

pattern lab

  • @dmolsen Dave Oldsen and Brad created it
  • Open source project
  • What is it?
    • It’s a design system BUILDER
    • designed to help you execute a design system
    • a custom component library
    • a pattern starter kit
    • a practical viewport resizer
    • an annotation tool

It’s NOT:

  • a UI framework
  • Language, library, or style dependent
  • Incredibly rigid
  • “just” a pattern library, but also not a prod ready static site generator
  • ..like Jekyl

moving parts

  • builder
      mustache for templating the guts

      JSON for piping in real content

  • viewer
    • ish (gives you a different value every time (small button gives you a smallISH value)
    • Lets you rapidly preview random and different layout scenarios
    • displays the size of the display currently in view.. as px and ems. Annotations
    • his issues with wireframes in general… long assed annotations, iXds are working in a layer of abstraction
    • The annotation tool couples numbers with an overlaid layer of annotated description
    • Annotations with JSON
    • Lineage
    • Shows off what components make up a particular component, and where its applied.
      • ‘X pattern contains the following patterns’
      • ‘x pattern is included in the following patterns’

Other stuff

  • code view
  • pattern status
  • auto refresh
  • page follow
  • Future: plugins
  • idea of checking your performance budget whilst developing with Pattern Lab

What’s the hardest aspect of responsive web design?

  • design/dev or people/process (overwhelmingly process/people)
  • Entertainment Weekly
  • you have to sell people that RWD is the right thing
    • using data (showing conversions, improvement metrics – hockey sticks)
    • SHOWING not TELLING is a lot easier to sell through to clients
    • talk about the simplicity of the 3 pillars (flex grid, resp images, media queries)
    • why RWD matters, selling to Tiffany in his R/GA days:
      • He took a representative page from their site… (their desktop site), and demoed how it COULD be if set up properly
        • It took him half a day…
        • they then took a crapload of devices and spread them out on a long table… two tabs open on each device one for now vs possible Set Expectations
      • Don’t sell websites like a painting. Instead, sell easy and sexy access to content, agnostic of device, screen etc.
      • Kill the waterfall! IA->VISUAL->DEV = no good Interface Inventory
  • Much like a content inventory, but more specific
  • pick out, cluster, and inventory the buttons, inputs etc. – this illustrates the differences, similarities, the scope of the current interface situation
  • This helps you gauge LOE on a redesign!
  • Document your interface
  • Promote consistency
  • Establish which elements will be challenging to translate into RWD
  • lays groundwork for future style guide/pattern library
  • Evernote for Interface Inventories – Aaron Gustafson

Establish Direction

  • before too long, you can design for the content structure you KNOW will exist
  • use of style tiles for visual direction – more specific than a mood board, but not getting too far down into the weeds
  • use of Typecast for brainstorming and playing with potential typographic treatments

Rolling up your sleeves

  • build out basic patterns based on design sketches
  • moving into element collages (still not full comps)
  • often start with header and footer
  • often end up with odd states.. ie a finished header and footer but very rough main content well – this requires frequent communication with client so they know how the process is flowing
  • A traditional comp might not happen until nearly the end of design process …and might be a coded comp vs a photoshop comp

Responsive Patterns

  • he collected design patterns, in b&w & very barebones. (thisisresponsive.com)
    created to avoid re-explaining patterns again and again Layout

Grids

  • Which grid system should i use? (he doesn’t care 😉
  • Css tricks.com don’t overthink it grids
  • Future of CSS Layout
  • Grid Layout
  • Flexbox (see solvedbyflexbox.com)

Media Queries

  • avoid desktop-first styles (don’t set defaults only to have to overwrite them!)
  • mobile first styles start from the perspective of small (using min-width vs max-width)
  • the absence of support for media queries is in fact the first media query. – Bryan Rieger
  • Let CONTENT, not screen size, determine breakpoints
  • Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! – stephen hay
  • HAY mode in Ish (in hay’s honor)
  • use of EMs in media queries – no longer a strict best practice, but a matter of preference
  • Still recommend using relative units (he has no pixel values in his styles)
  • Use major AND minor breakpoints (minor being a component level breakpoint or page level breakpoint)
  • don’t overdo it
  • ??? about localization and media query usage (german text is longer….)
  • option 1: use the longest localization by default (his recommendation)
  • option 2: apply a differentiator (addl class on the body tag etc.) and add/modify german specific styles Multi-Device Layout Patterns

Mostly Fluid patterns

  • The Column Drop
  • be careful that the stuff in the sidebars isn’t necessarily related to the main content (due to content hierarchy concerns)
  • The Layout Shifter (brad voids these if possible, preferring simplicity)
  • ie a complex, unique layout that really changes across breakpoints
  • Tiny Tweaks – ie very little changes..
  • minor font size or margin changes
  • The Off Canvas (jason weaver – jasonweaver.name/lab/offcampus)
  • stuff hangs out off screen until needed
  • Content Choreography
  • content folding (ie folding ads in between articles)
  • could use flexbox (jordanm.co.uk/lab/content)
  • could use AppendAround: a responsive Markup Pattern
  • from Filament Group
  • Don’t use this all the time, but it could help solve certain issues

Layout considerations

  • When users scroll on mobile we are moving backward through time
  • moving through a list
  • deep dive into content
  • All these instances are scrolling through a singular content type
  • don’t mix up your content types when you put stuff into a single column with RWD.

Conditional loading:

  • given the % of sites that push the same heavy content to mobile as desktop…
  • Aggressive enhancement (nice term)
  • The Thing (a) beside and above NOT The Thing
  • Instead, include links to the “not the thing”s by fragmenting out that content
  • put these fragments behind a lazy load and a user opt-in (via accordion for example)
  • old browsers treat as links to different pages
  • newer stuff fetches via ajax and drops it into the expanded module
  • Larger format views display the whole thing by default
  • (24ways.org/2011/conditional loading for responsive designs)
  • Boston Globe does this with their weather widget
  • either drives to a different page OR
  • displays inline via async call How to do this?
  • Matchmedia.js (has polyfills too)
  • enquire.js
  • Conditional CSS (adactio)
  • Progressive disclosure as a term http://en.wikipedia.org/wiki/Progressive_disclosure
  • Scanability vs capability is a balance
  • It’s ok for different users to get a different experience as long as functionality remains accessible
  • Screen size is just ONE variable.. (touch capability, etc. are others)
  • Large screens do not always mean fast connection !!
  • you can generalize somewhat
  • you can TRY to detect bandwidth but it’s complex
  • things like Boomerang test bandwidth by pinging all the time (hard on batteries ouch)
  • Just design a fast experience!
  • be mindful of the # of http requests
  • look into server-side optimization

RESS ala Responsive Design + Server Side Components

  • lukew.com ‘s article
  • described as a scalpel
  • if on a mobile device, don’t load (this annoying thing)
  • if on desktop, DO load (this crazy thing)

Touch (ala accommodate for meat sticks)

  • hybrid devices make things complex (windows tablets, Chrome Pixel, etc.)
  • assumptions around touch targets, margins must be questioned
  • keep everything touch friendly by default
  • same issues on phablets (save for tests for touch etc.) Touch considerations
  • don’t rely on hover states (don’t put important stuff there)
  • if the info isn’t important, defer it (ie to a product detail page)
  • or have it toggle display via touch.. BUT
  • touch implies intent, so you can run into trouble here
  • touch to toggle content is anticlimactic if users were trying to DO or GET something vs just exposing content
  • Patrick Lauky – good source for touch related experimentation
  • Look for opportunities to provide enhancements for touch devices, such as swipe gestures
  • but be careful. careless touch input can result in unwanted effects or false positives.

Navigation

  • Navigation should be like a good friend… there when you need them, but cool enough to give you your space.
  • don’t make users scroll through lots of nav to get to content Tactics
  • Do nothing (leave nav as is)
  • doesn’t scale for larger navigations
  • Footer Anchor
  • nav clicks drive user to footer via named anchor (no js used)
  • somewhat disorienting (might be a good baseline pattern to be enhanced further)
  • The Select Menu (ie. the drop down menu)
  • good for non-primary navigation
  • The Toggle (the current go to best practice)
  • Content slides down and exposes navigation
  • elegant
  • keeps users in place
  • relies on javascript
  • The overlay (variation on the Toggle)
  • does not drop content down
  • unwanted link navigation on older devices (ie click goes to lower stacked element anchors)
  • unwieldy (he tries to keep things on one plane)
  • The nav flyout
  • pro & con: Able to display LOTS of nav items
  • the go to for content-heavy sites
  • consider content inventory/strategy if you’re having to deal with a super long flyout menu
  • The Priority + considerations approach
  • Partial exposure of nav based on priority, with ‘…more’ link to expose the entire nav
  • not a fan, but considers it worth exploring
  • The HIDE and CRY
  • no nav on mobile (ack) that comes close to desktop experience
  • muy mal “mobile users don’t do/need that…” Complex Navigation
  • The Multi-Toggle
  • ie. nested accordions ad infinitum
  • behavior variations with touch devices.. (primary nav no longer can drive to a page, but must expand the subnav as only choice)
  • Solution: add another item “all x products” effectively acts as the click through for touch that desktop had.
  • Right to Left (nav panes slide left or right based on clicking nav arrows in nav)
  • follows nav convention of drilling in/out
  • right = deeper, left = shallower
  • sony did this, but is no longer using it
  • Skip the Subnav
  • on small screens, just drive to the nav item’s landing page and then expose the sub navigation
  • the main downside (but not a huge one) is you are forcing a full page refresh to get to desired destination

Navigation considerations

  • Find the balance between nav access and obtrusiveness
  • Test!
  • Be explicit about the nav icon (as much as you can)

IMAGES

  • avg 1.78mb page load —- 1.12mb of that are images. Images are a huge issue.
  • various screen sizes
  • growth of high res screens
  • varying bandwidth
  • need for art direction ie diff crops, etc.

background images

  • these work as advertised, ie they behave properly in media queries
  • ie multiple backgrounds aren’t downloaded
  • use mobile first background images
  • don’t include large by default, introduce them in a media query block
  • Icons
  • many times they don’t look good on hi-res screens
  • use of ICON fonts is growing, and becoming a best practice
  • IcoMoon – quickly choose or build your own libraries and generate your own iconFont
  • Web Fonts (including Icon fonts) are NOT supported in a couple key browsers
  • Opera MINI – a proxy browser preloaded on many feature phones and smart phones
  • (proxy browsers end up taking very little bandwidth)
  • Older Windows Phone devices don’t support them.
  • Grumpicon converts images or svgs as data
  • can also use png image fallbacks
  • Grunticon output
  • important stuff -> All icons inline in the css as vector svg data urls (better support)
  • all icons inline in the css as PNG data urls
  • All of the icons referenced externally as png images, which are automatically generated from the source SVG and placed in a directory alongside the CSS files

Image Considerations

  • Vectorize all you can
  • use HTML special chars
  • use icon fonts, but with fallbacks (SVG)
  • If you use sprites, consider making a hi res sprite sheet
  • Semantically important images
  • preserve aspect ratio (brucelawson.co.uk preserving aspect ratio)
  • Avoid text as images!!! (duh)
  • Responsive image considerations
  • Ensure content is legible on small screens
  • Larger dimensions, higher compression rate (blog.netvlies.n/design-interactive/retina-revolution/)
  • Looks great on hi res screens and regular screens
  • repainting the canvas is expensive performance wise (affects any fluid image)
  • still doesn’t’ provide art direction (example: obama at car factory – crop needed for mobile view)
  • only make 1 image request per asset
  • load the small image asset by default
  • consider server-side detection
  • WHATEVER you do, make sure it’s easy to swap out. It WILL be deprecated 🙂
  • Art Direction
  • Focal point cropping: – designshack.net/articles/css….
  • HTML5 Picture element is solidifying (finally)
  • uses Jehl’s picture fill as a fallback?:
  • accessible text
  • SizerSoze.org (what is the cost of your non-responsive images?)
  • calculates the savings if you were to use the above solution in your site
  • SRC SET:

    <.img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw", 100vw" alt="a rad wolf" />

  • One beef was that it wasn’t using media queries (at one time)
  • but it’s a nice quick easy way to explain multiple sizes of an image
  • check out Coyier’s article on SrcSet vs Picture element

Video

  • Srcset
  • fitvidsjs.com (by coyier)
  • some sites have good examples how..
  • vimeo, etc
  • embedresposively.com

Maps

  • brad’s adaptive-maps badfrostweb.com/blog/post/adaptive-maps
  • apps hijacking the user’s attempt to browse for a navigation (not a bad thing, actually)
  • using Google’s maps API via a link from the page’s representation of the map
  • if screen scan accommodate the EMBEDDED map, instead just load the embedded map (example, min-width: 700px )

Lightboxes

  • example of a non-scaling pattern on Mashable
  • not all desktop patterns scale to the small screen
  • example of FB’s ‘create event’ dialogue on mobile/vs desktop
  • Conditional Lightbox
  • link to the raw image or chunk of content
  • detect screen size
  • ensure content is legible on small screens
  • if screen is big, inject the lightbox functionality
  • Magnific Popup – free responsive jquery lightbox plugin (also works with Zepto)

Data Tables

  • Table to name/value pairs
  • Table to List
  • Priority Columns (the important data persists, others get pushed into a ‘display more’ collapsed state)
  • Horizontal overflow (locked column approach)
  • Test lots! (some android devices don’t support this)
  • Consider using combinations of these to meet needs
  • Considerations for tables
  • What the data is like matters
  • how closely linked is the data’s display format to its semantic value?

“Modules”
Carousels

  • make sure you actually need one
  • runyon found that the % of folks that make it to panel #2 (of interactive carousels) is less than 5%
  • shouldiuseacarousel.com (rounds up the numbers on usage and effectiveness)
  • cycle through items that are similar (vs disparate item types)
  • only load what you actually need
  • be CLEAR about your carousel’s functionality ( “…” is not enough)
  • suggest more content to users
  • provide gestural hints (content overhang off screen)
  • opera mini; doesn’t support touch events
  • by default, provide fallback navigation (and replace it if touch is supported)
  • Types of Carousels
  • The Reveal (as screen space goes up, they expose more products in the carousel)
  • takes great advantage of larger screens, avoids the ‘stark & empty’ effect

Accordions

  • Tabs to Accordian: codepen.io/sturobson/full/xgfel (converts tabs to an accordian)
  • Accordion to Full: each section/subsection becomes an accordion section (ie collapses)
  • when there’s enough room, it displays in full

Forms

  • Label alignment shifts (top labels for small screens, left for full screen)
  • he prefers keeping them in the same place
  • Float Label – animated floated label that kicks in when default text is overwritten by user input
  • Float Label Form Interaction on Dribble
  • Internal labels: pros and cons
  • the field itself becomes a button/field.
  • saves lots of vert real estate
  • not so good accessibility
  • you lose field context when you enter text (since you’re overwriting)

Form Considerations

  • subtract as much as possible
  • use proper input types
  • chunk stuff up (multiple input phases allowing users to save progress (ie 1/4… 2 of 4, etc.))
  • use input types (number, email, url, tel) – this is the lowest hanging fruit here
  • they all fall back to text if not supported
  • Provide hinting
  • be careful with inline labels
  • validation but not too aggressive
  • Opting out of RWD
  • css-tricks.com/user-opt-out-responsive design
  • don’t use fixed positioning
  • very buggy on older browsers
  • just really goofy
  • burns up valuable real estate
  • Position: Fixed considerations
  • If it must be used, fixed headers are more reliable as they degrade more gracefully
  • avoid JS solutions
  • be mindful of orientation change. use media queries to disable fixed for landscape orientation
  • conditionally introduce fixed positioning when screen space becomes available

Development

  • Viewport metatag – tells browser to ignore its zoomed out state
  • viewport in CSS
  • @0webkit0-viewport {width: device-width} — etc.
  • don’t disable the user’s ability to pinch and zoom
  • only introduce the viewport meta tag when you’re sure the content is mobile-optimized
  • CSS
  • Border:
  • SASS
  • plain css is inefficient
  • nesting is awesome in SASS
  • variables are amazing
  • putting media queries into SASS vars is a fav of his
  • Nesting media queries
  • changed his life forever
  • .module { margin: 0 0 1em; padding: 1em; @media all and (min-width: 50em) { float: left; width: 50%; }
  • Getting Sass to help with legacy IE -> nicolasgallagher.com
  • respond.js by Scott Jehl

Device Support

  • what should i support?
  • iOS
  • Android
  • repulsive yet relevant
  • ie mobile, blackberry, silk, nokia etc.
  • There is a difference between SUPPORT and OPTIMIZATION – focus on accessibility
  • Redux: Ubiquity
  • our responsibility to make content accessible across the world, across economic and social spectrum

Testing

  • remote testing tools (browserstack)
  • viewport resizing tools
  • Test on actual devices
  • truly test a design’s performance
  • Device capabilities
  • Form factor
  • Pixel Density
  • Impact of the network
  • Device Criteria
  • your traffic, form factors etc. budget
  • test w/o breaking the bank – brad’s post from bradfrostweb.com
  • OpenDeviceLab.com