Keeping Hackers Out of Connected Cars

Keeping Hackers Out of Connected Cars

Without a trusted cyber protection platform, the autonomous vehicle (AV) industry is at risk. Both automakers and consumers will be hesitant to accept AVs if they feel unsafe. Traditional IT security mechanisms for updates, patches, and protection do not apply to automotive, and the industry is scrambling to catch up with the fast pace of innovation and find a security approach that will prevent attacks, save lives, protect personal data, protect vehicle behavior as designed, and reduce recalls.

autonomous cars, AV, connected cars, NanoLock Security, cybersecurity, cyber protection platform, auto industry
The auto industry is still seeking solutions for keeping cars both connected and secure. (Image source: Wikimedia Commons)

The Rising Threats for Automotive Cybersecurity

In 2019, researchers found that if just 20 percent of AVs were stopped remotely, a city like Manhattan would grind to a complete halt. Even at 10 percent, this could render half of Manhattan’s roads completely inaccessible.

As experts continue to prepare for a world where connected cars roam the streets, they’re forecasting increased risk for major security breaches—and the opportunities for hacking will continue to increase as more and more components of vehicles are controlled by software and connected to the internet.

By 2022, there are expected to be more than 125 million connected vehicles worldwide, creating an environment in which opportunities for an attack are plentiful. Rightly, OEMs and tier 1 suppliers are urgently seeking new security solutions that can prevent these kinds of attacks—but few approaches are proving sufficiently robust. As vehicles become data centers on wheels, there are many security issue root causes.

Keeping Hackers out of the ECU

Today, most connected vehicles employ more than 100 electronic control units (ECU). Each of these ECUs connect to various network protocols, making them insecure and particularly vulnerable to attack vectors like malicious code, manipulation of software or firmware, and attack commands.

Once adversaries can modify a vehicle’s ECU, they can upset the functionality of the entire system, e.g., creating critical or safety issues that expose sensitive data, permitting access to unauthorized third parties, etc. In order to gain this level of control, hackers need to figure out a way to manipulate the software in the flash memory, and—as reality unfortunately proves—they almost always find a way in. To protect the many connected cars that will take over our roads in the future and keep our streets safe, a new approach for securing automotive ECUs is needed.

Current Security Solutions Are Failing

Integrating security solutions into electronic systems to secure ECUs is one option, but high-end processors or OS features only partially protect data and expert hackers who can often bypass them to compromise the memory.

In just last year alone, numerous vulnerabilities and hacks have been uncovered that expose the vulnerability of the processor and its failure as a sufficient security solution, such as the Tesla Model S Autopilot Vulnerability, Volkswagen and Audi Infotainment Vulnerabilities, and the Intel Zombieload Vulnerability, among others. In all of these cases, the software running on the ECU can allow hackers to infiltrate and wreak havoc—even after the system has been reset. Once a bug has been discovered, a hacker can gain control in a relatively simple manner and then get to work undermining the original software.

Another approach for securing the automotive ECU focuses on protecting the memory itself to ensure sensitive data can only be accessed by authorized parties. So, even if a hacker discovers bugs in the software, the hardware security features will stop them from being able to manipulate the software and gaining access to the system.

To fully secure the automotive ECU and ensure connected cars will be safe, automakers must also consider how to securely handle management and updates. A secure channel can be created with a cloud-to-flash solution, allowing the secured memory to deliver over-the-air updates and management system updates derived from the memory hardware itself.

Security for a Car’s Entire Lifecycle

The final piece of the puzzle in securing the automotive ECU is to create a secure network that only authorized ECUs can access. There are many operational inefficiencies that threaten the ECU; for example, an attack during manufacturing can get out of hand quickly and be difficult to detect.

The best security solution will provide a cloud to ECU protection, with memory devices that are already provisioned via cloud services that are able to create a secure channel with the memory device, as well as APIs to register the ECU in the network in a confidential, authorized and private way. Moreover, a cloud-to-flash approach doesn’t require any modification to the ECU’s design and protects the ECU for its entire lifecycle, further shielding the car from attacks.

As the world becomes increasingly connected and crowded with connected cars, maintaining reliable security against hackers will be paramount to ensuring public safety. To learn more about keeping hackers out of connected cars, be sure to attend the Drive World Conference at the end of August in Santa Clara, California.

Article originally posted at https://ubm.io/2Tri9YR
Author: Yoni Kahana

The Inside Story of Twitter’s New Redesign

The Inside Story of Twitter’s New Redesign

