An Overview of Render Props in React

An Overview of Render Props in React

Using render props in React is a technique for efficiently re-using code. According to the React documentation, “a component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.” To understand what that means, let’s take a look at the render props pattern and then apply it to a couple of light examples.

The render props pattern

In working with render props, you pass a render function to a component that, in turn, returns a React element. This render function is defined by another component, and the receiving component shares what is passed through the render function.

This is what this looks like:

class BaseComponent extends Component { render() { return <Fragment>{this.props.render()}</Fragment>; }
}

Imagine, if you will, that our App is a gift box where App itself is the bow on top. If the box is the component we are creating and we open it, we’ll expose the props, states, functions and methods needed to make the component work once it’s called by render().

The render function of a component normally has all the JSX and such that form the DOM for that component. Instead, this component has a render function, this.props.render(), that will display a component that gets passed in via props.

Example: Creating a counter

See the Pen React Render Props by Kingsley Silas Chijioke (@kinsomicrote) on CodePen.

Let’s make a simple counter example that increases and decreases a value depending on the button that is clicked.

First, we start by creating a component that will be used to wrap the initial state, methods and rendering. Creatively, we’ll call this Wrapper:

class Wrapper extends Component { state = { count: 0 }; // Increase count increment = () => { const { count } = this.state; return this.setState({ count: count + 1 }); }; // Decrease count decrement = () => { const { count } = this.state; return this.setState({ count: count - 1 }); }; render() { const { count } = this.state; return ( 
{this.props.render({ increment: this.increment, decrement: this.decrement, count: count })}
); } }

In the Wrapper component, we specify the methods and state what gets exposed to the wrapped component. For this example, we need the increment and decrement methods. We have our default count set as 0. The logic is to either increment or decrement count depending on the method that is triggered, starting with a zero value.

If you take a look at the return() method, you’ll see that we are making use of this.props.render(). It is through this function that we pass methods and state from the Wrapper component so that the component that is being wrapped by it will make use of it.

To use it for our App component, the component will look like this:

class App extends React.Component { render() { return ( <Wrapper render={({ increment, decrement, count }) => ( 

Render Props Counter

{count}

</div> )} /> ); } }

Example: Creating a data list

The gain lies in the reusable power of render props, let’s create a component that can be used to handle a list of data which is obtainable from an API.

See the Pen React Render Props 2 by Kingsley Silas Chijioke (@kinsomicrote) on CodePen.

What do we want from the wrapper component this time? We want to pass the source link for the data we want to render to it, then make a GET request to obtain the data. When the data is obtained we then set it as the new state of the component and render it for display.

class Wrapper extends React.Component { state = { isLoading: true, error: null, list: [] }; fetchData() { axios.get(this.props.link) .then((response) => { this.setState({ list: response.data, isLoading: false }); }) .catch(error => this.setState({ error, isLoading: false })); } componentDidMount() { this.setState({ isLoading: true }, this.fetchData); } render() { return this.props.render(this.state); }
}

The data link will be passed as props to the Wrapper component. When we get the response from the server, we update list using what is returned from the server. The request is made to the server after the component mounts.

Here is how the Wrapper gets used:

class App extends React.Component { render() { return ( <Wrapper link="https://jsonplaceholder.typicode.com/users" render={({ list, isLoading, error }) => ( 

Random Users

{error ?

{error.message}

: null} {isLoading ? (

Loading...

) : (
    {list.map(user =>
  • {user.name}
  • )}
)}
)} /> ); } }

You can see that we pass the link as a prop, then we use ES6 de-structuring to get the state of the Wrapper component which is then rendered. The first time the component loads, we display loading text, which is replaced by the list of items once we get a response and data from the server.

The App component here is a class component since it does not manage state. We can transform it into a functional stateless component.

const App = () => { return ( <Wrapper link="https://jsonplaceholder.typicode.com/users" render={({ list, isLoading, error }) => ( 

Random Users

{error ?

{error.message}

: null} {isLoading ? (

Loading...

) : (
    {list.map(user =>
  • {user.name}
  • )}
)}
)} /> ); }

That’s a wrap!

People often compare render props with higher-order components. If you want to go down that path, I suggest you check out this post as well as this insightful talk on the topic by Michael Jackson.

The post An Overview of Render Props in React appeared first on CSS-Tricks.

5 Ways to Communicate With Non-Visual Thinkers

Many, if not most designers will at some point encounter this scenario: they’ve just completed a digital wire-frame for a new project, with a new client. They’ve thought long and hard about the placement of everything, and they’re ready for feedback. They figure it’ll be a short conversation, just enough time for the client to say, “Yeah, that looks fine. Can’t wait to see it with the details filled in!”

The client will take a moment to think, their thoughts briefly visible on their face, and the designer will get nervous. After a minute or so, the client will look up and say, “It looks good…but I’m just not sure about all of those gray boxes.”

Even if they’ve been educated about the use of wireframes, some will still ask, “But you’re going to change the gray boxes, right?” Simply put, assuming that others think like we do is one of the silliest mistakes a designer can make, and we all make it at least once. As designers, even if we don’t start out as visual thinkers, we often end up as visual thinkers after some training.

That may not be so for your clients. For example:

  • Some think in words;
  • Some think in vague impressions and emotions;
  • Others think in pictures, but the images are “blurry”;
  • Some people think primarily in numbers;
  • And then there are spatial thinkers, for whom thoughts are related to each other by a sense of “distance”.

All of these metaphors are imperfect, but serve to highlight the different ways people can think. In fact, people are often on a scale, using one form of thinking or another depending on what they’re thinking about. As a designer, you’re going to have to deal with all of them.

1. Embrace the Differences

Realizing other people don’t think like you is hard, and often involves a rude awakening. It’s like accidentally seeing a roommate naked. It’s uncomfortable, and everyone wishes things were not as they are; but you just have to get on with your life, now.

It’s best if you simply accept that you saw them naked. Holding on to that feeling of awkwardness will lead to difficult communication later. Likewise, you should accept that clients often have a very different idea of what it means to think. Embrace the fact that they see things differently. Realize that their thought processes may yield insights you never dreamed possible. If you go on while feeling as though interacting with them is a chore, they will probably notice; and they will not like it.

On the other hand, nothing smooths over the bumps in a conversation like an open-minded attitude.

2. Build Trust

Building trust with a client is always necessary, but especially helpful when communication is difficult to begin with. When they trust you to do good work for them, they’re less likely to interfere with the smooth running of the project, and provide more constructive feedback.

A number thinker might appreciate hearing some metrics from a previous project. Give them those sweet, sweet percentage values. A verbal thinker is likely going to appreciate written success stories. Throw some number-based metrics into the story for good measure, and you can see why a lot of websites already use this technique.

For the more emotion-thinking clients, however, the best way to build trust is probably just to befriend them as best you can in the limited time you have available. To do this, you might need to make a special effort to listen a lot more closely to the tone of what they say, rather than their actual words. Emotional thinkers often have trouble communicating effectively with pretty much everyone, so making that effort will go a long way toward building trust.

3. Use High-Definition Mockups

Remember back in the day when it was more or less expected that every mockup would be a high-definition mockup? At least, that’s how it felt to me when starting out. I didn’t even know what wireframes were when I started.

Well, for some clients, you may need to go back to the old ways, as it was when web designers roamed the plains, searching for stray DHTML they could copy. Most people, even if not visual thinkers, can sort of visualize things when they put their minds to it. Others have little to no capacity to imagine things visually whatsoever.

For these people, you might have to show them old-fashioned PSD-style high-definition mockups before you’ll get any useful feedback. And they might ask for more than one concept. If you find yourself in this situation, I recommend either charging more, or using UI kits to speed up production.

4. Use Flow Charts

Flow charts are useful ways to organize information (such as site maps) in any case; but can be an especially useful way to convey concepts to spatial thinkers. After all, the whole format is about using spacing for organizational purposes.

That’s really all I’ve got, here; the flow chart is a fairly simple concept.

5. Present Your Work

Don’t wait for your clients to ask you why you made individual design decisions. When you have something to show them, find the time to talk them through everything you’ve done and/or changed, or write it down. Sometimes, just knowing that you have a coherent reason for the things you do is enough to get sign-off.

Even if there are changes to be made, hearing you express your reasoning may give them the information they need to communicate their priorities properly. Basically, the more both parties know, the better.

That last bit right there…that’s the point.

 

Featured image via DepositPhotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Inclusive Design For Accessible Presentations

Inclusive Design For Accessible Presentations

Inclusive Design For Accessible Presentations

Allison Ravenhall

