some-things-you-oughta-know-when-working-with-viewport-units

David Chanin has a quickie article summarizing a problem with setting an element’s height to 100vh in mobile browsers and then also positioning something on the bottom of that.

Summarized in this graphic:

The trouble is that Chrome isn’t taking the address bar (browser chrome) into account when it’s revealed which cuts off the element short, forcing the bottom of the element past the bottom of the actual viewport.

.full-page-element {
  height: 100vh;
  position: relative;
}

.full-page-element button {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

You’d expect that button in the graphic to be visible (assuming this element is at the top of the page and you haven’t scrolled) since it’s along the bottom edge of a 100vh element. But it’s actually hidden behind the browser chrome in mobile browsers, including iOS Safari or Android Chrome.

I use this a lot:

body {
  height: 100vh; /* Nice to not have to think about the HTML element parent */
  margin: 0;
}

It’s just a quick way to make sure the body is full height without involving any other elements. I’m usually doing that on pretty low-stakes demo type stuff, but I’m told even that is a little problematic because you might experience jumpiness as browser chrome appears and disappears, or things may not be quite as centered as you’d expect.

You’d think you could do body { height: 100% }, but there’s a gotcha there as well. The body is a child of which is only as tall as the content it contains, just like any other element.

If you need the body to be full height, you have to deal with the HTML element as well:

html, body { 
  height: 100%;
}

…which isn’t that big of a deal and has reliable cross-browser consistency.

It’s the positioning things along the bottom edge that is tricky. It is problematic because of position: absolute; within the “full height” (often taller-than-visible) container.

If you are trying to place something like a fixed navigation bar at the bottom of the screen, you’d probably do that with position: fixed; bottom: 0; and that seems to work fine. The browser chrome pushes it up and down as you’d expect (video).

Horizontal viewport units are just as weird and problematic due to another bit of browser UI: scrollbars. If a browser window has a visible scrollbar, that scrollbar will usually eat into the visual space although a value of 100vw is calculated as if the scrollbar wasn’t there. In other words, 100vw will cause horizontal scrolling in a way you probably wouldn’t expect.

See the Pen


CSS Vars for viewport width minus scrollbar
by Shaw (@shshaw)


on CodePen.

Our last CSS wishlist roundup mentioned better viewport unit handling a number of times, so developers are clearly pretty interested in having better solutions for these things. I’m not sure what that would mean for web compatibility though, because changing the way they work might break all the workarounds we’ve used that are surely still out in the wild.

8-things-to-stop-doing-with-typography-(right-now!)

Good typography is an art that shouldn’t be messed with too much. Letterforms flow together to form words and phrases that are readable and have subtle visual meaning.

But if you aren’t careful, it’s easy to ruin typographic beauty in an instant.

If you have slipped into any of these design traps, this is the time to stop doing anything on this list to type and clean up your design pieces. (Your portfolio will thank you.)

Adding Drop Shadows

typography

Most fonts are perfect just the way they are. (I am dead serious.)

If the letters don’t work for your design, maybe you should consider another type choice. Don’t take the lazy option and add a way-too-obvious drop shadow or outline to the text.

…the best shadows go completely unnoticed

There’s this general rule about drop shadows that more people should follow — the best shadows go completely unnoticed. If you can see the shadow on a text element, then it is probably too big, too dark, and will get in the way of readability.

Honestly, using these effects is a fairly lazy way of trying to make text work. (You commonly see shadows and outlines on text that should have more contrast against the background.)

On the other hand, you can create some cool art-type text elements with shadows and outlines. But it is a technique that you’ll probably only ever use a couple of times in your design career.

Using Too Many Fonts

typography

It should go without saying. But it requires repeating.

Using too many fonts ruins all of the typography in a design. Using fonts that don’t pair well with each other (or the content for that matter) can ruin the design.

Pick a typography palette for projects. Set a type hierarchy and work from there. Obey the type style rules that you set for the project and chances are that it will turn out ok.

Not sure how to pair fonts? Learn more.

Ignoring Contrast

typography

Contrast is the thing that makes every bit of the type in your design readable. This is true of print materials, websites, and even tactile items like shirts or billboards.

Not having enough contrast between the background and typography — or not accounting for changes to contrast due to backlighting or environmental elements — is a common mistake. And it can kill the effectiveness of every word in the design.

…highly readable typography with strong contrast is a positive in terms of website accessibility as well.

You only have a few seconds to capture someone’s attention with a design. Don’t waste that precious time as users struggle to understand the words you want them to read.

To ensure readability, you want to put light text on a dark background (or vice versa) and not use similarly saturated colors against one another. As a rule of thumb, using black (or dark gray) and white text is the best option, when you have doubts about color combinations.

A tool such as the WebAIM Color Contrast Checker can help you determine contrast for text elements. As a bonus, highly readable typography with strong contrast is a positive in terms of website accessibility as well.

Using Caps, Bold, and Italics Too Much

typography

Did you know that lots of type styles can cause concerns when it comes to accessibility?

Using too many type variations – all caps, bold, italics, and underlining – can cause text to appear much more compressed and squeezed in than it really is. That’s a problem when it comes to readability.

If you are using these text effects for accents or to make a point, stop and ask yourself if there is a better way. All of these things are ok when used sparingly, but shouldn’t be throughout the overall design.

Double Spacing

typography

Stop putting two spaces between periods (and other punctuation) at the ends of sentences and the start of the next sentence. It only leaves an odd gap. This gap can get even more awkward at the ends of lines and result in spaces at the beginning of a sentence on a new line.

Modern digital typesetting is designed to take care of spacing between sentences for you. While you may occasionally need some manual adjustment, two spaces are seldom necessary (unless you are creating design elements on a typewriter).

Forgetting Device/Screen Size

typography

Don’t forget about mobile users when setting font sizes for website design, emails, or even social media images that will be displayed on small screens (and contain text).

The space between lines is just as important as the size of the text itself.

While this isn’t something that you do to typography per se, size has a great impact on whether people can understand the message. Some typefaces are also made for smaller sizes and render well, whereas other type families are much better suited for large display.

When it comes to thinking about font adjustments consider the size and leading. The space between lines is just as important as the size of the text itself.

Think about use and pick fonts accordingly. (Even if you have to adjust for different screen sizes, and you likely will.)

Using Hyphens in Display

typography

It’s not that big of a concern typically for web designers, but it’s a big deal for everyone else: Don’t hyphenate words in display type.

It’s just ugly. And hard to read.

Don’t do it.

Going On and On and On…

typography

It’s time to stop thinking that you can just go on and on and on with type because it is on the web. No one is reading all of that no matter how beautiful the lettering is.

Stick to words that matter. It’ll make better use of your type choice so that people actually read it.

The more text you have in the design, the more important typography becomes.

When it comes to text that goes on and on, think about the length of text blocks. Are paragraphs short and digestible? Do you use lists and formatting that makes it easier to scan?

Think about the number of characters per line – this helps dictate font size – and aim for 40 to 60 characters per line (somewhat less for the smallest screens). This can help you figure out if blocks of text are too chunky or awkward to read.

Stick to standard alignment for everything except headlines. Long blocks of centered text are incredibly hard to read. People don’t like or expect it – outside of poetry – and it causes a lot of eyestrain. Justified blocks of text are equally difficult to read if they are long and can cause awkward spacing issues that are a challenge to resolve in responsive frameworks.

The more text you have in the design, the more important typography becomes. Use a clear and easy to read font without difficult formatting in long blocks to facilitate readability.

Conclusion

Poor typography can ruin a project faster than almost any other design issue. For a design to be effective, people must be able to read and understand it. Most commonly, that’s in the form of typography.

Too much decoration, improper contrast or scale, and over-doing text elements are the most common issues you’ll find when it comes to typography. Remember to let letters stand on their own, provide plenty of contrast for optimum readability, and use fonts with words that have shared meaning and context.

6-things-to-consider-when-making-your-portfolio-website

2. Conjure up a Design Aesthetic That Complements Your Work

Making the design of your portfolio website harmonious with your works is something you should strive for. In other words, all the colors, patterns, buttons, and other elements on your site should be in tune with what you plan to display. Or, at the very least, you should carefully consider the relationship between your works and your website design while coming up with your portfolio.

Of course, that is not to say that your website design should distract your viewers from appreciating your works. Rather, it should aim to complement them. There are a few different ways you can achieve this.

  1. Go for minimalism. Regardless of the nature of your work and the style you want to present, going for a minimalistic web design approach is an unmistakable decision. The reason for this is simple – if you incorporate minimalistic design into your portfolio, your works will be at the forefront, and your visitors will be able to easily navigate through them and get a comprehensive overview of your style and skills.

2. Strive for similarity. In case you want to be more daring with your design elements, colors and animations, it might be a good idea to try and blend all these elements with your works, i.e. to get them to have the same or similar vibe as the creative pieces you plan to display in your portfolio. Using this tactic, you can make your portfolio design “become one” with your works.

3. Create a contrast. Another way you can approach your portfolio design is to make it look different from your works. Depending on the nature of your work, this can actually make your portfolio pieces stand out even more.

As far as the structure of your portfolio goes, here are some things to keep in mind when figuring out how to compile your works and present them to the world.

What we mean by portfolio lists is a collection of several portfolio pieces shown together on a single page. Depending on how you chose to organize your portfolio, a portfolio list can showcase your entire collection of works or just a few pieces from one category. There’s a number of ways you can present your portfolio lists to ensure each piece gets the attention it deserves.

For example, if you have works that are rich in color or detail, or if various pieces from your collection simply don’t go well side by side, you need to make sure they have enough space to “breathe”. To do this, you can create more free space around them, thus preventing your portfolio from becoming oversaturated. This can be done by:

  1. Using a slider to present your works one by one,

2. Creating a list with plenty of white space,

3. Showcasing a smaller number of works with more empty space around them,

4. Using an asymmetric or “broken grid” type of list. This will let viewers rest their eyes as they go from one piece to the next, and you’ll still be able to showcase your works in all their glory.

If, on the other hand, your works are more minimalistic in their structure and/or fit well next to one another, then more compact list types such as a masonry or pinterest style list can work much better. By using a list that places your pieces closer to each other, the sense of unity and the consistent style in your works will immediately prevail, which can be a great advantage when used wisely.

Portfolio singles are pages dedicated to each single piece from your portfolio. Depending on the type of work in question, singles can contain one or more images. For example, if you’re presenting a logo design or a piece of art, you can always add early sketches and drafts to your single, or even random things that inspired you while working on the piece. This is a great way to present your unique way of viewing things as well as the creative process that led to the finished piece of work.

When it comes to single presentations of your work, the same rules apply as for portfolio lists. Whether you’ll use small images, big images, sliders, masonry grids, or something else entirely depends on the material you’re showing off. You can try out a few different presentation styles and see which one seems to best suit your work.

Like we mentioned before, it’s always a good idea to include a description of the work. In some cases, you might even want to write up an entire case study. However, if you think that your works speak for themselves, then it may be best to keep things simple. This means including only your most effective work examples and adding only the most essential info needed.

Hover animations are an essential part of the web and, as such, they must not be overlooked. The hover animations you choose for your portfolio should match both the style of your website and your works. There are a few paths you could choose when deciding on your hover animations.

One option is going minimal, almost without any changes in the way the works are displayed. Another popular trick is to switch the image and show a different picture when your visitors hover over each of your works. Or you could stick with a more classic approach and add a subtle motion animation or even simply display a few key pieces of information across the image on hover.

All in all, hovers can be another great addition to your portfolio presentation and can help further emphasize the uniqueness of your work.

In case you’re struggling with choosing a design concept for your portfolio, there’s no need to fret – plenty of portfolio WordPress themes have predesigned layouts which can help you set up your portfolio with ease. You just have to find the theme that best fits the general style you’re going for, and then simply customize to your liking.

10-things-to-know-about-android-10

Dave Burke

VP of Engineering

Published Sep 3, 2019

Android 10 is here! With this release, we focused on making your everyday life easier with features powered by on-device machine learning, as well as supporting new technologies like Foldables and 5G. At the same time, with almost 50 changes related to privacy and security, Android 10 gives you greater protection, transparency, and control over your data. This builds on top of our ongoing commitment to provide industry-leading security and privacy protections on Android. We also built new tools that empower people of all abilities, and help you find the right balance with technology.

Here are the 10 things you should know, centered on innovation, security and privacy and digital wellbeing: 

Simpler, smarter, and more helpful

1. Smart Reply now suggests actions. So when someone sends you a message with an address or a YouTube video, you can open and navigate in Google Maps or open up the video in YouTube—no copying and pasting required. And Smart Reply now works across all your favorite messaging apps.

2. Come to the dark side… with Dark Theme. You can enable Dark Theme for your entire phone or for specific apps like Photos and Calendar. It’s easier on your eyes, and your phone battery too. 

3. Take advantage of larger, edge-to-edge screens with the new gesture navigation. With simple swipes, you can go backwards, pull up the homescreen, and fluidly move between tasks. After switching, you won’t want to go back to visible buttons. 

4. With a single tap, Live Caption will automatically caption videos, podcasts and audio messages across any app—even stuff you record yourself. Live Caption will become available this fall, starting with Pixel.

New privacy and security features put you in control

5. You can choose to only share location data with apps while you’re using them. You’ll also receive reminders when an app that you are not actively using is accessing your location, so you can decide whether or not to continue sharing. 

6. In a new Privacy section under Settings, you’ll find important controls like Web & App Activity and Ad Settings in one place. 

7. With Google Play system updates, important security and privacy fixes can now be sent to your phone from Google Play, in the same way your apps update. So you get these fixes as soon as they’re available, without having to wait for a full OS update. 

Find the right balance with technology for you and your family

8. You have greater control over where and when notifications will alert you. Mark notifications as “Silent” and they won’t make noise or appear on your lockscreen, so you’re only alerted by notifications when you want to be.

9. Now Family Link is part of every device running Android 9 or 10, right in settings under Digital Wellbeing. Parents can use these tools to set digital ground rules like daily screen time limits, device bedtime, time limits on specific apps, and more. They can also review the apps children install on their devices, as well as their usage.

10. Want to be in the zone but not off the grid? Digital Wellbeing now brings you Focus mode. Select the apps you find distracting—such as email or the news—and silence them until you come out of Focus mode. Sign up for the Beta to try it.

There’s lots more in Android 10, including a new enterprise feature that lets you use different keyboards for your personal and work profiles, app timers for specific websites so you can balance your time on the web, new gender-inclusive emoji, and support for direct audio streaming to hearing aid devices. 

Android 10 begins rolling out to Pixel phones today, and we’re working with our partners to launch and upgrade devices to Android 10 this year. Learn more at android.com/10.

5-human-things-ux-designers-can-learn-from-conversational-design

It seems like magic: you talk to the phone, and it talks back. And if you’re lucky, it says something useful. You type into the chat box, and if the bot is good, you find out what you need to know. [Cue: shocked-looking stock photo models.] The current marketing term for it is “conversational design”, and it’s gaining more and more traction beyond big companies like Apple, Google, and Amazon.

Conversational design is actually old, in technological terms. IBM did a lot of the groundwork for voice-activated tech as far back as the ’60s. One of the first big chatbots, Jabberwacky, was conceived in 1981 and launched in 1997, and later evolved into Cleverbot.

Chatbots and their voice-activated cousins were initially little more than proofs of concept

Chatbots and their voice-activated cousins were initially little more than proofs of concept. There was even a bot or two where you could talk to “God”. Then came Apple, with Siri. Siri was probably the first commercially viable conversational interface. At least, it was the first massively successful UI of its kind.

Since then, the concept has taken off, and now everyone who wants to provide customer service without actually talking to their customers, is in on it…with conversational UIs of varying quality. See, good conversational design is just good design. You have to follow pretty much the same basic principles to get your message across. However, building a good conversational UI requires us to focus on design principles that might not otherwise get a lot of love in your average visual UI.

In the spirit of looking beyond our immediate area of expertise, and learning from other design disciplines, let’s see what the best conversational designers can teach the rest of us:

1. Anticipation

Anticipating the needs of our users is central to all design projects, no matter what kind of design you’re talking about. Conversational design, however, takes this to another level. Dealing with the needs of people who are talking to their device like it’s a person requires anticipating all the questions they might have, and indeed, all the ways they might ask those questions.

The best conversational UIs are based on very thorough research, massive data sets, years of testing, and a fair amount of guesswork to try and predict what people are going to need. Doing an A/B test doesn’t sound so bad now, does it?

2. Interpretation

Real conversations often go something like, “Hey, you know that guy, the pretty one, from the show yesterday?”

“We were watching stuff on the CW. They’re all annoyingly pretty.”

“The one with the hair? The dark hair? Skinny… goes fast?”

“You mean The Flash. Goddammit Brian, his superhero name is two short words. You can and should remember this.”

Human beings are highly inefficient at communicating what they mean, which is why there are literal college courses on various forms of communication. Half the effort of a conversation is often spent trying to figure out another person’s frame of reference, to then figure out what they mean.

Conversational UIs, therefore, cannot rely on specific, limited input from their users, like visual UIs can. They have to take a chunk of speech or text, scan it for meaning, scan it for relevant information, and then see if there’s anything at all they can do with it. And they’re typically not allowed to swear at us.

Beyond anticipating a user’s needs, all designers need to get better at determining their intent, when they click on a button five times to see if it’ll do something different, browse through the navigation menu seemingly at random, or any other weird stuff you see in your analytics.

3. Flexibility

For a quick example, let’s look at what happens when a conversational UI is not nearly flexible enough. 

flexibility

4. There Are Two Sides to Every Button Click

Regular UI design often comes down to laying out a path, a journey, and hoping users will hit all the right buttons to follow it. Conversational design recognizes the fact that every time someone uses your UI (of any kind), there’s a a two-way conversation happening. You said your piece already, when you designed the interface, and now it’s the user’s turn.

With a live conversation, we can adapt to someone’s input in real time, and the conversation will change to reflect that. The better conversational UIs can do this as well.

Imagine a world where your website can adapt to the user’s input on the fly, making it easier for them to find things they want. It already exists to some extent, with algorithms, big data, curated timelines (ugh), and recommended products (meh), and even some innovative apps that do their best to offer help when a user seems lost (thanks!), but this is a concept we’ve barely begun to explore. And it’s exciting.

adapt

5. Just Use Semantic HTML Already

We already know we need proper, semantic HTML for better SEO. And we need it for people who can’t rely on their eyes to browse the Internet. But if that’s not enough for you, consider poor Siri, Alexa, and their long-suffering siblings. The artificial assistants we talk to sometimes have to read through your markup—that’s right, your markup—to figure out where and what in the seven hells your phone number is, for example.

Listen, I’m not saying that improperly formatted data is what’s going to set off the AI rebellion, but I’m pretty sure that people who write bad HTML will be pretty high on “The List”.

semantic

Featured image via DepositPhotos.