IN JANUARY, ON the heels of @realDonaldTrump’s second year in office, shortly after Elon Musk had been fined $20 million and Kevin Hart’s Oscar-hosting gig had been canceled because of controversial tweets, and weeks following Twitter CEO Jack Dorsey’s return from a 10-day silent meditation trip to Myanmar, about which he praised the food and the beauty of the monasteries but neglected to mention the ongoing regional genocide, Twitter made it clear that some things were about to change.Just not the tweets. Though the company had spent the better part of the year promoting “healthy conversations,” it wasn’t much interested in putting the screws on its users. Debates, disagreements, the occasional blow-out controversy—that was all stuff that made Twitter Twitter. No, instead, Twitter decided to change itself from the outside in. It was time to give the experience of using Twitter a makeover.A redesign of Twitter’s website was long overdue. The desktop interface hadn’t been refreshed in seven years, and the technology stack was so old that it was hard for the engineering team to issue any improvements. The team had begun fiddling with a web redesign back in 2017 and opened it up to beta testing in September 2018. By January, it was time to show more users how the new Twitter would look.

But as soon as Twitter invited people to opt into a prototype of the new design—a new twitter.com was coming!—the peanut gallery began to weigh in and not altogether kindly. What could Twitter do to improve its web design? “Delete it.” “Edit button.” “ALL WE WANT IS AN EDIT BUTTON.” “Did you get rid of the Nazis?” “Eh, looks ugly,” one user offered, perhaps charitably, “but I don’t think it’s a big deal.”

For Twitter’s design team, none of this was surprising. “We used to launch a feature and then search for it and put up a projector of the tweets coming in,” says Biz Stone, Twitter’s co-founder, who rejoined the company two years ago. “We’d be like, ‘Champagne?’ And then it would be like, ‘Oh. Maybe we shouldn’t.’”

So for the desktop redesign, Twitter’s design team chose to proceed with caution. The preview back in January was just a heads up. A small percentage of Twitter users could opt into a series of design “experiments,” but nothing was final, the feedback was welcome, and no one had a new design foisted upon them. And those “experiments”? Nothing explosive. Twitter just wanted to see how its users would interact with bookmarks, or dark mode, or a search bar that had been moved to a different spot on the page.

“Our purpose is to serve the public conversation. Once that became clear, it was like, wait a minute. How well are we doing that?”BIZ STONE, TWITTER COFOUNDER

Today, Twitter is rolling out the new website to absolutely everyone. Those who see it (or those who already have it) may find the new design refreshing in its subtlety. A few things have been rearranged in the new three-column design, and the site is noticeably faster, but there aren’t a lot of drastic updates. (No, there still isn’t an edit button.) That, to Twitter, is the whole point.

“Some of it is subtle, but a lot of it is a simplification of design,” says Mike Kruzeniski, Twitter’s senior director of product design. “We are trying to find the right places to be bold again, but it’s a resetting of that foundation. Starting with the best stuff and building from there.”

That foundation will prove important for Twitter. The redesign comes at a time when the company is beginning to revise its policies about hate and harassment on the platform, and is leaning more heavily on human moderators to do the janitorial tasks of keeping the place nice. There’s still more work to be done in cleaning up the toxic swamp. In the meantime, Twitter is planting a community garden.

The web redesign isn’t just about making the place prettier. It’s also about sending a message to users: Twitter is listening to what you want—even if it doesn’t always seem like it.

From left to right, Biz Stone, Bryan Haggerty, and Mike Kruzeniski.
SAMANTHA COOPER
IN THE EARLY days of Twitter, design decisions weren’t so much made poorly as they were never made to begin with. “We were just working as fast as we could,” says Stone. “We weren’t trying to make it look good at all.”And it showed. At launch, Twitter’s design spelled out the company’s name in a neon-green typeface that looked like flubber. (Stone designed much of the early website himself and apologizes for it. Only “like 30 people” were on Twitter at the time, he says in defense.) The decision to put a follower count in users’ bios? Stone barely thought about it. “We were just struggling to stay alive,” he says.Over time—and with the addition of a real design team—Twitter has devoted more of its brainpower to intentional design. It watched its users hack together creative ways to retweet each other or tag posts and then built-in UI fixes to support those behaviors. It experimented with new ways to see the news or find events or share parts of your life with your friends.

But along the way, Twitter has struggled with existential questions, often shaped by the way it presents itself. What, exactly, is Twitter? Who is it for? How should it be used—and, more recently, should it even exist?

“Sometimes what we struggle with is, OK, which group of people is it for?” says Kruzeniski. “Is it about your friends? Is this for your family? Is it for people you wish you knew? Or your internet friends?” Twitter has answered these questions differently at various points throughout its history, and its design has tended to emphasize whatever identity it’s assumed at the time. It’s pulled information about news into its own column or experimented with making Twitter’s homepage about finding events. “At different moments in time, it was like, Twitter is for events. No, Twitter is for news,” says Kruzeniski.

What the design team says now is that Twitter is for conversation. The best stories out of Twitter—the ones about the winds of the Arab Spring, or NBA fanatics buzzing about Kevin Durant, or choose-your-own-adventure-style storylines in which you are cast as Beyoncé’s assistant—have to do with people finding likeminded users and responding to each other in real-time.