To all the presenters of conferences, workshops, and meetups: I truly enjoy hearing your anecdotes and learning things from you. I like laughing at your jokes, especially the puns. Unfortunately, some people in your audience aren’t getting as much out of your session as me. They may not be able to see your slides, or hear you speak, or make out the details on the screen.

A few tweaks will make your presentation more inclusive. Here are some tips so next time you’re on stage, everyone in the crowd can laugh at your bad jokes.

1. Create Accessible Slides

Make Your Text Big. No, Bigger.

The back row of your presentation room is a long way from the projector screen. It’s much further than the distance between you and your laptop screen as you create your slides.

Small text in the middle of a large slide
Small text in the middle of a large slide. (Large preview)

People up the back will appreciate every extra pixel you add to your font size. People with vision impairments will appreciate the larger text too — they’ve got a better chance of being able to read it.

Go big or go home. This goes for all text, even “less important” stuff like data labels, graph axes and legends, image captions, footnotes, URLs, and references.

Is Your Slide Font Readable?

I love fonts; they can really set the tone of a talk. However, before you jump into the craziest corners of Google Fonts, think of your audience members with reading difficulties. Using handwriting or script fonts, particularly ones whose letters link together, makes text much harder to read. Using uppercase reduces scannability by removing ascenders and descenders, as well as being shouty.

There’s more scope to experiment with fonts on slides than web pages due to the larger text size, but here are some best practices:

  • Sans serif is typically the most readable.
  • Be generous with spacing (between letters, words, and lines).
  • Use bold for emphasis — underline and italic change the letter shapes, making them less identifiable.
  • Use mixed case, not all caps.

(Reference: British Dyslexia Association Style Guide 2018)

Does It Make Sense In Greyscale?

Do a print preview of your slides in black and white. Does it all still make sense without the color? If you send out your slides post-talk, some people may not have access to a color printer.

There’s also a good chance that someone at your talk is color-blind. If you’ve used red text for negative items and green text for positive items mixed together in a single list, they may not be able to tell them apart. If the datasets in your graphs only use color to differentiate, think about using patterns or labels to tell each bar, line or pie segment apart.

Don’t rely on color only to tell your story — enhance color with labels, icons, or other visual markers.

Recommended reading: Getting Started In Public Speaking

It’s A Slide, Not A Novel

Every time a new slide goes up, you lose the crowd while they scan the new content. If the slide is full of text, it’s going to take a long time for their attention to come back to what you’re saying.

People with attention deficiencies will struggle to read your slides and listen to what you’re saying at the same time. Audience members with reading difficulties may not finish reading text-heavy slides before you move on, and never mind what you said while they were concentrating on the screen.

Slides aren’t speaker notes. If you need prompts, write up some cards or use your slide program’s notes function. Use keywords and short phrases in your slides, not whole sentences or paragraphs, to share the essential ideas of your talk. Write and refer to a long-form companion piece if you want to share loads of detail that doesn’t translate well to slides.

Animated Slide Transitions? Really?

My high-school self-loved slide transitions — the zanier, the better. Look, my slide is swirling down a plughole! It’s swinging back and forth like a leaf on the breeze! Fades, swipes, shutters, I was all for it.

Microsoft PowerPoint contains 48 (!) animated slide transition options
Microsoft PowerPoint contains 48 (!) animated slide transition options. (Large preview)

I have since discovered that slide transitions are overrated. More seriously, they can make the audience feel sick. Slide transitions and other animation such as parallax scrolling can trigger nausea, headaches and dizziness in people with vestibular (inner ear) disorders.

Make your audience groan with your punny jokes, not because they feel ill.

Readability Applies To Slide Text, Too

If you’re presenting, you probably know a decent amount about your topic. You likely use specialist words and phrases and assume a minimum level of audience knowledge.

Be mindful of using jargon and acronyms, even if you think they’re well-known. Explain them, don’t assume everyone knows them. Better still, use plain language for everything.

Don’t mistake using simpler words and shorter phrases for “dumbing it down”. Slides are for clear and concise ideas, not showing off your vocabulary. Save your fancy words for your next crossword puzzle.

GIFs Aren’t Always Funny

Animated GIFs are used in lots of presentations — usually as a killer quip or a laugh out loud punchline. They’re an easy way to add fun to dry tech talks but use with care — and I’m not talking about your bad sense of humor.

If the GIF content strobes or flashes rapidly, it may trigger seizures in people with photosensitive epilepsy. It’s happened: in 2016, disgruntled Trump supporters caused a Newsweek writer with epilepsy to have a seizure by deliberately tweeting flashing images to him.

While a GIF is looping on the screen, I’m half-listening to the presenter at best. It’s so distracting. If there’s an animation on screen while you relate an anecdote, I’m going to miss the story.

When you create an animated GIF, you can configure the number of times it loops. This is a good compromise — have some fun with your audience, then they can focus on what you’re saying without distraction.

How Good Is Your Color Contrast?

The word 'Binary' on the bottom-left of this slide is presented in a large, readable font, but the color contrast is very poor.
The word ‘Binary’ on the bottom-left of this slide is presented in a large, readable font, but the color contrast is very poor. (Large preview)

There are recommended color contrast values for text on the web. The idea is to ensure text is visible even if you have a vision impairment or color-blindness.

Color contrast is important for slide content too. You probably won’t have much control over the environment, so it’s a good idea to use color combinations that go beyond recommended contrast ratios. I guarantee it won’t look as clear on the projector as it does on your computer.

Don’t be subtle with your color palette. Use bold colors that make your text stand out clearly from the background. Be careful about laying text over images — do it, just make sure the contrast is good. Use a color contrast checker and aim for a ratio of at least 4.5 : 1.

(Before you flame me about the big text minimum ratio being 3 : 1 for WCAG 2.0 AA, I figure it’s big up close, but it’s smaller from the audience’s perspective. They’re not likely to complain that it’s too high contrast, are they?)

If you know the setup in advance, light-colored text on a dark background is more audience-friendly in a darkened room; a white background can be dazzling. Some people have even resorted to wearing sunglasses when they were blinded by too much glare!

Enable Your Audience To Follow Along

If you plan to share your slides or you have complementary materials, include links to these on your first slide, and mention it in your intro. This enables your audience to follow along or adapt the presentation on their own devices. People with low vision can zoom in on visual content, and blind audience members can follow along on Braille displays or with a screen reader and earbuds.

Keep Your Links Short

If there’s a web link in your slide, there are two reasons to keep it as short as possible:

  • Readability: Long URLs will wrap onto multiple lines, which is hard to read.
  • Say-ability: You should say your URL out loud for people who can’t see the screen. A long URL is very hard to say correctly, particularly if it contains strings of random characters. It’s also very hard for listeners to understand and record in real time.

Use a URL shortener to create short links that point to the destination. If you can, maximize readability by customizing the short link to contain related word or two rather than a random string.

Does Your Presentation Contain Multimedia?

Video and audio clips are a great way of presenting events, interviews, and edited content that doesn’t work in real time.

If you’re playing video, think about audience members who can’t see the screen — is the audio descriptive enough by itself? Can a blind or low-vision person get a sense of what’s going on, or who’s speaking, purely from the soundtrack? You may need to introduce or summarise the vision yourself to add context.

If your video has an audio track or you’re playing a separate sound clip, are the visuals enough for someone who is deaf or hard of hearing? You should provide captions of decent size and contrast. Given an audio clip doesn’t have a visual component, you could display equivalent text or graphics while the audio is playing.

Don’t Put The Punchline At The Bottom Of Your Slide

This is more of a general usability tip. Don’t bottom-align slide text unless you know that the bottom of the screen is located well above the audience, or the audience seating is tiered. If the bottom of the projector screen is at or below the audiences’ head-height, and the floor is flat, people seated beyond the first few rows will likely not see what you wrote at the bottom of the slide.

Recommended reading: How To Transform Your Next Conference Takeaways Into Real-Life Results

2. Presenting Tips

Have A Clear Beginning, Middle, And End

It can be tempting to structure your talk towards a big reveal. This is a great device for building interest, but you run the risk of losing people with attention deficit disorders. More generally, if you find yourself running out of time, you may have to rush or cut short your final grand flourish!

Set expectations upfront. Start with a quick “Today I’ll be covering…” statement. You don’t have to give the whole game away, just tantalize the crowd with an outline. They can then decide if they want to commit their brain power to focus on your talk. Let the audience know that it’s OK for them to go if they wish.

Don’t be offended if someone chooses not to stay. They may have a limited capacity for focused thought each day, so a conference of back-to-back presentations and loud breakout spaces is challenging. They must pick and choose what is most useful to them. Hopefully, they’ll come back to your talk if it’s shared later.

Give The Audience Time To Read Your Slides