“Internally, we call this project ‘Delight.’ One of the things we’re trying to do is make sure this is a delightful experience for users.JESAR SHAH, PRODUCT LEAD ON TWITTER.COM’S REDESIGN

The user interface is the membrane between Twitter’s engineers and its users; the people who build the platform and the people who use it. So Twitter’s design team has tried to make choices that nudge people toward the stuff that makes Twitter great: the formations of niche communities, the ability to talk to world leaders and celebrities, the ease of finding pockets of folks with shared interests.

“Our purpose is to serve the public conversation,” says Stone. “Once that became clear, it was like, wait a minute. How well are we doing that?”

THE NEW TWITTER.COM approaches that question seriously, if cautiously. It’s made some thoughtful UI tweaks, and the team rebuilt the website’s entire technology stack in order to make things easier to update going forward.The navigation icons have migrated to the left and the compose box—forever prompting “What’s happening?”—is now front and center, above the stream of tweets. You can now save your tweets in bookmarks, for referencing later on. On the right, the search bar features more prominently above a list of trending topics.

The redesigned Twitter.com puts navigation icons on the left, with easier access to bookmarks and lists. The search bar features more prominently on the right.
TWITTER

“People use Twitter a lot on desktop to look for information, and it tends to be around their interests,” says Jesar Shah, the web redesign’s product lead. “So we’re trying to make that easier for people, and leverage these new spaces we’ve created on the site and complement their primary browsing experience.” It’s surfacing the search and explore tabs in a more obvious way in an effort to signpost what Twitter is for: finding your internet tribe.

There’s a new profile button in the left sidebar, and it’s easy to switch between accounts. “There was a lot of global feedback around that,” says Shah. In Japan, one of Twitter’s largest markets, a lot of users were creating different accounts for different interests. “So they’ll have an account for food, and then another account for travel, and another account for TV shows, or maybe even a specific TV show. Being able to access that easily, regardless of what device you’re on, is something we’ve heard about a lot, and it’s been one of the top feature requests for a long time.”

Twitter’s website is now more customizable, too. You can change the size of your text, choose from one of several accent colors, and turn on one of Twitter’s new dark modes. “Personalization and customization—that’s something we hope to start bringing out throughout the product,” says Ashlie Ford, the product designer who led Twitter.com’s redesign.

The redesign supports two new options for dark mode: “dim” changes the theme to dark gray, and “lights out” turns the background to true black.
TWITTER

Twitter has considered bolder ideas—like removing the metrics from tweets, for example—and earlier this year it introduced twttr, a prototyping app for these and other experiments. But the web redesign is focused mostly on building the “foundation” for a future Twitter. And taking it slow is important. “When we first started running experiments, we had it be opt-in,” Shah says. “We’re just making sure we feel confident in the experience we’re putting forward. One of our principles is ‘be rigorous, get it right.’ That’s around experimentation. Given that we’re a global company, it’s our responsibility to make sure we’re understanding everyone’s needs.”

To that end, Shah, Ford, and the team created a survey for Twitter users to give feedback on the design. It received over 200,000 submissions from around the world. Ford spent entire weeks parsing them, using translation services to get to the ones that came from non-English-speaking countries. “People definitely don’t think we’re reading them, but we are,” she says.

ARIELLE PARDES COVERS PERSONAL TECHNOLOGY, SOCIAL MEDIA, AND CULTURE FOR WIRED.

As proof, she points to one of the new features: a tool that puts an emoji keyboard in the desktop composition box. “In the beginning, I thought, we don’t need an emoji picker right now. There’s a workaround for this,” she says. “But that was the No. 1 piece of feedback we heard about what people wanted, by a landslide.”

Customizations let users change the size of text, turn on one of Twitter’s new dark modes, and choose from one of several accent colors on the new Twitter.com.
TWITTER

Features like those might seem like small potatoes. But for Twitter, bringing some of the whimsy back to the website’s design was a central goal.

“Internally, we call this project ‘Delight,’” says Shah. “One of the things we’re trying to do is make sure this is a delightful experience for users. We want to make sure people come back to it often and can achieve what they want to achieve on Twitter.com.”

TWITTER TURNED 13 this year, and it’s hard to imagine a period of its history with less delight. The platform has become an arena for political infighting, a place where @realDonaldTrump both commands a huge audience and lashes out about Twitter’s discrimination against conservatives. There are problems with disinformation, harassment, “dehumanizing speech,” and simply having a coherent public conversation. Earlier this year at the TED Conference, curator Chris Anderson compared Twitter to the Titanic heading straight for the iceberg. In other words: a ship about ready to sink.Design can’t change all of this. But Twitter thinks that it can at least help define what Twitter is for and begin grappling with some of those questions about its identity.“In the past, as a company, we’ve struggled, because if you ask people at Twitter what they use Twitter for, you’d get a thousand different answers,” says Kruzeniski. “We used to think maybe that was bad. But I think it’s a wonderful thing. We’re now getting better at helping you find your specific interests, and connecting you to those topics and interests.”

This mindset shift seems to be happening all over Twitter. The whole company seems to be redesigning itself, down to the headquarters, which started a major remodel last year. Where the office once looked like a “birdhouse,” all blue hues and wooden tones, it’s now cleaner and more modern. And the walls are full of murals representing the communities that thrive on the platform: Black Twitter, NBA Twitter, celebrity Twitter.

Walkthrough any of the remodeled parts of the office and you get the message loud and clear: Twitter is about the people, not the product. Now the company hopes that message comes through on its website too.

Article originally posted at https://bit.ly/2Jzr1IA
Author Arielle Pardes

Good News! It Just Got Easier For You To Suggest New Emoji

Good News! It Just Got Easier For You To Suggest New Emoji

IF YOU WANTED to send a tweet using Mayan hieroglyphics, or call upon the Phaistos disc symbols to craft the perfect email reply, you would have the Unicode Consortium to thank. The nonprofit encodes languages for the digital age, preserving them in amber for their onscreen afterlife. They have rescued, for the internet, Meroitic cursive, Canadian syllabics, the Lydian scripts, and those most esoteric creatures, emoji. “From English and Chinese to Cherokee and Rohingya, Unicode is committed to preserving every language for the digital era,” says Mark Davis, Unicode’s president, and cofounder.

Thanks to the adoption of emoji, Unicode’s star has been steadily rising for the past decade. Its web design, however, has been stuck in biblical times. Or, at least, the biblical times of the web: the 1990s.

UNICODE

The archaic design is functional enough for you to easily find, say, information about parsing Hangul syllables. But more and more people are coming to Unicode.org who don’t care one lick about text standards. They come to Unicode.org because they have heard, through the rumor mill, that this is where they can lay their emoji demands at the feet of the emoji lords. Where’s the white wine emoji, they want to know? Where’s the emoji representing slime? Why can’t you give the princess emoji red hair?

Unicode.org does not have good answers to these questions. “When you visit the website right now, it’s apparent that it is very ‘Web 1.0,’” says Greg Welch, a Unicode Consortium board member. “It’s extremely functional and holds massive amounts of important information, but the user interface standards aren’t targeted toward today’s general public.”

THE WIRED GUIDE TO EMOJI

So today, Unicode is issuing a new design of its website. The new destination is brighter, cleaner, and organizes information about the non­profit more communicably. Most important, it makes it easier to figure out how to submit a proposal for a new emoji—the thing Unicode is increasingly known for.

“As emoji has grown in popularity, the Consortium is considering how the process could further evolve to meet growing demand while continuing to address technical limitations and standards,” Davis says. “The new website is the first step in providing greater access to the process for nontechnical users.”

The updated design, created by Adobe, is meant to address this new audience with simpler navigation that neatly spells out things like “What Is Unicode?” Before, you couldn’t find any information about emoji from the front page, let alone how you were supposed to go about proposing one. Now, a link about emoji sits right at the top.

Plus, the whole page just looks a lot nicer. Where there were once sand-colored sidebars and red hyperlinks, there are now cool purple and teal accents; on the homepage, there’s a grid of illustrations showing some of the symbols Unicode has standardized.

Lee’s group has been instrumental in helping people get emoji representation by guiding them through the daunting process of preparing a proposal for the Unicode Consortium. The proposals can be at times complex, and their formula is rigid. An emoji proposal without all of the required sections or research is immediately bounced back to its author. The process can be confusing, especially for someone who hasn’t thought much about emoji writ large, but really wants to be able to text their friend a chef’s kiss emoji.

The new Unicode.org is meant to clarify the basic requirements—and hopefully, encourage more people to get involved in the emoji proposal process. That’s the only way we’re going to get a white wine emoji—could you be the one to propose it?

Article originally posted at https://bit.ly/2KJ4EQd
Author: Arielle Pardes

3 Ways To Effectively Explain Your Creative Process To Your Colleagues

3 Ways To Effectively Explain Your Creative Process To Your Colleagues

As an amateur designer and as someone who has worked with designers in marketing positions previously, I came to understand that designers of all sorts have their own creative process and each one is a little bit different. And that’s okay. Learning this as someone managing the designer‘s projects (in a project coordinator role) and when creating on my own helped me better understand how to work with these individuals. But I also realized many others didn’t understand how they work and that would often create friction within the workplace.

As a web designer, have you ever been asked to produce a website with little instruction? Or to produce a design within a strict timeline? Often, I feel that web designers and/or developers (really any creative types) are expected to create spontaneously when the creative process doesn’t work that way. To combat this, here are some tips on how to explain your creative process (whatever it might be) and manage the expectations of those around you.

Be communicative

The best way to avoid workplace frustration is to communicate. Perhaps you work better in the evenings after most of your co-workers have left the office for the day. Working in the quiet of those hours may help you produce your best work. But the coworker who was trying to hunt you down in the morning when you were still at home or commuting could easily become frustrated at your absence.