Complex content like graphs with multiple datasets take time to read and understand. If your slide is a slab of text, your audience will get annoyed if you summarise it and skip onto the next topic before they’ve finished reading.

Consider how much time your audience needs to read and understand each slide, based on the amount and complexity of the content. Remember, they’re seeing it for the first time, and they don’t know as much about the topic as you. Structure your talk so complex slides stay up on the screen long enough to be read completely.

You worked hard on those slides, it’d be a shame if they weren’t appreciated!

Provide Captions And Foreign Language Translation

I’ve attended events that have provided sign language interpreters or live captions to translate or transcribe what the speakers say in real time. They’re invaluable for people who are deaf or hard of hearing. International events may also provide foreign-language translation.

If you present at an event that provides these services, send your slides or speaker notes to the interpreters and captioners in advance. They can then research and practice unfamiliar terms before the day.

Many events don’t provide captioning or translation. They’re beyond the budget of most conferences, being both specialized and labor-intensive. In this case, you can potentially provide your own captions.

MS PowerPoint has a free Presentation Translator plug-in to add real-time captions and foreign language translation. I saw a demo at A11y Camp Sydney last year:

https://platform.twitter.com/widgets.js

Google recently added real-time captioning to its Slides product, too.

Mind Your Language

Your choice of words may be offending or excluding some of your audience, and you may not even know you’re doing it.

Not all people that work in technology are “guys.” When a speaker says “I talked to the guys about it,” I imagine a group of men. If they’d said “I talked to the developers about it,” then my imaginary group also contains women.

There’s also ableist language. Using words like retarded, insane, lame, and crazy incorrectly is degrading to those with mental and physical disorders. What’s a normal user? Are you making assumptions about gender, sexual orientation, race, family unit, technical knowledge, physical or mental abilities, or level of education?

Then there’s swearing, commonly used to get attention or add some spice. Be careful about deploying this weapon. If you’ve misjudged the room, you could put people offside. If you’re traveling, that fairly tame curse word you use at home could be deeply offensive elsewhere.

Stories Aren’t Universal

When I discussed color contrast at A11y Bytes 2017, I moaned about not being able to see my phone screen in bright sunlight. Attempting to relate, I asked “we’ve all been there, right?”, expecting a few nods and smiles.

The retort was lightning-fast: “Can’t say I’ve found it a problem!” Laughter rippled through the crowd as I realized I’d just been heckled by a blind woman. She graciously laughed off my hasty apology.

I still tell my sunlight story, but now I’m mindful that not everyone can relate to it directly. Learn from my mistake, don’t assume your audience has the same abilities and experiences as you.

Interests And Pop Culture References Aren’t Universal Either

My most recent presentations have been about WCAG 2.1, including the need to provide alternatives to motion-based inputs. I use three Nintendo Switch games as examples.

I don’t assume that the audience has used a Switch. I briefly explain the premise of each game and the motion input it uses before I move on to how it relates to the new success criteria. It’s a courtesy to those people who don’t share my interest in the Switch.

Similarly, much as I’d love to do a Star Wars-themed accessibility talk, I won’t because I’d be putting my own amusement ahead of informing my audience. Some people aren’t into Star Wars, just as I’m not a Trekkie or a Whovian. It’d be a shame for them to misunderstand me because they can’t translate my tenuous Star Wars associations — or worse — if they saw the themed talk title and skipped my session altogether.

Have some fun, by all means, include a pop culture reference or two, but don’t structure your entire talk around it. Make it work for someone who hasn’t watched that movie, or heard that band, or read that book, or seen that meme.

A Picture Is Worth A Thousand (Spoken) Words

Photos, graphics and drawings all add interest to your slides. You may have screenshots of a website you’ve built, or photos of people or places you’re talking about.

When your slide imagery is part of the story, remember to describe the pictures for those in the audience that can’t see it. Try not to say “As you can see here…” because someone may not be able to see there.

If you think it’s awkward to quickly rehash a sight gag, think how awkward you’d feel if you were in a room full of people that suddenly all laughed and you didn’t know why.

Slow Down, Breathe.

You’re nervous. You’ve never presented before. You’ve got a time limit and lots to share. You haven’t practiced. Your parents, friends, children, workmates, industry idols, and managers are all in the room.

Whatever the reason, you probably talk faster than usual when you present. This puts pressure on interpreters and captioners, particularly if your talk contains tech-speak. Your audience may struggle to keep up too. Note-takers mash their laptops in vain, live-tweeters’ thumbs cramp up, and sketchnoters leave a trail of half-drawn doodles in their wake. International visitors may get lost figuring out your accent. Cognitively, everyone is thinking furiously to keep up, and it’s hard work!

Practice. Slow down. No one knows your stuff as well as you; give everyone else time to take it in.

Respect The Code Of Conduct And Your Audience

Codes of conduct are found at most public speaking events, such as this one by UX Gatherings. They set the minimum behavior standard for speakers and attendees.

Read the code of conduct for every event you attend — they can differ broadly. Know the no-go zones and don’t go there.

If you are talking about sensitive topics that may upset some of your audience, give them plenty of notice so they can prepare or remove themselves from the discussion. A note in the event program, if possible. A mention on your lead slide, and during your opening remarks. Include contact details of support services if appropriate.

Make Your Code Demonstrations Accessible, Too

Well done if you have mastered the art of the live code demonstration. Few presenters can show off something meaningful that also works while providing a clear commentary.

You know what would take your code demo to the next level? Jacking up the font size. Your usual code editor font size is perfect when you’re sitting at your desk, but it’s not big enough for those sitting in the back row of your presentation.

Check your editor’s color settings too. A pure white background might be startlingly bright in a darkened room. Make sure your editor text colors have good contrast as well.

Don’t Drop The Mic

If there’s a microphone on offer, use it, even if it’s a small space.

Many public conference spaces have an audio induction (hearing) loop connected to their AV systems. The loop transmits the AV output directly to hearing aids and cochlear implants. People who are hard of hearing receive the target audio without background noise.

Recommended reading: Getting The Most Out Of Your Web Conference Experience

3. After The Presentation

Congratulations! You’ve done your talk. There are just a couple more things that’ll round this thing out nicely.

Distribute Accessible Slides

Lots of presenters publish their slides after the talk is done. If this is you, make them accessible! Correct semantics, meaningful read order, ALT text on images, enough color contrast, video captions, limited animation looping, reasonable slide transitions, all the good stuff.

Fill The Gaps With Notes, A Transcript Or An Article

Help people that need more time to take in your talk and need more detail than what’s on your slides. Publish your speaker notes or a companion piece that covers your topic(s). If the event is recorded, ask the organizers to include captions or a transcript (but perhaps don’t rely on YouTube’s auto-captioning).

Conclusion

Applying these tips will make a big difference to your whole audience. Your slide content, design, and how you present can all affect how well the crowd gets your message, if at all. This is particularly true for those with physical and cognitive conditions.

Making subtle changes to what you show and your script will help all attendees, not just those with disabilities, to get the most out of your hard work.

Smashing Editorial (ra, yk, il)
Free Download: Non-Profit UI Kit for Adobe XD

Halting climate change; distributing wealth around the globe; achieving social, racial, sexual, and gender equality; ending violence; there are so many challenges in today’s world. The web can be an incredible vehicle for change, and Adobe are lending a helping hand with an incredible, free UI kit for Adobe XD.

The UI kit has been created by Brooklyn-based designer, Meagan Fisher. Her goal was to help non-profits publish better websites; which in turn helps the non-profits to advocate for their cause more effectively, increasing user engagement and driving donations; which in turn helps the non-profits to help more people.

https://platform.twitter.com/widgets.js

Although the UI Kit uses the example of a charity addressing the food-shortage implications of climate change, the kit would actually work for any fact-based campaign, whether it be gun control, voter empowerment, deforestation, or a youth drop-in centre; no matter what kind of non-profit you’re designing for, this a great starting point.

Because the non-profit sector is so broad, the UI Kit has been designed to be highly versatile. It is a fully prototyped, responsive website design, that employs known best-practices.

Included in the UI Kit are key pages like home, about us, resources, stories, news, events, get involved, and even a carefully crafted donation flow. You’ll find everything you need for a non-profit website, and if there’s anything missing, Adobe XD’s assets panel makes it simple to generate new pages using the existing customizable elements.