During my tenure as a project coordinator, this was a constant complaint from other departments. Where were the designers? Shouldn’t they be working a 9-5 like the rest of us? But our designers didn’t function best in a 9-5 role. They worked late in the office and at home. They would come in on the weekends or when they had an idea that solved whatever issue they were dealing with at the moment.

To help both designers and those who work with them, be sure to communicate. As a designer, you might schedule office hours and advertise those hours so that other employees know they can find you at certain times. Communicating with co-workers about any issues and asking questions in a timely manner can help others feel involved and part of the process as well. Then, when snags arise, or a timeline is delayed all parties understand why.

You can also let others know the best way to reach you. Do you respond best to emails? Or do text messages work better? If co-workers know that they can get a faster response when chatting via a messaging app or software, it’ll help everyone feel more in touch.

Outline your typical creative process

In line with the topic above, it might be helpful for you to outline your typical creative process. How do you come up with new designs or ideas? Do you like to browse the work of others? Do you like time to sit and think? Does that sitting and thinking happen in the office or out of the office? Do you work by trial and error?

You may not have thought about these questions in detail before but knowing how you work and translating that for others can help them understand you (and your working habits) better. If you work by trial and error, then allowing time for the errors to occur is necessary. Or, you may be a developer who plans everything out in your mind or on your computer first and prefer to produce a product that’s as close to final as you can get it—which may take more time in the initial design stages than others expect.

Explaining your individual methods for creation can allow others a glimpse at what it takes to produce something from scratch. It can also help them realize that not all designers work in the same way. Just as a salesperson has their own methods for securing a sale, a designer has their own methods for producing a website or software.

Establish expectations for your role and for each project

Ideally, before you start a new role, expectations will be established with your manager. Knowing expectations from the start can help all parties feel understood and on the same page. This includes setting boundaries and explaining your process as stated in the previous section.

Should your manager be replaced, or new management come into play, set up a meeting to review these expectations. It will give you an opportunity to meet the new team member, review some past projects and get started in the right direction for the best possible working relationship.

Establishing expectations for each project can also set each of those projects up for success. Perhaps you’re working with new clients or a new department within your company—whenever you work with someone new, it’s a good idea to outline how you work and create a general timeline for the project along with what deliverables are expected. Getting as much information about a project outlined in the beginning can save hours in edits later.

The takeaway

Whatever your creative process, communicating and explaining it to others can help you and your co-workers have better working relationships. Managing expectations in a general sense and for each individual project can also help all parties be satisfied with the product. It’s okay to work differently than others and it’s okay to work within parameters that help you produce better work as long as you communicate those parameters so that others understand.

Article originally posted at https://bit.ly/2Mb9qt3
Author: Rachel Stones

Responsive Design – Best Practices and Considerations

Responsive Design – Best Practices and Considerations

Responsive websites are websites that adapt to all screen sizes and resolutions, not only on desktop but also on mobile, tablet, and sometimes even TV.

According to Statista, mobile traffic was responsible for 52.64% of all global traffic in 2017, meaning that a website not well optimized for mobile devices is losing out on approximately half of its traffic. By the end of 2018, it’s expected that the global traffic share for mobile devices will grow to 79%, which is an exceptional increase.

Businesses without a mobile website are falling behind at an alarming rate, because 8 in 10 visitors will stop engaging with a website that doesn’t display well on their device. It’s way too easy for users to hit the back button and try a rival business instead, and Google even ranks websites that are not responsive lower in their search.

You can take Google’s mobile-friendly test here.

Does any of this mean that mobile is more important than desktop? No. 83% of mobile users saythat they should be able to continue the experience on desktop if they wish.

Take a look at this mobile-optimized version of eBay vs. what it would look like if it weren’t mobile-optimized. Would you even consider the non-optimized version?

ebay: a responsive web design example

eBay: not mobile-optimized vs. a mobile-optimized responsive website

In order to design websites that can compete on today’s internet, web designers must be experts at responsive web design (RWD). Where should they start?

A Mobile-first Approach to Responsive Web Design

Mobile-first web design means designing the mobile website first and working up to the desktop version. There are a number of reasons why this approach works well.

  1. Mobile websites have more usability concerns (this is mostly due to the lack of screen real estate), so it’s practical and more efficient for the primary focus to be on mobile design.
  2. It’s easier to scale up the mobile version than it is to scale down the desktop version (again, because of the lack of space on mobile websites).
  3. Mobile-first web design helps to reevaluate what’s visually and functionally necessary.

responsive web design from mobile to tablet to laptop to desktop

Designers ought to consider taking a mobile-first approach to responsive web design. (source: Usabilla)

Designing a website as a mobile-first responsive site forces designers to ask a number of important questions because there is less screen real estate to work with. Here are the questions that need to be asked:

  • Is this feature/function really necessary?
  • How can we design something minimalist for mobile-first that will later scale up well for desktops?
  • Is this visual effect worth the time that it takes to load on mobile?
  • What’s the primary objective, and what visual elements help users achieve it?

We’ll take a look at some responsive web design examples in a moment. For now, let’s talk about which devices, screen sizes, and web browsers are relevant today.

What Screen Resolutions Are Relevant for Responsive Web Design?

Here are the most common screen resolutions across mobile, tablet, and desktop users worldwide. As you can see, there is a wide range of resolutions, so neither mobile, tablet nor desktop is dominating the market share right now—what this tells us is that designers should consider all of them when thinking about responsive web design.

  • 360×640 (small mobile): 22.64%
  • 1366×768 (average laptop): 11.98%
  • 1920×1080 (large desktop): 7.35%
  • 375×667 (average mobile): 5%
  • 1440×900 (average desktop): 3.17%
  • 720×1280 (large mobile): 2.74%

statistical breakdown of screen resolutions in 2017 for rwd

Just as with device breakdown, we should segment the data by location to match the user demographics (or anticipated user demographics) of our target audience. It’s also worth catering to resolutions that are gaining popularity, because while some screen sizes are currently not that common, they may be in the future. This will help responsive designers craft futureproof UX that will work even when the market share changes.

For example, 360×640 resolutions (which correspond mostly with Samsung devices using Android) have risen by 5.43% in the last year. Designers can use valuable insights like these to decide on key responsive breakpoints before starting a website design.

Responsive web design is about offering a seamless experience on any device, and since different web browsers render web pages in different ways, websites must be tested to ensure that they’re compatible with a variety of mobile and desktop web browsers.

Even though making a website scale to the correct responsive breakpoints is primarily the responsibility of a web developer, it’s the web designer that decides exactly how a responsive website will adapt to various screen sizes in order to create an optimal user experience.

Here’s a worldwide breakdown of web browser market share for mobile and desktop.

  • Chrome: 55.04%
  • Safari: 14.86%
  • UC Browser: 8.69%
  • Firefox: 5.72%
  • Opera: 4.03%
  • Internet Explorer: 3.35%

statistical breakdown of web browser usage in 2017 for responsive web design

Responsive design isn’t just about “making everything fit”—it’s also about adapting to the capabilities of the device hardware and web browser as well as the device resolution. One example of this could be that, while Google Chrome supports the CSS property overscroll-behavior: (which defines what happens when the user scrolls too hard towards the edge of the viewport), it’s not supported in any other web browser.

Responsive Design Best Practices

Eliminate Friction

As mentioned earlier, a mobile-first approach to responsive web design will help designers evaluate what’s really necessary in order for the user to achieve their main objective.

As we build-up to the tablet version (and later the desktop version), we can then begin to think about secondary objectives and the micro-interactionsuser flows, and CTAs (calls to action) that make those user objectives achievable. What’s more important is that we focus on the primary objectives of the user first and eliminate any unnecessary friction that aids neither the primary nor the secondary objectives.

A primary objective could be the purchasing of a product, whereas the second objective could be signing up for a newsletter (which could lead to a purchase later).

Here’s a terrific example of eliminating friction: Since mobile user interfaces are typically harder to navigate, it would be best to switch to a one-page checkout for mobile eCommerce stores and only enable multi-step checkout for desktop eCommerce stores.

Design for Thumbs

Responsive web design is tricky in the sense that users will interact with the desktop website via clicks but the mobile version via taps and swipes. There are physical differences as well. Desktop users typically have their computers on a surface, whereas mobile users hold their devices in their hands. These differences significantly change the way mobile UI designers design tap targets and other important UI elements with which users interact.

an illustration depicting accessible thumb regions on mobile screens

Thumbs can reach the center of the device screen better than the corners. (source: A List Apart)

Let’s take a look at some examples:

  • People typically expect the main desktop navigation to be at the top; however, on mobile, it should be at the bottom. Thumbs don’t reach the top comfortably.
  • Other interactive elements should also be easy to reach. This means keeping them in the center of the screen because it’s more difficult for thumbs to reach the sides and corners of device screens.
  • So that they can be tapped with ease, important links and CTAs should have a height of at least 44px (smaller tap targets are bad for usability).

Recommended reading: The Fundamental Guide to Mobile Usability.

Take Advantage of Mobile Devices’ Native Hardware

Mobile hardware (like the device camera, or GPS services) isn’t specifically reserved for native apps, and as mentioned earlier, responsive web design isn’t just about “making everything fit.” It’s also about adapting to the capabilities of the device. In the case of mobile web design, since mobile devices have easy to use cameras, some micro-interactions—such as data input—are actually easier on smaller screens as long as websites are taking advantage of the available native hardware.