The most visually striking thing about the UI Kit is its original color palette. Bucking the trend for hot colors, the UI Kit uses a cool palette of deep, desaturated blue (#354463), and bright, mint green (#C1F7D5). You can change this easily in Adobe XD, but the sophisticated look is both modern, and serious—absolutely appropriate for the task at hand.

The UI kit uses three fonts to convey its message: Flood is a brush script that humanises the text, bringing it back to real people with real problems; Poynter is used for headlines, it’s a media-savvy typeface that works great for newspapers because it has a sense of no-nonsense certainty; Komet is used for the main text, it’s a highly-readable sans-serif with humanist touches.

Even if you’re not currently working for a non-profit, this is a great way to jump into Adobe’s flagship UX project and see what all the fuss is about Adobe XD. If you haven’t tried XD yet, you’re in for a treat. You can download it for free, for Windows, or for Mac. The latest version, released to coincide with October’s MAX conference includes design for voice, and automated artboard transitions.

You can take a closer look at this great free UI Kit on Behance, or download it for free and start creating.

[— This is a sponsored post on behalf of Adobe —]

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

How to Decide Between Being a Web Designer or Developer

At a Crossroads

Way back in 2005, when I first started to get interested in learning to code, I remember being confused about something: Was I training to be a web designer or a web developer?

Being a web designer sounded ideal: I’d get to create beautiful things for the internet, and use up all my creative juices on typography pairings, color schemes, and giving websites that certain je ne sais quois. At the same time, though, I worried I wouldn’t have what it takes to be a web designer. With no history in graphic design, or any design training at all, I wondered who would ever trust me with the aesthetics of their site.

And when I thought about web development, I though: “This is what I should want to do. I’ll make a ton of money and have all the power in the world to build awesome websites and web apps. But what if it’s boring?”

But as I learned HTML and CSS, met more designers and developers, and started working on my own freelance websites, I realized that I had it all wrong. It’s not that you don’t have to make a choice between web design and development. Really, the issue is that my idea of the differences between web design and web development were pretty off the mark. This is the blog post I wish I could have read when I first dipped my toe in the technical waters.

In this post, you’re going to get:

  • A rundown of the biggest myths about web designers and web developers, so you can make an informed decision about which path is right for you,
  • A comprehensive infographic breaking down EXACTLY what skills and tools web designers and developers use,
  • A breakdown of the basic skills ALL techies need,
  • A framework for figuring out which path fits your personality best,

But before I dive in, I want to let the cat out of the bag. The truth is, it doesn’t matter one iota whether you choose to start out in web design or web development! Getting digital skills will position you to make more money and have some of the most in-demand skills out there, regardless of whether they fall into the category of web design or web development.

This guide is based on general personality characteristics and a synopses of day-to-day tasks. If some of it seems oversimplified, that’s because I want to make it super simple for you to make a decision. In reality? There is a TON of overlap between web designers and web developers, and there’s no right or wrong starting point!

Step 1: Dispel the Myths

Before you can make any decisions about what kind of tech career you want, you need to make sure you know exactly what web designers and developers do.

If you’re like me, you’ve probably been socialized to define “web designer” and “web developer” in ways that don’t represent what it’s actually like to be one, and you’ve never even talked to a real-life web designer or developer.

My biggest misconceptions about designers and developers had to do with how much money they make, how steep the learning curve is, and what kind of work they actually do. I mistakenly believed the myths that:

LEARNING TO BE A PROGRAMMER IS HARDER THAN LEARNING TO BE A DESIGNER (OR THE OTHER WAY AROUND).

Some assume that because development involves higher level programming, it will be harder to learn than design. Others see design as more difficult because they think that it requires more innate (rather than learned) creativity.

In fact, when you’re starting from scratch, any new skill is a challenge. Web development and web design aren’t inherently more or less challenging—your strengths and weaknesses will dictate which is the path of least resistance for you.

DEVELOPERS MAKE FAR AND AWAY MORE $$$.

If you look at average salaries, it does appear at first glance that web developers make far more money than web designers:

  • Web designer: $66,000
  • Web developer: $87,000

*Indeed salary search for the US.

But if you start searching more specific areas of web design, you’ll see that the salaries are competitive:

  • Interaction designer: $93,000
  • Mobile designer: $92,000
  • User Experience designer: $92,000

*Indeed salary search for the US.

It’s true that on average, developers make more money, but as a beginner this isn’t something you’ll have to worry about. Whether you start learning web development or web design, you probably won’t be a senior full-stack developer (and make the very top salary) within a few months, since that usually requires several years of experience.

And besides, web designers make plenty of money. Since both are lucrative options, it’s better to choose what will make you happier rather than what you think will pay more.

WEB DESIGNERS DON’T CODE.

On the contrary, web designers write HTML and CSS code. And some (!) even use a CSS preprocessor like Sass or LESS and write JavaScript. For example, say they need a smooth scrolling site—some designers (we call them unicorns!) can code it up themselves.

Now, there are some designers out there who don’t code, particularly print designers and some digital graphic designers, but most WEB designers can turn their designs into working prototypes using HTML and CSS. The best way to make good money AND be able to deliver what clients and employers want most, is to be a whole package of designing and coding magic.

Web designers who can code, especially those that have next-level skills like Sass and JavaScript, are in HUGE demand. We call them unicorns.

But I’m getting ahead of myself. You need to know what designers and developers actually DO all day!

Step 2: Figure out exactly what designers and developers do.

Now that you’ve gotten some of the myths cleared up, you need to know how designers and developers actually spend their time.

The first thing to note is that both designers and developers can build a site from scratch. Designers lean more towards the careful planning, and developers are stronger in implementing designs, BUT they can both build a fully functional site.

Web designers and developers both code on a regular basis. On a team, designers and developers work together, with designers focusing on user experience design and planning and developers focusing on code.

If that still sounds a little vague, check out this handy (and pretty!) infographic and see the exact skills and tools designers and developers use:

Step 3: Analyze yourself.

Now that you are well informed about the true differences between web design and web development, you need to figure out which one fits YOU. And if you’re looking at those descriptions and thinking, “I could do any one of these!” that’s okay. These simplified descriptions of the general characteristics of web designers and developers should help:

WEB DESIGNERS

Web designers tend to experience the world in a visual way. For example, when giving you directions, they might tell you to turn right when you see the big tree.

Web designers also tend to rely on intuition and feeling, since they spend a lot of time developing the look and feel of websites. For example, if you asked them to write a word in the center of a page, they would probably eyeball it.

Web designers love to come up with big ideas and imagine the whole picture. For example, if a web designer were building a theme park, they would love to focus first on the overall “vibe” of the theme park, the layout, and the way a visitor would experience it, before getting into details like the colors, shapes, and names of the rides.

WEB DEVELOPERS

Web developers tend to approach the world from a logical, scientific standpoint. If they were lost, rather than looking for a familiar landmark to guide them, they might look up at the stars or drop a GPS pin.

Web developers also tend to see the world as a vast collection of data that can be used for different purposes. If you asked a web developer to write a word in the center of a page, they would look for a tool to measure it in the quickest, most efficient way, maybe by folding the paper evenly into 4 squares or grabbing a ruler.

Web developers like to handle big projects by taking them one step at a time and paying close attention to the details. If a web developer were building a theme park, she would love working on the details of the physics of the rides and the number of visitors the park could accommodate, and she’d work through them one small step at a time.

And unicorns? Well they’re a unique combination of both!

And remember, it really doesn’t matter how you start learning tech skills, or what path you take. It only matters that you learn tech skills. As soon as you learn those basic skills that both web designers and developers need, like HTML and CSS, you’ll be that much closer to uncovering the tech career that will be perfect for you.

Sure-Fire Ways to Get More Site Traffic Without Spending Money

Get Noticed

Getting noticed online can be tough for small businesses, who don’t have the huge marketing budgets of large corporations. However, it is possible to boost traffic to your site without spending a penny on advertising.

Let’s take a look at some of the best ways of getting free traffic, including content marketing, search engine optimization (SEO), email and social media marketing.

Optimize Your Website

The first place to start is with your website itself. The design of your website, as well as the content that it displays, can affect how highly it ranks in search engine results pages. Here are a few basic tips for improving your site’s visibility to searchers.

Using relevant keywords on a web page is the best way to get it to show up in search engine results pages. Choose a main keyword that each page will target. Include the keyword as naturally as possible several times throughout the page, without overdoing it.

Your main keyword might be a single word, such as “flowers,” or a longer phrase, such as “bouquets for Valentine’s day”. Longer keywords are useful for brands that are just starting out with online marketing because they face less competition from other sites.

Include your main keyword for each page in the HTML title tag.

If your business is local to a particular area, then including the name of that town, city or region in your keywords can help to bring in local traffic. For example, you could target the key phrase “web design in Winnipeg” to bring in local search traffic.

Although images, videos and Java applets are appealing to visitors, they are often ignored by search engines. Always include a text description beside a video or applet, and assign a keyword-rich alt text description to images using HTML attributes.

Keep your URLs short and relevant to the page they point to. For example, if your site contains a blog, then the URL for each post should contain keywords from the title of the post, rather than the date of the post or a random string of letters and numbers. Both humans and search engines should be able to get an idea of what a page is about simply by looking at the URL.

Build a Content Strategy

As well as making your site appealing to search engines, you also have to make it a place that people want to visit. Updating your site regularly with content that informs, educates or entertains readers will improve your appeal.

Including a blog as a part of your site is a good way to handle the need to consistently add new content.

Even if you’ve never tried to run a blog and you are not certain about your writing skills, don’t let this put you off! It’s not that hard to run a blog. The most important thing before you start, is to carefully plan the content that you’re about to create.

You should also always keep your audience in mind while writing every single post.

Engage with Your Audience

Once you have created engaging content, you need a way to share it with a wide audience. Social media provides the perfect platform for doing just that, so your next step is to set up profiles on the social networks that your target audience mostly hangs out on.

These networks will probably include Facebook and Twitter. If you are targeting professionals, then LinkedIn is also a good choice, whereas YouTube and Pinterest are useful if you are planning to share a lot of visual content.

It is worth spending a little time getting your profile set up in each case. Include a link to your website, a cover photo that clearly represents your brand, and some keyword-rich information about your business. Including this information makes it easier for people interested in your brand or niche to find you.

Once you have set up social media profiles, use them! Add links to your social media profiles to your website so that people can easily connect with you, and post regular updates to keep them engaged. Facebook in particular is the perfect place to share the high-quality content you are adding to your blog.

Remember to interact with users who connect with you by quickly responding to any tweets or messages that they send to your account.

Beyond taking advantage of the standard social platforms, you may find a good deal of success interacting with even more targeted audiences. A great way to connect with people (and potential visitors for your site) is to engage in forums that are directly related to your market. These communities will know exactly what your target market wants because they are your target market.

Be friendly, be interactive, be open to feedback and you will gain a lot from these connections.

Stay In Touch with Your Visitors

In order to keep people coming back to your site once they have discovered it, you can encourage them to join your mailing list. Consider asking visitors to subscribe to your list by using a pop-up window that they can put their email address into.

Sometimes offering a free gift, such as an ebook, can encourage people to subscribe.

Once you have built a mailing list, send out newsletters regularly to keep your potential customers interested. Remember to keep your newsletter content relevant to your brand or area of business.

Ask yourself what your subscribers want to know and focus on delivering content that is both useful and interesting to them.

In Conclusion

As you can see, there are a number of ways to drive traffic to your website without spending a fortune.

Through constant search engine optimization of your website, including content marketing, will keep your information up to date and will show up through web searches, leading users to your page.

Social media is also a free, and fairly simple, way to announce and cultivate your brand. The culmination of these efforts is retaining those who have already showed an interest in your company through email marketing.

After they’ve already checked out your site, encourage them to stay up to date through a mailing list that will be sent directly into their inbox.

With all of these free choices and tools available, you can easily drive traffic without dropping a dime!

5 Trends of Voice UI Design

At its core, the concept of interaction was always about communication. Human-Computer Interaction has never been about graphical user interfaces, which is why Voice User Interfaces (VUIs) are the future of user interface design.

An interface is just a medium people use to interact with a system—whether it’s a GUI, VUI or something else. So Why is VUI So Important? Two reasons:

Firstly, conversational interfaces are so fascinating because conversation is a form of communication everyone understands.

  1. It’s a natural means of interaction. People associate voice communication with other people rather than with technology.
  2. Users don’t need to learn to interpret any symbology or new terminology (the language of GUI), they can use English (or any other native language) to operate with a system. It doesn’t mean that users don’t have to learn how to use a system but the learning curve be reduced significantly.

Secondly, user expectations are changing. According to Statista, 39% of millennials use voice search. This audience is ready to be the early adopters of VUI systems.

Top 5 VUI Trends

When it comes to designing VUI, voice interaction represents the biggest UX challenge for designers since the birth of the original iPhone. But the great news is that the most fundamental principles of UI design that we use when creating products with GUI are still applicable to VUI design. Below you can find a few trends that will shape VUI design in next decades.

1. VUI That Builds Trust

Trust helps to build a bridge between a person and a machine. If trust is absent, users will be unlikely to interact with a particular voice user interface.

The importance of the valid outcome (VUI should give the person understanding that s/he will receive exactly what s/he requested). It’s possible to achieve this goal by focusing on the following things:

  • Improving the accuracy of speech recognition (more sophisticated NLP algorithms).
  • Focusing on understanding the user’s intent (a reason for interacting in the first place). When users interact with a system, they have a particular problem they want to solve, and the goal of the designer is to understand what this problem is.
  • Providing meaningful error messages.
  • Crafting contextually driven flows. While it’s impossible to predict all commands that users might ask the system, designers need to at least design a user flow that is contextually driven. The system should anticipate users’ intent at each point of a conversation and provide users with information on what they can do next. For example, finding a restaurant near the user. When users search for a restaurant, the system should match exactly what the user is looking for.

The importance of user control (one of the 10 Usability Heuristics for User Interface Design by Jakob Nielsen is still applicable to VUI design).

  • The system should consider the natural limitations of a human brain (short-term memory limitations). The information provided by the system should be overwhelming. When people hear the system response, most users remember only the last phrase. Thus, it’s better to stay away from long phrases or providing a dozen different options while the user can remember just a couple of them at one time.
  • The system should react to a user request with appropriate feedback. This feedback should give users a full understanding of what the system is doing right now. For example, visual feedback lets the user know that the system is ready and listening; or in POD (Process of Doing). When a user sends a request to the system, the system shows a POD. POD isn’t a loading animation, it doesn’t just state the fact that users have to wait while a system is doing something, it provides valuable information of what the system does. For example, a POD for a command on pulling out a file from Dropbox might look like as someone search for a right file in storage.

2. Adaptive User Interface

An adaptive user interface (also known as AUI) is a user interface (UI) which adapts to the needs of the user or context. VUI of the future will adapt for users — the system will analyze all information it has about users (including the information about current mental state and health condition) and their current context to provide more relevant responses to user requests.

For example, if a user has a high blood pressure at the current moment and decides to set a meeting in 2 hours, a digital assistant might suggest avoiding that, or suggest lowering blood pressure with exercise before the meeting starts.

3. VUI That Conveys Personality

Visual designers have a lot of options to introduce the personality in graphical user interfaces – fonts, color, illustration, motion, just to name a few. But what about VUI? Designers can convey personality using language itself — by playing with words, voice, and tone. Speaking of voice, a voice is part of the persona and it shapes its identity. Once we’ve associated a voice with something, it becomes part of its identity. And we experience emotions when we interact with such an interface, just like we when we interact with real people. People want human-understandable voices — not a voice that sounds human, but a voice that speaks coherently human!

Bad example: Siri voice by Susan Bennett – the voice that sounds almost human but people still know that it’s a machine. You can’t really have a dialogue with Siri. While you can ask Siri something like, “What is the weather like today?” You can’t ask more sophisticated questions such as, “What should I wear today?” As a result, you don’t have deep feelings for Siri, you know it’s just a robot.

Good example: Samantha voice from the film Her — the voice that sounds coherently human and people can be in love with it.

4. From Narrow AI Towards General Intelligence

Human-computer interactions are shifting to conversation, but users expect more. Most of AI systems available today are still limited to Narrow AI — such systems use Machine Learning to solve a clearly defined (and, in most cases, way too narrow) problem. Narrow AIs have zero knowledge outside of their training data. It means that when a user wants to solve a slightly different problem, or the problem itself evolves, the system won’t be able to solve it and it’ll respond with something like, “I don’t understand.” So that you, as a user, face a wall.

In comparison to Narrow AI, General Intelligence is not limited to narrow domains. The concept of learning is at the foundation of GI systems — the fundamental difference between Narrow AI and General AI is that the General Intelligence systems learn without being expressly programmed (machines learn by themselves). GI system uses two types of learning — reinforcement learning (when a system uses all available information to solve a particular user problem) and supervised learning (when a system needs user assistance to solve a problem for the first time). Another difference is that a General AI system can learn to utilize other AI for general and specific purposes. As a result, different Machine Learning models can be trained dependently and work cooperatively. An advanced NLP GI system is able to learn from the first attempt by combining and processing information from multiple different data sources.

5. Impact on Society

Widespread acceptance of VUI systems. Improving the quality of VUI AI-based systems will lead to better user engagement. The relationships between human and computer will be interactive and collaborative — people and computers will work together. This will impact society — just imagine that in ten years, you’ll walk into the house and just talk and control all kinds of machines.

This future will be with omnipresent AI: As users, we’ll trust AI even with the most important decisions such as “What school should I choose for my children?” VUI will improve the quality of life of older people and people with disabilities.

Conclusion

“The best interface is no interface“ is a famous quote of Golden Krishna, the author of the book The Best Interface Is No Interface. He and many other designers believe that people don’t want more time with screens, in fact they want less. Thus, technology should stop celebrating screen-based solutions. And it’ll happen relatively soon — the interactions of the future won’t be made of buttons.

With the rise of computer processing power, we’ll have more systems that will be able to calculate up to 1000 steps in 1 second. A user and a machine will work together, enabling General Intelligence.

 

Featured image via DepositPhotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Use Case For Augmented Reality In Design

Use Case For Augmented Reality In Design

Use Case For Augmented Reality In Design

Suzanne Scacca

Augmented reality has been on marketers’ minds for years now — and there’s a good reason for it. Augmented reality (or AR) is a technology that layers computer-generated images on top of the real world. With the pervasiveness of the mobile device around the globe, the majority of consumers have instant access to AR-friendly devices. All they need is a smartphone connected to the Internet, a high-resolution screen, and a camera viewfinder. It’s then up to you as a marketer or developer to create digital animations to superimpose on top of their world.

This reality-bending technology is consistently named as one of the hot development and design trends of the year. But how many businesses and marketers are actually making use of it?

As with other cutting-edge technologies, many have been reluctant to adopt AR into their digital marketing strategy.

Part of it is due to the upfront cost of using and implementing AR. There’s also the learning curve to think about when it comes to designing new kinds of interactions for users. Hesitation may also come from marketers and designers because they’re unsure of how to use this technology.

Augmented reality has some really interesting use cases that you should start exploring for your mobile app. The following post will provide you with examples of what’s being done in the AR space now and hopefully inspire your own efforts to bring this game-changing tech to your mobile app in the near future.

The Future Is Here: AR & VR Icon Set

Looking for an icon set that’ll take you on a journey through AR and VR technology? We’ve got your back. Check out the freebie →

Augmented Reality: A Game-Changer You Can’t Ignore

Unlike virtual reality, which requires users to purchase pricey headsets in order to be immersed in an altered experience, augmented reality is a more feasible option for developers and marketers. All your users need is a device with a camera that allows them to engage with the external world, instead of blocking it out entirely.

And that’s essentially the crux of why AR will be so important for mobile app companies.

This is a technology that enables mobile app users to view the world through your “filter.” You’re not asking them to get lost in another reality altogether. Instead, you want to merge their world with your own. And this is something websites have been unable to accomplish as most interactions are lacking in this level of interactivity.

Let’s take e-commerce websites, for example. Although e-commerce sales increase year after year, people still flock to brick-and-mortar stores in droves (especially for the holiday season). Why? Well, part of it has to do with the fact that they can get their hands on products, test things out and talk to people in real time as they ponder a purchase. Online, it’s a gamble.

As you can imagine, AR in a mobile app can change all that. Augmented reality allows for more meaningful engagements between your mobile app (and brand) and your user. That’s not all though. Augmented reality that connects to geolocation features could make users’ lives significantly easier and safer too. And there’s always the entertainment application of it.

If you’re struggling with retention rates for your app, developing a useful and interactive AR experience could be the key to winning more loyal users in the coming year.

Inspiring Examples Of Augmented Reality

To determine what kind of augmented reality makes the most sense for your website or app, look to examples of companies that have already adopted and succeeded in using this technology.

As Google suggests:

“Augmented reality will be a valuable addition to a lot of existing web pages. For example, it can help people learn on education sites and allow potential buyers to visualize objects in their home while shopping.”

But those aren’t the only applications of AR in mobile apps, which is why I think many mobile app developers and marketers have shied away from it thus far. There are some really interesting examples of this out there though, and I’d like to introduce you to them in the hopes it’ll inspire your own efforts in 2019 and beyond.

Social Media AR

For many of us, augmented reality is already part of our everyday lives, whether we’re the ones using it or we’re viewing content created by others using it. What am I talking about? Social media, of course.

There are three platforms, in particular, that make use of this technology right now.

Snapchat was the first:

Snapchat filter
Trying out a silly filter on Snapchat (Source: Snapchat) (Large preview)

Snapchat could have included a basic camera integration so that users could take and send photos and videos of themselves to others. But it’s taken it a step further with face mapping software that allows users to apply different “filters” to themselves. Unlike traditional filters which alter the gradients or saturation of a photo, however, these filters are often animated and move as the user moves.

Instagram is another social media platform that has adopted this tech:

Instagram filter
Instagram filters go beyond making a face look cute. (Source: Instagram) (Large preview)

Instagram’s Stories allow users to apply augmented filters that “stick” to the face or screen. As with Snapchat, there are some filters that animate when users open their mouths, raise their eyebrows or make other movements with their faces.

One other social media channel that’s gotten into this — that isn’t really a social media platform at all — is Facebook’s Messenger service:

Messenger filters
Users can have fun while sending photos or video chatting on Messenger. (Source: Messenger) (Large preview)

Seeing as how users have flocked to AR filters on Snapchat and Instagram, it makes sense that Facebook would want to get in on the game with its mobile property.

Use Case

Your mobile app doesn’t have to be a major social network in order to reap the benefits of image and video filters.

If your app provides a networking or communication component — in-app chat with other users, photo uploads to profiles and so on — you could easily adopt similar AR filters to make the experience more modern and memorable for your users.

Video Objects AR

It’s not just your users’ faces that can be mapped and altered through the use of augmented reality. Spaces can be mapped as well.

While I will go on to talk about pragmatic applications of space mapping and AR shortly, I do want to address another way in which it can be used.

Take a look at 3DBrush:

Adding 3D objects to video with 3DBrush. (Source: 3DBrush)

At first glance, it might appear to be just another mobile app that enables users to draw on their photos or videos. But what’s interesting about this is the 3D and “sticky” aspects of it. Users can draw shapes of all sizes, colors and complexities within a 3D space. Those elements then stick to the environment. No matter where the users’ cameras move, the objects hold in place.

LeoApp AR is another app that plays with space in a fun way:

LeoApp surface mapping
LeoApp maps a flat surface for object placement. (Source: LeoApp AR) (Large preview)

As you can see here, I’m attempting to map this gorilla onto my desk, but any flat surface will do.

A gorilla dances on my desk, thanks to LeoApp AR. (Source: LeoApp AR)

I now have a dancing gorilla making moves all over my workspace. This isn’t the only kind of animation you can put into place and it’s not the only size either. There are other holographic animations that can be sized to fit your actual physical space. For example, if you wanted to chill out side-by-side with them or have them accompany you as you give a presentation.

Use Case

The examples I’ve presented above aren’t the full representation of what can be done with these mobile apps. While users could use these for social networking purposes (alongside other AR filters), I think an even better use of this would be to liven up professional video.

Video plays such a big part in marketing and will continue to do so in the future. It’s also something we can all readily do now with our smartphones; no special equipment is needed.

As such, I think that adding 3D messages or objects into a branded video might be a really cool use case for this technology. Rather than tailor your mobile app to consumers who are already enjoying the benefits of AR on social media, this could be marketed to businesses that want to shake things up for their brand.

Gaming AR

Thanks to all the hubbub surrounding Pokémon Go a few years back, gaming is one of the better known examples of augmented reality in mobile apps today.

Pokemon Go animates environment
My dog hides in the bushes from Pokemon. (Source: Pokémon Go) (Large preview)

The app is still alive and well and that may be because we’re not hearing as many stories about people becoming seriously injured (or even dying) from playing it anymore.

This is something that should be taken into close consideration before developing an AR mobile app. When you ask users to take part in augmented reality outside the safety of a confined space, there’s no way to control what they do afterwards. And that could do some serious damage to your brand if users get injured while playing or just generally wreak havoc out in the public forum (like all those PG users who were banned from restaurants).

This is probably why we see AR more used in games like AR Sports Basketball these days.

Users can map a basketball hoop onto any flat surface with AR Sports Basketball. (Source: AR Sports Basketball)

The app maps a flat surface — be it a smaller version on a desk or a larger version placed on your floor — and allows users to shoot hoops. It’s a great way to distract and entertain oneself or even challenge friends, family or colleagues to a game of HORSE.

Use Case

You could, of course, build an entire mobile app around an AR game as these two examples have shown.

You could also think of ways to gamify other mobile app experiences with AR. I imagine this could be used for something like a restaurant app. For example, a pizza restaurant wants to get more users to install the app and to order food from them. With a big sporting event like the Super Bowl coming up, a “Play” tab is added to the app, letting users throw pizzas down the field. It would certainly be a fun distraction while waiting for their real pizzas to arrive.

Bottom line: get creative with this. AR games aren’t just for gaming apps.

Home Improvement AR

As you’ve already seen, augmented reality enables us to map physical spaces and stick interactive objects to them. In the case of home improvement, this technology is being used to help consumers make purchasing decisions from the comfort of their home (or at their job or on their commute to work, etc.)

IKEA is one such brand that’s capitalized on this opportunity.

 IKEA product placement
Place IKEA products around your home or office. (Source: IKEA) (Large preview)

To start, here is my attempt at shopping for a new desk for my workspace. I selected the product I was interested in and then I placed it into my office. Specifically, I put the accurately sized 3D desk projection in front of my current desk, so I could get a sense for how the two differ and how this new one would fit.

While product specifications online are all well and good, consumers still struggle with making purchases since they can’t truly envision how those products will (physically) fit into their lives. The IKEA Place app is aiming to change all of that.

IKEA product search
Take a photo with the IKEA map and search related products. (Source: IKEA) (Large preview)

The IKEA app is also improving the shopping experience with the feature above.

Users open their camera and point it at any object they find in the real world. Maybe they were impressed by a bookshelf they saw at a hotel they stayed in or they really liked some patio chairs their friends had. All they have to do is snap a picture and let IKEA pair them with products that match the visual description.

IKEA search results
IKEA pairs app users with relevant product results. (Source: IKEA) (Large preview)

As you can see, IKEA has given me a number of options not just for the chair I was interested in, but also a full table set.

Use Case

If you have or want to build a mobile app that sells products to B2C or B2B consumers and these products need to fit well into their physical environments, think about what a functionality like this would do for your mobile app sales. You could save time having to schedule on-site appointments or conduct lengthy phone calls whereby salespeople try to convince them that the products, equipment or furniture will fit. Instead, you let the consumers try it for themselves.

Self-Improvement AR

It’s not just the physical spaces of consumers that could use improvement. Your mobile app users want to better themselves as well. In the past, they’d either have to go somewhere in person to try on the new look or they’d have to gamble with an online purchase. Thanks to AR, that isn’t the case anymore.

L’Oreal has an app called Style My Hair:

L’Oreal hair color tryout
Try out a new realistic hair color with the L’Oreal app. (Source: Style My Hair) (Large preview)

In the past, these hair color tryouts used to look really bad. You’d upload a photo of your face and the website would slap very fake-looking hair onto your head. It would give users an idea of how the color or style worked with their skin tone, eye shape and so on, but it wasn’t always spot-on which would make the experience quite unhelpful.

As you can see here, not only does this app replace my usually mousy-brown hair color with a cool new blond shade, but it stays with me as I turn my head around:

L’Oreal hair mapping example
L’Oreal applies new hair color any which way users turn. (Source: Style My Hair) (Large preview)

Sephora is another beauty company that’s taking advantage of AR mapping technology.

Sephora makeup testing
Try on beauty products with the Sephora app. (Source: Sephora) (Large preview)

Here is an example of me feeling not so sure about the makeup palette I’ve chosen. But that’s the beauty of this app. Rather than force customers to buy a bunch of expensive makeup they think will look great or to try and figure out how to apply it on their own, this AR app does all the work.

Use Case

Anyone remember the movie The Craft? I totally felt like that using this app.

The Craft hair-changing clip definitely inspired this example. (Source: The Craft)

If your app sells self-improvement or beauty products, or simply advises users on next steps they should take, think about how AR could transform that experience. You want your users to be confident when making big changes — whether it be how they wear their makeup for date night or the next tattoo they put on their body. This could be what convinces them to take the leap.

Geo AR

Finally, I want to talk about how AR has and is about to transform users’ experiences in the real world.

Now, I’ve already mentioned Pokémon Go and how it utilizes the GPS of a users’ mobile device. This is what enables them to chase those little critters anywhere they go: restaurants, stores, local parks, on vacation, etc.

But what if we look outside the box a bit? Geo-related AR doesn’t just help users discover things in their physical surroundings. It could simply be used as a way to improve the experience of walking about in the real world.

Think about the last time you traveled to a foreign destination. You may have used a translation guidebook to look up phrases you didn’t know. You might have also asked your voice assistant to translate something for you. But think about how great it would be if you didn’t have to do all that work to understand what’s right in front of you. A road sign. A menu. A magazine article.

The Google Translate app is attempting to bridge this divide for us:

Google Translate camera search
Google Translate uses the camera to find foreign text. (Source: Google Translate) (Large preview)

In this example, I’ve scanned an English phrase I wrote out: “Where is the bathroom?” Once I selected the language I wanted to translate from and to, as well as indicated which text I wanted to focus on, Google Translate attempted to provide a translation:

Google provides a translation
Google Translate provides a translation of photographed text. (Source: Google Translate) (Large preview)

It’s not 100% accurate — which may be due to my sloppy handwriting — but it would certainly get the job done for users who need a quick way to translate text on the go.

Use Case

There are other mobile apps that are beginning to make use of this geo-related AR.

For instance, there’s one called Find My Car that I took for a test spin. I don’t think the technology is fully ready yet as it couldn’t accurately “pin” my car’s location, but it’s heading in the right direction. In the future, I expect to see more directional apps — especially, Google and Apple Maps — use AR to improve directional awareness and guidance for users.

Wrapping Up

There are challenges in using AR, that’s for sure. The cost of developing AR is one. Finding the perfect application of AR that’s unique to your brand and truly improves the mobile app user experience is another. There’s also the fact it requires users to download a mobile app, so there’s a lot of work to be done to motivate them to do so.

Gimmicks just won’t work — especially if you expect users to download your app and make use of it (remember: retention rates aren’t just about downloads). You have to make the augmented reality feature something that’s worth engaging. The first place to start is with your data. As Jordan Thomson wrote:

“AR is a lot more dependent on customer activity than VR, which is far older technology and is perhaps most synonymous with gaming. Designers should make use of big data and analytics to understand their customers’ wants and needs.”

I’d also advise you to spend some time in the apps above. Get a sense for how the technology works and discover what makes it so appealing on a personal level. Compare it to your own mobile app’s goals and see if there’s a way to take AR from just being an idea you’re tossing around to a reality.

Smashing Editorial (ra, yk, il)
Foundation 6.5 Released

After an extended wait, Zurb have finally released the much anticipated version 6.5 of its popular Foundation framework. (This is in place of the originally intended 6.4.4 release.)

So, what has changed? Well, this is not a major release so we’re not getting CSS Grid yet, but the changelog is pretty long. The folks behind this release have grouped the changes into 3 categories: improved stability, improved accessibility, and improved browser support.

What this means is that there are lot of bug fixes, but not so much in the way of features. There are also a lot of fixes to the documentation. But that’s not to say that’s a bad thing, in fact, it’s a very good thing.

A few changes might result in changes to the appearance of your work so it is worth checking

First of all, there are no breaking changes and 6.5 is fully compatible with previous versions. A few changes might result in changes to the appearance of your work so it is worth checking. But the good news is that many of the fixes are to correct unexpected behaviour.

Work has been done on dynamically created components, to ensure they initialize correctly, and an issue with older browsers handling breakpoints badly has been improved. Support for smaller font sizes is also improved.

At the heart of Foundation is its XY Grid, and this release sees some very welcome improvements, including fixes for some slightly dodgy behaviour; a vertical frame will now take the full height, and grid frames now get the vertical scrollbar they should.

The Abide form validation plugin has been improved to allow for escaped characters in URLs, and a11y attributes will be set automatically on form fields, labels, and on errors. There have been accessibilty improvements in all the menu plugins, too, with accessibility best practices being applied to other components as well.

Possibly the biggest improvement on the Javascript front is that not only is Foundation’s Javascript now provided as CommonJS, ES Modules and ES6 bundles, it is distributed by default as a UMD bundle. This means you can import Foundation in any Javascript environment, including Node.js, with no transpilation necessary.

the point of using a framework like Foundation, is so that you don’t need to peak behind the curtain

Many of the changes in this release will probably not jump out at most users of Foundation, but a lot of work has gone into behind the scenes. That is not just what it does, but how it actually does it. And the point of using a framework like Foundation, is so that you don’t need to peak behind the curtain. But, at the same time, it’s good to know that the wizard is in tip top shape.

While Foundation 6.5 does not have lots of showy new features, it does have a sleeker, more finely tuned engine. Its developers have listened to its community and have done a lot to address issues and niggles that the community raised.

Ease of use should be increased, and anything that helps ease the frustrations of making designs look good on all browsers and all viewport sizes is definitely to be welcomed. Plus, the docs have been improved with some better examples and more comprehensive coverage in places.

For a little while there, it looked as though Foundation might have reached its terminus, but it seems they checked the vault and found some inspiration.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source
p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

The “C” in CSS: The Cascade

Following up from Geoff’s intro article on The Second “S” in CSS, let’s now move the spotlight to the “C” in CSS — what we call the Cascade. It’s where things start to get messy, and even confusing at times.

Have you ever written a CSS property and the value doesn’t seem to work? Maybe you had to turn to using !important to get it going. Or perhaps you resorted to writing the CSS inline on the element in the HTML file.

Ack, inline!

Speaking of inline styles, have you wondered why SVG editors use them instead of a separate CSS file? That seems kinda weird, right?

<svg id="icon-logo-star" viewBox="0 0 362.62 388.52" width="100%" height="100%"> <style> .logo { fill: #ff9800; } </style> <title>CSS Tricks Logo</title> <path class="logo" d="M156.58 239l-88.3 64.75c-10.59 7.06-18.84 11.77-29.43 11.77-21.19 0-38.85-18.84-38.85-40 0-17.69 14.13-30.64 27.08-36.52l103.6-44.74-103.6-45.92C13 142.46 0 129.51 0 111.85 0 90.66 18.84 73 40 73c10.6 0 17.66 3.53 28.25 11.77l88.3 64.75-11.74-104.78C141.28 20 157.76 0 181.31 0s40 18.84 36.5 43.56L206 149.52l88.3-64.75C304.93 76.53 313.17 73 323.77 73a39.2 39.2 0 0 1 38.85 38.85c0 18.84-12.95 30.61-27.08 36.5l-103.61 45.91L335.54 239c14.13 5.88 27.08 18.83 27.08 37.67 0 21.19-18.84 38.85-40 38.85-9.42 0-17.66-4.71-28.26-11.77L206 239l11.77 104.78c3.53 24.72-12.95 44.74-36.5 44.74s-40-18.84-36.5-43.56z"></path>
</svg>

Well, the cascade has a lot to do with this. Read on to find out how styling methods affect what’s being applied to your elements and how to use the cascade to your advantage because, believe me, it’s a wonderful thing when you get the hang of it.

TL;DR: Jump right to the CSS order diagram for a visual of how everything works.

The cascade cares about how and where styles are written

There are a myriad of ways you can apply CSS rules to an element. Below is an example of how stroke: red; can be applied to the same element. The examples are ordered in ascending priority, where the highest priority is at the bottom:

<!-- Inheritance -->
<g style="stroke: red"> <rect x="1" y="1" width="10" height="10" /> <!-- inherits stroke: red -->
</g> <!-- Inline attributes -->
<rect x="1" y="1" width="10" height="10" stroke="red" /> <!-- External style sheet -->
<link rel="stylesheet" href="/path/to/stylesheet.css"> <!-- Embedded styles -->
<style> rect { stroke: red; }
</style> <!-- Different specificity or selectors -->
rect { stroke: red; }
.myClass { stroke: red; }
#myID { stroke: red; } <!-- Inline style -->
<g style="stroke: red"></g> <!-- Important keyword -->
<g style="stroke: red !important"></g>

Inheritance? Embedded? External? Inline? Specificity? Important? Yeah, lots of terms being thrown around. Let’s break those down a bit because each one determines what the browser ends up using when a web page loads.

Elements can inherit styles from other elements

Both HTML and SVG elements can inherit CSS rules that are applied to other elements. We call this a parent-child relationship, where the element the CSS is applied to is the parent and the element contained inside the parent is the child.

I'm the child because the parent is wrapped around me.
</div>

If we set the text color of the parent and do not declare a text color on the child, then the child will look up to the parent to know what color its text should be. We call that inheritance and it’s a prime example of how a style cascades down to an element it matches… or “bubbles up” the chain to the next matched style.

However, inheritance has the lowest priority among styling methods. In other words, if a child has a rule that is specific to it, then the inherited value will be ignored, even though the inherited value may have an important keyword. The following is an example:

I'm the child because the parent is wrapped around me.
</div>

See the Pen Child ignores inline inheritance with !important by Geoff Graham (@geoffgraham) on CodePen.

SVG inline attributes

For SVG elements, we can also apply styles using inline attributes, where those have the second lowest priority in the cascade. This means the CSS rules in a stylesheet will be able to override them.

<rect x="1" y="1" width="10" height="10" stroke="red" />
rect { stroke: blue;
}

See the Pen Stylesheet overrides SVG inline attributes by Geoff Graham (@geoffgraham) on CodePen.

Most SVG editors use inline attributes for portability; that is, the ability to copy some elements and paste them elsewhere without losing the attributes. Users can then use the resultant SVG and style its elements using an external stylesheet.

Stylesheets

Stylesheets are divided into two flavors: external and embedded:

<!-- External style sheet -->
<link rel="stylesheet" href="/path/to/stylesheet.css"> <!-- Embedded styles -->
<style> div { border: 1px solid red }
</style>

Embedded styles have a higher priority than external stylesheets. Therefore, if you have the same CSS rules, those in the embedded style will be applied.

See the Pen Embedded styles override stylesheet rules by Geoff Graham (@geoffgraham) on CodePen.

All stylesheets also follow ordering rules, where files that are defined later, will have higher priority than those defined earlier. In this example, stylesheet-2.css will take precedence over the stylesheet-1.css file because it is defined last.

<link rel="stylesheet" href="/path/to/stylesheet-1.css">
<link rel="stylesheet" href="/path/to/stylesheet-2.css">

Specificity or selectors

How you select your elements will also determine which rules are applied, whereby tags (e.g. <p>,

), classes (e.g. .my-class) and IDs (e.g. #myI-id) have ascending priorities.

See the Pen Specificity by selectors by Geoff Graham (@geoffgraham) on CodePen.

In the example above, if you have a div element with both .my-class and #my-id, the border will be red because IDs have higher priority than classes and tags.

*Specificity has higher priority than ordering rules, therefore, irrespective if your rule is at the top or bottom. Specificity still has higher priority and will be applied.

Ordering

CSS rules always prioritize from left-to-right, then from top-to-bottom.


<style> div { border: 1px solid red; border: 1px solid blue; /* This will be applied because it is at the bottom */ } </style>

Inline styles

Inline styles have the second highest priority, just below the !important keyword. This means that inline styles are only overridden by the important keyword and nothing else. Within inline styles, normal ordering rules applies, from left-to-right and top-to-bottom.

The important keyword

Speaking of the !important keyword, it is used to override ordering, specificity and inline rules. In other words, it wields incredible powers.

Overriding inline rules

<style> div { /* This beats inline styling */ border: 1px solid orange !important; /* These do not */ height: 200px; width: 200px; }
</style> 

In the example above, without the important keyword, the div would have a red border because inline styling has higher priority than embedded styles. But, with the important keyword, the div border becomes orange, because the important keyword has higher priority than inline styling.

Using !important can be super useful, but should be used with caution. Chris has some thoughts on situations where it makes sense to use it.

Overriding specificity rules

Without the important keyword, this div border will be blue, because classes have higher priority than tags in specificity.

<style> /* Classes have higher priority than tags */ .my-class { border: 1px solid blue; height: 100px; width: 100px; } div { border: 1px solid red; height: 200px; width: 200px; }
</style> 

See the Pen Classes beat tags by Geoff Graham (@geoffgraham) on CodePen.

But! Adding the important keyword to the tag rules tells the element to ignore the cascade and take precedence over the class rules.

<style> .my-class { border: 1px solid red; } /* The important keyword overrides specificity priority */ .my-class { border: 1px solid blue !important; }
</style> 

See the Pen !important ignores the cascade by Geoff Graham (@geoffgraham) on CodePen.

Overriding ordering rules

OK, so we’ve already talked about how the order of rules affects specificity: bottom beats top and right beats left. The surefire way to override that is to put !important into use once again.

In this example, the div will take the red border, even though the blue border is the bottom rule. You can thank !important for that handiwork.

<style> div { border: 1px solid red !important; } /* This wins, despite the ordering */ div { border: 1px solid blue; }
</style> 

See the Pen Important wins over ordering by Geoff Graham (@geoffgraham) on CodePen.

Visualizing the cascade

Who knew there was so much meaning in the “C” of CSS? We covered a ton of ground here and hopefully it helps clarify the way styles are affected and applied by how we write them. The cascade is a powerful feature. There are opinions galore about how to use it properly, but you can see the various ways properties are passed and inherited by elements.

More of a visual learner? Here’s a chart that pulls it all together.

Download chart

The post The “C” in CSS: The Cascade appeared first on CSS-Tricks.

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google