Let’s take a look at some examples:

  • Credit/top-up card scanning (because forms are often tricky on mobile)
  • Photo-sharing on social media, because the media is already on your device
  • Two-factor authentication (because you’re already on your mobile device)
  • Quickly checking stocks/analytics (because mobile apps simplify information)
  • Performing a web search with voice (because hands-free is easier than typing)

Make Layouts Fluid/Adaptive by Default

Not every user will have their desktop browser maximized. This means that while designers need to consider the responsive breakpoints of the devices that users are using today, they also need to account for what happens in between those breakpoints.

fluid vs. fixed layout responsive design

A fluid vs. fixed web layout for responsive web design

Responsive breakpoints should be used to “reflow” the layout and content to a new device, but to account for all the sizes in between (just in case), layouts need to be otherwise fluid (that is, they naturally adapt/stretch as the browser resizes).

Keep these tips in mind when designing fluid/adaptive layouts:

  • Percentage units will allow elements to be fluid.
  • Setting minimum and maximum widths can enable the “but don’t go smaller/bigger than this” scenario.
  • SVG image formats can be scaled up and down without losing quality, and are resolution-independent (as opposed to JPGs and PNGs, which are not).

Don’t Forget about Landscape Orientation

We talked about specific responsive breakpoints earlier, but we also need to consider that those mobile viewports can be displayed in landscape orientation as well. While implementing a fluid layout will technically make the content-adaptive, losing a fair chunk of the portrait viewport can be a hindrance to the usability and accessibility.

Navigations are usually safe (sometimes they’re better, actually, since users typically navigate landscape orientation with two thumbs), but scrolling becomes significantly harder, which is less than optimal since the user is required to scroll more on the landscape.

Designers may want to consider designing for landscape breakpoints as well; for instance, tiled elements that stack vertically on mobile could be displayed as a slider with left and right navigation buttons, meaning the user doesn’t have to scroll.

Remember, Typography Can Be Responsive Too

Even though UX designers typically use pixel units to design websites, on the actual web, one point doesn’t necessarily equal a pixel anymore, because different devices have different resolutions. The iPhone X, for example, has 458 PPI (Pixels Per Inch), so where pixel sizes are getting smaller, we’re able to achieve crisper graphics in the same physical space (Apple calls this “Retina” technology, and Android calls it “hDPI”).

This means that a 16px font size, for instance, would look bigger or smaller on some devices depending on its resolution. Web developers will typically use em units to define font sizes, which are a type of responsive unit where 1em is equal to 1 point.

Design handoff tools like ZeplinSympliMarvel, and InVision can help designers collaborate with developers on matters that are a joint responsibility. While designers execute the design, and developers execute the code, as a whole the product design workflow is a team effort that requires solid communication.

Responsive Design Performance Optimization Tips and Best Practices

Responsive web design isn’t just about how it looks but also about how it acts and feels. Adapting websites so that they load faster on the intended device is equally important.

Lazy Load Non-vital Images and Videos

Images and videos are what make up a large chunk of the total download size of a website, but you don’t need to load them all at once. There are two scenarios where the rendering of media can be delayed: Below-the-fold content can be loaded as the user scrolls below the fold, and render-blocking media should be made to download only after the layout and content have downloaded. This practice is called lazy loading, where the loading of heavy, non-important elements is delayed to improve page performance.

Conditional Loading

Some website elements are not intended for mobile users, or at least aren’t worth the extra cognitive load. We want our mobile websites to be simple, so it makes sense to hide elements in certain scenarios. That being said, we have to make sure that we aren’t wasting browser resources and bandwidth by loading these elements even when they’re hidden; hence, it’s best practice to only include these elements in certain conditions.

Once again, a developer can achieve this with code; however, designers can improve page performance by communicating the conditions of when and where certain elements should and shouldn’t exist.

Responsive Images

As mentioned earlier, some devices display more pixels per inch, which can result in images becoming blurry if they’re not exported at the correct resolution. Depending on the resolution of the device, some will require images at double (@2x), triple (@3x) and even quadruple (@4x) the size. Web browsers now support the <picture> element, which chooses the correct image resolution depending on the device.

Designers crafting responsive websites can tailor images to the correct device by making sure to export at all the resolutions used on today’s devices (if you’re unsure, ask your developer—communication is key when it comes to responsive web design).

sketch export tool for responsive design

Exporting image assets from Sketch @2x for responsive web design

Conclusion

Wireframing can help to iron out the creases early in the design process, and this works well when taking a mobile-first approach to responsive web design. Perhaps there’s a responsive breakpoint that needs some extra attention, or maybe there’s a concept that just isn’t effective in terms of mobile responsiveness. It’s better to find the bumps in the road sooner rather than later (i.e., before adding visual aesthetics).

Modern design tools like Adobe XDMarvel and InVision enable teams to test prototypes on real devices, discuss feedback in context, and generally collaborate as a team until the layout works in all scenarios.

Employing a lean UX workflow where responsive design is driven by internal testing and feedback will ensure that the user experience works seamlessly across all platforms and screen resolutions before being presented to a real user for the first time.

Article originally posted at https://bit.ly/2I9j7mA
Author: Daniel Schwarz

Use These Web Design Tricks to Grow Your Business Exponentially

Use These Web Design Tricks to Grow Your Business Exponentially

Growing any business is, well, tough business. You’ve got your hand in every pot while simultaneously wearing every hat. You’re worrying about marketing strategies, product creation, and growth plans, all in the same day.

With so many ongoing tasks, it can be far too easy to let a little thing like digital presence fall by the wayside. However, that would be a grave mistake.

The Harvard Business Review recently conducted a study on what exactly makes people want to complete a purchase from a particular website, and the results were a resounding “trustworthiness.” By making consumers feel safe, comfortable and at ease when they visit your online destination, you stand a much higher chance of not just encouraging them to complete a purchase, but convincing them to become longtime users.

So, while things like company transparency, great testimonials, and a solid product are obvious ways to ingrain familiarity to potential customers, website design clearly ranks particularly high when determining if a brand seems trustworthy or not.

In order to stand out from the crowd, there are a few tried-and-true design elements that will transform your website visitors into loyal customers. Don’t worry, I’m not going to say something obvious like “responsive designs” — elements like that are a given.

Here are five top web design and UX trends that will grow your business fast.

1. Video landing page

Incorporating video into your website design is a no-brainer. I mean, 78 percent of internet users watch videos online every week.

But, don’t just embed any old YouTube video. Instead, take your website design to the next level by creating a video landing page.

You could target this video to a direct call to action on a particular web page, a la Salesforce. Or you could take a page out of Baesman’s book and create an immersive video that auto-plays on your homepage. Either of these approaches can provide information or drive home the brand’s identity — but both will improve UX and users’ impression of your company as a whole.

Not sold? The proof is in the pudding. According to Vidyard and Demand Metric’s The State of Video Marketing 2017 study — which surveyed 159 B2B and B2C professionals and entrepreneurs — it is predicted that 69 percent of website traffic will be video, while 70 percent of professional participants reported that video converts better than other forms of information and content.

2. Parallax scrolling

While digital experiences have no doubt improved many aspects of our daily lives, it has had one negative impact: People are lazy. So lazy, in fact, that clicking a button is often too far out of the realm of possibility.

Enter parallax scrolling.

The popularity of parallax scrolling has also introduced more deep-scrolling and single-page website designs, and renders what information is “above the fold” a little less necessary, since it is easier to see what’s below, too. Ultimately, that makes prioritizing content easier for you to manage and increases your user’s likelihood of seeing everything anyways.

Make Your Money Matter took its parallax scrolling to the next level, with effects spanning an illustrated timeline that goes both horizontally and vertically, ensuring it captivates users.

3. Animated calls to action

Calls to action are a necessary evil in website design. The fact remains that your consumers won’t know what to do unless you explicitly tell them. Many. Many. Times.

However, simply telling your consumers what to do just isn’t enough anymore, either. They’re seeing stimuli and instructions from all corners of the web, so you need a little something extra to help your goal stand out.

Adding a little animation to your important action items might be just the ticket. Whether it’s a micro-mini interaction (such as “liking” a Facebook post and seeing the many reaction animations) or a simple effect to catch users’ eyes, consumers are more likely to execute the action you’re pushing when the call to action grabs their attention and provides confirmation of completion.

Need some inspiration? Airbnb uses its animation app, Lottie, to incorporate subtle graphics animations atop its calls to action throughout its website and app designs.

4. Custom typography

Every website needs text, but the days of boring Times New Roman, Arial or any other basic stock font have long-since passed. Instead, take your message to the next level with unique typography that encompasses your brand identity while simultaneously communicating to users.

This unique typography can take many shapes (literally) or be found in different areas of your design. Some brands may choose to utilize this in their logo design, while other businesses (like mine) will sprinkle custom font throughout the entire design to draw attention to important content, like this newsletter signup call to action (below). Ultimately, the choice in how and where you utilize this trend is up to you.

5. Artificial intelligence

Despite the surge in e-commerce sales over brick and mortar storefronts, people still crave connections, which is likely one of the reasons that artificial intelligence in all its forms is so popular.

AI in website design can take many shapes, but some popular examples include machine learning, personalization, and chatbots. Machine learning and personalization are cut from the same cloth to a degree and ingratiate a feeling of “being special” with users that, in turn, fosters brand loyalty.

Chatbots influence user experience much more directly, though. While they provide an engaging element, the biggest draw to incorporating chatbots into your website design relates to customer service. Users can ask questions and receive answers in real-time — which is easy to visualize — and acquire information quickly.

Quartz is a stellar example of chatbots within immersive app design. Through a conversational interface and hilarious memes, users are more likely to return to consume the entertaining content than they are to read a boring news article on another app.