Building A CSS Layout: Live Stream With Rachel Andrew

dreamt up by webguru in Uncategorized | Comments Off on Building A CSS Layout: Live Stream With Rachel Andrew

Building A CSS Layout: Live Stream With Rachel Andrew

Building A CSS Layout: Live Stream With Rachel Andrew

Vitaly Friedman



We’re opening up our Smashing TV webinars to everyone, and today you can follow along as Rachel Andrew builds a layout using CSS Grid and Flexbox.

In the session, Rachel will be building a component of a layout, talking through her thinking as she does so. Is Flexbox or Grid the right method to use? How will the component respond to different screen sizes? And, what about those old browsers?

If you are a Smashing Member then you will get the added benefit of being able to ask your own questions after the session.

Live Stream With Rachel Andrew: Dec 10, 5:00 PM GMT

The session will start today at 6:00 PM Berlin time (12:00 PM New York time) — broadcasted live below. Make sure to come back to this post to find your way directly to the live session!

A picture of Rachel Andrew and text stating the topic and time of her live session. December 10, 17:00 London time, about Building A CSS Layout. In the bottom right corner is an illustration of the Smashing Cat holding a video camera and shining the spotlight on Rachel.

And so the countdown begins!

From Smashing With Love

To help you stay on top of things, you can subscribe to our bi-weekly newsletter, in which we announce what’s happening in the Smashing universe. Each and every newsletter issue is written and edited with love and care. No third-party mailings or hidden advertising — promise!

You can also follow us on Twitter, Facebook, LinkedIn and even stay updated with our bi-weekly Smashing Podcast. Please do always feel free to reach out and share your thoughts with us — we love hearing from you!

Smashing Editorial
(ra, il)

Source: Smashing Magazine, Building A CSS Layout: Live Stream With Rachel Andrew

Struggling To Get A Handle On Traffic Surges

dreamt up by webguru in Uncategorized | Comments Off on Struggling To Get A Handle On Traffic Surges

Struggling To Get A Handle On Traffic Surges

Struggling To Get A Handle On Traffic Surges

Suzanne Scacca



(This is a sponsored article.) When a traffic spike hits, you want your website to be able to ride the wave instead of drown beneath it.

But how do you do that without constantly overspending on server resources in anticipation of a traffic surge that may or may not happen?

Part of it comes down to knowing how to read your data really well so that you can predict upcoming upticks (or slumps) in traffic. Even then, the ebbs and flows of your data don’t always accurately predict when a traffic surge will hit, how big it will be or how long it will last.

So, what you need to do is make sure your clients’ websites are prepared to take the hit and then sustain the traffic. What we’re going to do today is help you create a system of tools, monitoring, and testing that will enable your websites to do this.

How To Prepare Your Website For A Traffic Surge

To properly prepare your website for traffic surges, you need to set up a system that’s both proactive and reactive. Here’s what it should include:

1. Move Your Website to a Scalable Cloud Solution

The reason why traffic surges are able to wreak havoc on websites is because the hosting servers and resources are unprepared to handle them. Pure and simple.

That said, if you can’t predict when a surge will happen, how do you ensure your hosting has the capacity to handle the increased traffic load? Do you simply throw more money into an oversized hosting plan just in case?

Obviously, that’s not a cost-efficient way to deal with a potential traffic surge. Instead, you should look for a hosting solution that will scale to your needs.

Leverage DigitalOcean Hosting Technology

One such provider that can help with this is DigitalOcean, a developer of scalable cloud solutions.

What’s nice about this option is that DigitalOcean gives you optimized “droplets” to choose from. There’s no need to guess which plan is right for you — everything is clearly spelled out in DigitalOcean’s very useful use case recommendations:

Digital Ocean vCPU droplets

DigitalOcean sells virtual CPUs that are optimized for specific use cases. (Source: DigitalOcean) (Large preview)

As you can see, Droplets are easy-to-configure virtual machines built for different kinds of websites and applications. What’s more, they’re configured for speed and security right out of the box with KVM hypervisors, SSD storage and 40GbE connectivity.

What’s more, as your website’s traffic grows, it’s easy to upgrade the amount of storage and bandwidth within your Droplet. And if you can figure out the rhyme or reason for traffic surges later on, you can quickly scale your resources up and down to accommodate the changes in traffic.

That said, a scalable cloud hosting solution isn’t enough to deal with traffic surges. There are a couple more things you’ll need.

Use Load Balancers for Surges

If you’re unfamiliar with load balancing technology, let’s take a look at the difference between a website with and without it.

This is what happens when someone visits your website without a load balancer:

DigitalOcean - No Load Balancing graphic

A graphic from DigitalOcean on how visitors access a website without load balancing. (Source: DigitalOcean) (Large preview)

They log onto the Internet, enter your URL in their web browser or click on a link to it and then your server is supposed to deliver your website to their screen.

But if the amount of traffic requesting access to your site suddenly surges, this lone server may not be able to efficiently handle the load. This is why excessively high traffic surges can lead to painfully slow websites or no access to websites altogether.

With a load balancer, however, this is what happens to your web traffic:

DigitalOcean - Load Balancing graphic

A graphic from DigitalOcean on how visitors access a website when load balancing is implemented. (Source: DigitalOcean) (Large preview)

A load balancer serves as a sort of proxy for your server. This way, when traffic peaks, your server doesn’t have to struggle to handle the demand. Instead, the load balancer leverages multiple servers to balance out the growing volume of HTTP requests.

It’s kind of like distributing your workload amongst your team. Rather than continue to pile on the requests for team members who are already overloaded, you share the work with those who have the capacity for it.

Unlike real-world work distribution, however, load balancers do all of this behind the scenes and don’t need you to coordinate anything as it’s fully managed.

Take Advantage of Performance Monitoring and Backups

So long as you have the right amount of bandwidth and storage configured in your droplet, and load balancing activated, your website will be in good shape. It won’t be impervious to traffic surges, but it’ll be as close to it as you can get.

Just keep in mind that for all of the fortifying you do at the server level, it’s still important to have a contingency plan in place.

Your business (website) continuity plan should include all of the things you need to do to get your website back to normal, including how to:

  • Restore the website,
  • Investigate the event that led to it,
  • And reach out to visitors and customers who were impacted.

That said, there are some parts of your continuity plan that DigitalOcean can help with.

Automated backups are essential for any website, but they’re absolutely critical if you know that your website will be susceptible to traffic surges. 24/7 support is another must and is something DigitalOcean offers as well.

Another thing to look for is built-in performance monitoring — something I’m going to touch on further down in this post.

2. Optimize Your Assets

With a solid cloud hosting solution in place, you can certainly give your website the help it needs to survive a huge traffic surge. However, it can’t all fall on your host. You need to do your part to make your website “light” enough to serve over and over again to the onslaught of visitors.

Here are some things you can do to optimize your website and its assets for greater performance:

Enable Caching and Other File Optimizations

Want your digital assets to be easier to handle? Then, you’ll need the following optimizations configured:

Caching

There are a variety of ways to implement caching and speed up how quickly your website gets delivered to visitors’ browsers. You can do this at the server, page, browser database levels.

Your web host can help you configure server caching.

If you’ve built your website with a content management system like WordPress, you can install a caching plugin to take care of the website and database baching for you. (It’ll also do things like file minification, Gzip compression combine CSS and JavaScript files.)

You can always enable caching manually. You’ll use your cache headers and two mechanisms in particular — Cache-control and Expires — to configure how your content is cached.

Image Optimization

Don’t forget about your media. Image and video files can take up a lot of room on your server as well as impede how quickly your server works during a traffic surge. To optimize these assets, you should use file compression and resizing.

To compress images in bulk, I’ll use an online tool like TinyPNG or TinyJPG to handle it for me.

TinyPNG image compression

TinyPNG offers a quick and easy way to bulk-compress image assets. (Source: TinyPNG) (Large preview)

On average, I can usually cut my file sizes by about 75% with this one tool.

To further shrink the heft of your images, you should be resizing them. There’s no reason to upload full-sized assets to a website if the maximum width you’re going to use is 1280 pixels or thereabouts.

For this, I’ll either use my file software to do it all in one go or I’ll use an online service like Bulk Resize Photos.

Bulk Resize Photos image resizing tool

Bulk Resize Photos offers an easy way to bulk-resize image assets using a variety of resizing methods. (Source: Bulk Resize Photos) (Large preview)

There’s a lot of flexibility here in how images are resized, but I find that setting a max width usually works best.

Use Managed Databases

In addition to optimizing the assets you put into a website, you should take some care to optimize your databases. That said, it’s often easier said than done.

While I’m familiar with database cleanup and optimization plugins you can use with WordPress to keep things running more smoothly, that’s not going to help much when it comes to a traffic surge. You need something that will help your database continue to process incoming data requests even at a higher rate.

For that, you’d be best off with a managed database solution — something you can provision from DigitalOcean.

When a traffic surge is detected, managed database services simplify what needs to be done in order to scale your resources accordingly. There are no calculations needed; simply log into your account and add more resources as needed.

Another reason why managed services are ideal in these kinds of situations is because of their built-in high availability. And this isn’t just some blanket promise of 99.9% uptime. If you take a look at your host’s SLA, you’ll find that it will go to great lengths to prevent egregious amounts of downtime.

Add a CDN

There’s another layer of optimization to add to your site when traffic surges are a common occurrence: a CDN.

Content delivery networks are useful for a whole host of reasons. They’re great for serving websites to global visitors. They’re definitely handy for e-commerce websites that want to provide a faster checkout experience. And they provide additional speed, security, and failover for websites that occasionally encounter high upticks in traffic.

If you’re planning on using DigitalOcean to host your website, look to its Spaces product (with built-in CDN integration) for more efficient storage and delivery of your assets.

3. Analyze Your Traffic Reports

In general, it’s really important to be diligent about collecting data from your website. That’s especially so when battling traffic surges. Here’s why:

If there are predictable highs and lows in your website traffic, you’ll know when and how exactly to plan for them. This not only means optimizing your website and server to handle the traffic but having the right amount of staff on to monitor and manage it.

To do this, use Google Analytics to keep tabs on everything.

Google Analytics - charting out pageviews

A sample traffic and pageviews chart from Google Analytics. (Source: Google Analytics) (Large preview)

This example is a 12-month data pull that shows how many page views occurred every day (more or less). You can do this with other metrics like the number of users or sessions as well. The main goal, however, is to identify any sources of stress throughout the year, and excessive pageviews (or e-commerce conversions, if relevant) may be a more effective way to measure this.

You can see here that there were a number of high-highs and low-lows that took place:

Google Analytics - traffic surge searching

An example of how Google Analytics users would look for traffic surges in their data. (Source: Google Analytics) (Large preview)

Rather than take them at face value, cross-reference them against other data points to ensure that what you’re looking at was a traffic surge you can learn from.

Rule Out Web Development

For example, was there any on-site development going on on those days? If someone were repairing a bug or designing a new page, that could cause the pageview numbers to increase greatly.

If this happens a lot, it would be a good idea to automatically strip this data out of your reports at the Google Analytics level. You can do this from the Admin menu.

Go to View > Filters > Add Filter:

Google Analytics filters

Google Analytics users can remove their personal visit and pageview metrics from results. (Source: Google Analytics) (Large preview)

By filtering out data for your IP address as well as anyone else who may preview the site frequently for testing or content creation purposes, you’ll give yourself a more accurate view of your traffic levels.

Let’s say that the spikes in traffic weren’t from your internal team. Next, you’ll want to see if these traffic surges (or drops) occur at predictable intervals.

Look for Predictable Surges

If your website has been live for more than a year, you can use Google Analytics to see if there’s a correlation. Simply set your dates to compare against the same timeframe from the previous year:

Google Analytics date range comparison

Google Analytics allows users to compare two date ranges side-by-side. (Source: Google Analytics) (Large preview)

Then, look for overlaps in traffic surges:

Google Analytics date range comparison data

Google Analytics users can simultaneously review two date ranges for traffic surge predictability. (Source: Google Analytics) (Large preview)

In this case, there’s maybe only one or two notable spikes that occurred in both years. The first was in early April and the other was around mid-November.

If these were excessively large surges in both years — like at least five times more than the usual amount of traffic — I’d say they’d be worth investigating. In this example, however, it’s probably just a coincidence and they can be ruled out.

Check the Calendar

If you have identified a notable traffic surge in your data, the last thing to do is check it against your calendar.

What you’re looking for are events that could have caused the surge. Things like:

  • Holiday sales that generated a bunch of buzz.
  • Press releases that got picked up on major news wires.
  • Viral blog posts or email offers you sent out.

I’d also suggest looking at the traffic during the days or weeks following the traffic surge.

How did it taper off? Was it suddenly or a slow burn? Was the website able to improve its daily traffic numbers — even slightly — thanks to the surge?

Also, look at how the organization was impacted. This is especially important for e-commerce websites that provide customer support and product returns. Was there an uptick in post-sale activity after the surge? When did it hit? How long did it last for?

If you can figure out why the traffic surge happened (i.e. what event triggered it) and what the fallout was, you can actually use this to your advantage in the future. For example, if you know that a sale or viral post caused the surge, you can plan your server and staffing resources ahead of the next one.

Regardless of what you find looking at old reports, this needs to become part of your ongoing process. Set up Google Analytics to generate traffic reports and email them to you on a regular basis. This way, as traffic levels change — for good or bad — you’ll always be in the know with what’s going on and can adapt your strategy accordingly.

4. Real-time Performance Monitoring

Google Analytics will help you figure out what happened in the past and prepare more effectively for future traffic surges. Real-time performance monitoring, on the other hand, will allow you to react to traffic surges and other performance changes in the heat of the moment.

There are various tools you can use for real-time monitoring. Here’s just a sample of them:

Frontend Performance Monitoring

When page speed suddenly begins to deteriorate or your website goes down, there’s no time to waste. That said, it shouldn’t be up to you to regularly log into your website to make sure everything’s running fine.

Instead, you can use an uptime and speed monitoring service like Pingdom:

Pingdom monitoring and alerting services

Users can automate uptime, user and speed monitoring with Pingdom. (Source: Pingdom) (Large preview)

It handles the tedious job of monitoring your website for upticks in traffic, problems with speed or uptime as well as issues detected at checkout. It will also serve you real-time notices so you can take care of issues caused by traffic surges before they get too bad.

This way, you’ll only need to give your website the attention and care it needs when a traffic surge has a negative impact on performance instead of constantly worrying about it.

Backend Performance Monitoring

While it’s great to have a frontend monitoring service to tell you when traffic’s out of whack, it’s not enough. You need to know what’s going on on the backend as well.

Of course, with a managed hosting solution, you’ll get some help from your provider. However, it’s a good idea to familiarize yourself with your server metrics so you can be proactive about fighting off the devastating effects of surges.

Here are some of the metrics to keep an eye on:

  • Hosting resources (like memory and disk space),
  • Your application performance (like error rates and resource usage),
  • Connectivity (like latency and bandwidth utilization).

Become acquainted with these key metrics so you’re never scrambling to figure out what’s going on with your website or how to fix it.

Now, with DigitalOcean, you won’t just get access to these handy metrics. It will set you up with real-time monitoring and alerts, too. And that’s not all.

The problem with many monitoring systems is that they’re just that: they look for outages, errors, and instability, but it’s still up to you to take action. With DigitalOcean, though, you can automate certain actions to take place when specific scenarios are detected.

For example, let’s say your website is receiving a much larger rush of traffic than you had anticipated for the holiday sale. Your resources are depleting too fast, which would normally put a website in risk of slowing to a crawl or crashing altogether. But in this case, the monitoring mechanism has noted the issue and your auto-scaling action has been triggered.

Imagine how useful it would be to automate your server’s response to certain events. You could spend less time worrying about how to restore your website and instead focus on how to keep optimizing your server assets to sustain the high levels of traffic.

Wrapping Up

If your clients’ websites or PWAs aren’t ready for a traffic surge, it could spell major trouble for their businesses once the dust settles. And it’s not just downtime or slow-loading pages that will cost them (or you).

Having all of those extra visitors see a website that’s in ill shape — from broken checkouts or forms to malware infections — will hurt your business, too.

Rather than cross your fingers or tell yourself that your website isn’t big enough or popular enough to experience one of those traffic surges, be prepared. By starting with a practical cloud hosting solution from DigitalOcean and then optimizing your server, assets and processes surrounding them, you’ll improve your website’s chances of not only surviving a surge intact but greatly profiting from it.

Smashing Editorial
(ra, yk, il)

Source: Smashing Magazine, Struggling To Get A Handle On Traffic Surges

Brand Illustration Systems: Drawing A Strong Visual Identity

dreamt up by webguru in Uncategorized | Comments Off on Brand Illustration Systems: Drawing A Strong Visual Identity

Brand Illustration Systems: Drawing A Strong Visual Identity

Brand Illustration Systems: Drawing A Strong Visual Identity

Yihui Liu



In the flood of online content, companies live or die by their brand image. A brand image has to express the company’s message and connect with users, who should instantly recognize it across different media, even away from the company’s website and marketing content. A strong brand image is like an anchor, helping ensure user attachment and fix value associations.

Brand image is typically built up from different visual elements — logos, color palette, a particular font. Alongside these, illustrations are another powerful means of visual communication which are more and more in demand for online UI.

Why? Because illustrations introduce narrative elements to visual content and allow for subtler emotions or more complex situations to be expressed. Including human figures make ideas active and accessible, often in a light-hearted or whimsical way. Illustrations turn away from realism and let you build the world as the brand sees it.

This is an important piece in the larger puzzle of online campaigns. Digital design, using vectors, favors clean, bold images which translate well into distinctive branding illustrations. Rather than single-use designs, these online illustrations are being used as part of comprehensive visual systems. Images in an illustration system share a unifying mood or style, which makes them identifiable with the brand’s wider image and message, even as they represent different aspects of a product or service.

Illustration systems increase the range and depth of messages a company communicates visually about itself, from mission statements to practical product support, while strengthening brand image.

Design Process

So how should you go about designing an effective brand illustration system? I take you through my design process, with examples from the recent overhaul we undertook at Spacebase.

Research The Brand

First thing’s first — know the brand you’ll be designing for. This might sound obvious but don’t underestimate the work involved. Even if you think you already have a working knowledge, it’s worth investing time to refresh or deepen your understanding of the brand.

Dig into the culture behind the company and its products or services. What is their principal message, what forms do their existing visual identity take, and what is the direction the company wants to grow in?

Investigating this thoroughly at the beginning will save you headaches and dead-ends later on.

Understand Stakeholder Needs

As well as doing your own research, you’ll need to speak to the stakeholder. This connection is crucial to the success of your design — so involve them early and keep them updated with the process.

Get answers to key questions about the design: where will the illustrations appear and what do they need to express? What kind of situations and emotions might they play on? What are the technical parameters you need to work within?

At this stage, the stakeholder might not be very clear about what they want. Nonetheless, you should listen carefully to their input and consider their expectations in relation to the goals of the business and their wider brand image.

At Spacebase, the aim was to make the online booking platform more approachable and human. I thought deeply about the relationship between meeting rooms and the people who use them. We wanted to capture the brand message of breaking out of regular workspaces, into new and exciting ones, in a smooth, convenient, supportive way. The designs had to come across as friendly, modern, and simple.

Organize Inspiration

A moodboard is essential for getting to grips with the input you receive and organizing your ideas. Collect images from competitors or companies in the field with similar qualities to your intended goal and then compile these into a resource. Looking at what inspires you can be a guide to the overall tone you want to achieve and suggest the way to a first iteration. This is also useful material to show the stakeholders, as it gives them a sense of the direction the illustrations will take before the work of creating concepts begins.

Some of the brand illustrations which inspired me. (Large preview)

For the Spacebase design, I was particularly inspired by the Airbnb, IBM, and Shopify illustrations. The simple design of people and spaces really stood out for me, and I was interested in how the muted color palettes keep the illustrations focused, without overwhelming the pictorial elements. They produce an impression of calm, warmth and inclusivity.

Concept Creation

After researching and moodboarding, I start sketching on Adobe Illustrator. Sometimes I use a Wacom tablet but mainly I stick to my mouse with the Pen tool. I use shapes to create a basic structure, and use the Pen tool to add detail and enhance the basic outline.

Drawing onscreen. (Large preview)

Bear in mind that the images you design should cohere to form a uniform system, not form standalone scenes. So even if this is the first iteration — aim to give the illustrations a distinctive flavor which you will be able to replicate across different designs in the future. This might not come at first but feel your way towards an internal logic for the branding illustrations and aim to be consistent with this in your decisions.

With the Spacebase illustrations, we focused on human characters and color scheme as ways to keep the images in line with other visual branding elements.

The evolution of the email banner for booking confirmations. (Large preview)

I started drawing the human characters with basic outlines, to get a feel for the emotions they would represent and how they would inhabit interior spaces. I wanted flowing lines to give them dynamic profiles and suggest movement. I also wanted to avoid anything that looked too heavy — lightweight and friendly were keywords. Diversity was also important to me, as Spacebase is an international company, and I always want viewers of illustrations to see themselves.

Alongside the human figures, I wanted the objects and environments to have a distinct style — abstract, futuristic and design-forward. We wanted to show interiors which are bright, beautiful, involving the users in the spatial dynamic, and with objects that suggest an idealized professional working environment. At the same time, these were not to distract attention. Spacebase is all about inspiring meeting rooms but their brand is more about the people who use these spaces. This took many iterations to get just right.

Exploring different lines and color palettes. (Large preview)

After the sketches had been refined, I thought about a color scheme. Colors are powerful and evoke instant reactions — so it was important to me not to overwhelm the illustrations. I wanted subtle shades to enhance and complement the scenes. The color scheme should also reflect the brand’s personality and match their other visual elements. For the Spacebase color scheme, it was important to break from monochrome and stay away from the drab colors normally associated with meeting rooms. Their main branding color is orange so I balanced this with cooler pastel tones: purple, sky blue, grey, and mustard yellow.

Feedback

After the first iteration, get all the feedback you can.

Clearly, you need to speak to the main stakeholder for their take on your design. But also try to seek out the opinion of users or colleagues, if you have any — especially people who don’t work in design. Their responses can guide you toward the next steps you should take to improve the illustrations. Design for real target users, rather than imagined needs.

Overall I prefer to hear about people’s frustrations overhearing their praise. Accolades are nice but not terribly useful. Getting to know the pain points of users (or something that does not make sense to them visually), indicates where to focus your attention. Even if they don’t agree with your own ideas, the stakeholders and their users must love the design. Good design is in the eye of the user.

One of the illustrations I struggled with most at Spacebase was the banner for cancellation emails. Customers receive these either when they have canceled their own booking or when Spacebase has had to cancel it.

Nobody likes bad news, so I wanted the design to share their disappointment and suggest sympathy and understanding. Early versions were too heavy, though. Colleagues said it felt like the end of the world, that some drastic judgment had been passed. It took a long time (and many iterations) to move in a different direction.

The design for booking cancellation took many iterations. (Large preview)

In the end, we removed the human figures altogether. This was a way to avoid the illustration becoming too emotionally charged and give it a more neutral feel. The latest iteration minimizes the drama — it acknowledges an issue through semi-abstract representations of screens but also points to a future beyond the cancellation.

Reference Library

As you create your illustrations, it’s useful to build up a library of the different elements you have already used. This means you can refer back to them in the future and make sure you keep the style and feel consistent across different illustrations. Keeping your illustrations coherent is key to the overall effectiveness of your system in the long-term.

Image library for human figures. (Large preview)

Image library for objects. (Large preview)

Repeat

Be prepared to go through this process many times.

We went through many stages to get to the final iterations. (Large preview)

Constant iteration is the most important part of producing a successful visual identity. Keep creating new versions, obtaining feedback, and drafting new iterations. Everything is a prototype and you have to stay open to tweaks in order to make your branding as relatable to users as possible. Keep stakeholders updated and involved and be ready for unexpected turns — design is also a journey and each step gets you closer to an exceptional result.

As long as you immerse yourself in research and feedback, you’ll be heading in the right direction. That’s what I find most rewarding about design — I am motivated by the ongoing process and when I feel like I’m constantly improving upon things, I am happy to be doing what I do.

The Spacebase branding illustrations have helped consolidate brand identity. (Large preview)
Smashing Editorial
(cc, yk, il)

Source: Smashing Magazine, Brand Illustration Systems: Drawing A Strong Visual Identity

How To Design Profitable Sales Funnels On Mobile

dreamt up by webguru in Uncategorized | Comments Off on How To Design Profitable Sales Funnels On Mobile

How To Design Profitable Sales Funnels On Mobile

How To Design Profitable Sales Funnels On Mobile

Suzanne Scacca



A sales funnel is a set of invisible steps you lay before visitors that takes them from the point of entry to the desired action. There are three stages in a sales funnel:

  • Top of the funnel (TOF),
  • Middle of the funnel (MOF),
  • Bottom of the funnel (BOF).

Why do we call these three stages a funnel? Because, together, they form a funnel-like shape:

Sales funnel drawing

A sales funnel and its three key stages: top-of-funnel, middle-of-funnel, bottom-of-funnel marketing. (Large preview)

At the top are all the people who enter your website or PWA. At the bottom are those who’ve bought something. The reason it tapers off is because your funnel sheds visitors and leads along the way who aren’t a good fit.

This process actually occurs with or without your help. (It’s just more effective if you take the time to carefully construct it.) Open Google Analytics and locate the tab called “Users Flow” under “Audience” or “Behavior Flow” under “Behavior”.

You’ll see something like this:

Google Analytics Users Flow

An example of using Google Analytics to chart the natural flow of visitors through a website. (Source: Google Analytics) (Large preview)

In this particular user flow, we’re looking at how traffic from various mediums (e.g. organic search, third party referrals, social media) moves through the website.

The shape isn’t as explicit as a funnel, but you can see that’s exactly what’s happening with the numbers. There were 4500 sessions to start. By the second interaction, only 143 remained.

By actually designing your sales funnels, though, you can improve your results and make them more predictable. You’ll do this by driving the right kind of leads into your website, laying down a clear set of steps for them to take and, hopefully, maximizing the number of them that convert.

To do this, you’ll need to understand what’s going on in the minds of your leads at every part of the funnel and then design an experience that caters to that exact mindset.

Let’s look at some examples.

Designing For Top Of The Funnel

Someone discovers your website or brand on Google, through a social media post or from a personal referral. So, they visit the website on a fact-finding mission.

TOF marketing is all about discovery. You want to take visitors from:

Sounds interesting.

To:

This is promising! I should [subscribe to the newsletter/like them on Facebook/grab this free downloadable].

Here is an example of how you might build out the Awareness part of the funnel:

Step 1: Show Up in the Right Places

Your sales funnel doesn’t begin on your website or app. It begins in places like Google search results, like this example for the Atlassian enterprise software company:

Google search results kick off TOF marketing

This is the first step of the TOF funnel: a Google search result for Atlassian. (Source: Atlassian) (Large preview)

In order for visitors to enter the funnel, you have to increase the exposure of your brand in places like:

  • Organic Google search results,
  • Social media posts,
  • Review site recommendations,
  • Content like blog posts and podcasts.

You can also use paid search and social ads to boost brand awareness, but be careful. As this WordStream infographic demonstrates:

WordStream infographic SEO vs. PPC

The WordStream infographic shows how different keywords perform better in SEO vs. PPC placements. (Source: WordStream infographic) (Large preview)

Paid placements are much more attractive to consumers who are ready to buy (i.e. at the bottom of the funnel). Top of the funnel consumers, however, are simply on a fact-finding mission, which is why you’d be best off finding organic placements (in search and elsewhere) to put in front of them.

Step 2: Help Them Learn More

Once visitors enter your website, you want to make it as easy as possible for them to get the information they need. On mobile, that means giving them a shortcut above the fold:

Atlassian Learn More button

The Atlassian home page invites visitors to ‘Learn more’. (Source: Atlassian) (Large preview)

There’s nothing complicated about what the CTA button is asking visitors to do. No pressure to buy. No snarkiness or attitude. Just a straight-forward, “Let us help you discover our products.”

Step 3: Give Them a Little Room

It’s not as though Atlassian is some unknown brand. It’s the developer of products like Jira, Trello, and Bitbucket. And, yet, its first step is to invite visitors to take time to learn more. More websites would be better off if it had as welcoming of an approach.

The next step in this process gives visitors the time and space to research Atlassian’s products:

Atlassian products

Atlassian encourages visitors to take time learning about all of the software available. (Source: Atlassian) (Large preview)

There are no pesky pop-ups on this page to distract visitors from the list of products. There are no ads or banners drawing attention to special offers or anything like that. There aren’t even any “Buy Now” buttons. Each product description is followed by a “Learn more” button.

This is perfect for the business owner or CTO who simply wants to gather up facts on software options before making any buying decisions.

Step 4: Make a Connection

Because these are top-of-funnel visitors, there’s no way you’re going to get them to convert on the spot — especially for enterprise software. So, your best bet is to throw a soft pitch their way.

In the case of Atlassian, it offers a free trial:

Atlassian 'Try it free'

Atlassian doesn’t push TOF visitors to buy right away. A free trial is offered instead. (Source: Atlassian) (Large preview)

No credit card is required at this time. This is simply about letting prospective users learn even more about the product without the pressure of a price tag.

If you have a product that they can discover first-hand, this is a great way to earn the trust of TOF consumers and fast-track them to conversion.

If you don’t have a product that can be tested, that’s fine. There are other ways to help your users learn more and stay connected through email. A lead magnet like a downloadable checklist or ebook is one way to do it. A subscription to your blog is another. Or you might just invite them to follow you on social.

However you make that connection, make sure you’re only asking for the bare minimum:

Atlassian free trial form

Atlassian free trial form asks for only required user data. (Source: Atlassian) (Large preview)

If you’re thinking of going the route of a lead magnet, read this guide for tips on designing the lead gen landing page.

Designing For Middle Of The Funnel

For businesses with shorter sales cycles (i.e. ones with less complicated and cheaper products), this part of the funnel doesn’t usually exist. For those that do need it (like service providers and SaaS companies), though, it’s a critical part of the sales process.

We’ve already established that leads that get to this stage are interested since they shared their email address or connected with you in some other manner. Now, it’s your job to feed them with free value and insights so they go from:

This is promising!

To:

This is exactly what I’ve been looking for.

MOF marketing is all about building relationships and nurturing trust while you give your prospects time to consider whether the purchase is worth it.

Here is an example of how you might build out the Nurturing part of the funnel:

Step 1: Keep in Touch

Your website has successfully educated visitors enough to become interested leads. Now, you have to actually do something with that connection.

If they subscribed by email, started a free trial or downloaded a lead magnet, they should begin receiving email communications.

If they followed your brand on social, then they should start seeing your posts on a regular basis.

Just keep in mind that these messages shouldn’t be about the hard sell. At this stage, all you’re doing is providing extra value and building trust in the process. If you contact them at the right frequency and with the right kind of content, though, they’ll eventually get to a point where there’s no doubt in their minds that they want to buy from you.

For example, I was on Google recently looking for “spas near Providence” (where I’m moving to early next year). I always book a spa session for my birthday and was just curious what kind of options I’d be working with.

In my Google Maps results, I discovered The Bodhi Spa. It had great reviews, it was close to where I was moving and it had the kind of spa services I was interested in. So, I figured, why not click and learn more?

I was happy with what I saw, so I decided to follow them on Instagram so they could stay top-of-mind until I move to Providence. This is the exact thing you want to happen with your TOF prospects.

And the way the spa continues to stay in touch is the exact thing you (or whoever handles the marketing for the website you built) should be doing in the MOF:

The Bodhi Spa Instagram post

A recent Instagram post from The Bodhi Spa. (Source: The Bodhi Spa) (Large preview)

What’s great about this example is that the spa doesn’t overdo it. They only post once every week or two — just enough to keep followers (and interested prospects) engaged:

The Bodhi Spa image posts

The Bodhi Spa posts enticing photos on Instagram every week or two. (Source: The Bodhi Spa) (Large preview)

Another nice tip you can leverage from this example is how the posts are written.

Sure, the Instagram page is meant to be promotional. However, the posts themselves aren’t written in a sales-centric tone. For instance, the last post that went up simply says:

Gimme some #happyhormones #plungepool #bodhispa #heatupcooldownrelaxrepeat

The enticing image and the relaxed message work well for MOF marketing. It’s like, “Hey, we’re here whenever you’re ready.” And, for my own purposes, that’s perfect. As an interested prospect, I’m glad I’ll have these kinds of updates to remind me to book a session once I’m in town.

Step 2: Always Include Your Link

When you get close to the bottom of the funnel, your links should go deeper into the site. For instance, let’s say you were to run a Google ad for a specific product or sale. The link in that ad wouldn’t go to your home page. It would go to a targeted landing page that would shortcut the whole process.

MOF prospects aren’t at that stage yet, so you should still send them to your home page or some other top-level page on your website (just not a navigation-less landing page).

The Bodhi Spa, for example, points all Instagram visitors to its home page:

The Bodhi Spa Instagram link

The Bodhi Spa includes a link to its home page on Instagram. (Source: The Bodhi Spa) (Large preview)

Most newsletters and email communications will do the same, with a link at the very top or bottom of the email pointing to the home page.

Just make sure the link you send them to naturally directs them through the middle-of-funnel steps.

Step 3: Point Them in the Right Direction

For longer sales cycles, make sure your website is fully prepared to provide answers to interested prospects — both directly and indirectly.

As far as the direct approach goes, a contact form and live chat would be useful. You should exhaust the indirect options before you go too crazy with setting up contact channels though.

As far as the indirect approach goes, your website should be like a self-guided journey. That way, when they land on the home page, it’s clear which directions they can go in:

The Bodhi Spa 'Begin Your Journey'

The home page of The Bodhi Spa has a ‘Begin Your Journey’ button. (Source: The Bodhi Spa) (Large preview)

The home page gives visitors two ways to go:

  • Begin your journey,
  • Or access the menu.

Now, as a first-time visitor at the top of the funnel, the prospective customer likely scrolled through the home page to look for an opportunity to quickly learn more:

Bodhi Spa 'Learn More'

The home page of The Bodhi Spa PWA points visitors to ‘Learn More’. (Source: The Bodhi Spa) (Large preview)

As a return visitor, however, this part of the home page opens up a new pathway that they likely hadn’t considered the first time around: “Book Now”. Even the order in which the buttons appears suggests that that’s the order in which visitors should interact with them.

That said, MOF prospects aren’t necessarily ready to buy on a second, third or even fourth visit. While they’re not in the initial “Is this worth it?” discovery phase, they’re still trying to gather all the facts and make up their mind.

(And if they are sold on your offer that quickly, that’s great! You have the button there, ready for them to click.)

Step 4: Reinforce Your Value

Even though this is a mobile website (or PWA) where content should be kept to a minimum, it’s important to include all details that will make-or-break their decision to buy. Don’t stuff them into the home page or a single services or products page though.

Lay it out in your navigation like this:

The Bodhi Spa navigation

The Bodhi Spa has a dedicated page for each of its services and its company story. (Source: The Bodhi Spa) (Large preview)

At first glance, you might not think this website has that much information since the home page is so straight and to the point. However, this navigation digs deep into the spa’s offerings along with the company’s story.

Also, take note of the FAQs included under “Our Journey”. That’s a great touch. If you know that prospects tend to come to you with the same questions, don’t make them use the “Connect” or “Contact” page to fill out a form. It not only clogs up your inbox with questions, but it forces them to do extra work.

Make your website do most of the work instead.

And if it’s not prepared to answer all of the questions and ease all of their doubts, then it’s time to revisit the structure, content and design of your site. The MOF is the trickiest part of the sales funnel. If you can successfully bring prospects back to the site from your mobile marketing efforts, don’t let it go to waste.

Designing For Bottom Of The Funnel

Okay, so your prospects know what you’re offering and they’re ready to buy. All they need is one last push through a seamless and effortless checkout so that they go from:

This is exactly what I’ve been looking for.

To:

Where’s my credit card?

Here is an example of how you might build out the Conversion part of the funnel:

Step 1: Make Your Offer Clear

If your website were a flesh-and-blood salesperson, this is the point of the call or meeting where they’d ask, “Can I have your business?” There’s no point in beating around the bush on your website or your marketing either.

For MOF visitors who’ve finished checking up on you and your offering, you’ll want to boldly make your offer where they’ll easily see it, just as the Boston Calling Music Festival does:

Boston Calling Music Festival tickets

The Boston Calling Music Festival website clearly and boldly published its tickets. (Source: Boston Calling Music Festival) (Large preview)

For TOF visitors who don’t need much convincing or nurturing, you can directly post your offer to them over email or social media:

Boston Calling Music Festival email

An email for tickets to the Boston Calling Music Festival. (Source: Boston Calling Music Festival) (Large preview)

Just make sure your sales funnel can be truncated into TOF and BOF in that case.

For something like a concert where the offer is clear-cut, going this route would be fine. However, think about something like a professional conference or retreat where tickets run upwards of $1000 and the cost of travel adds even more weight to that total. If you’re asking for a huge commitment of time, money or effort from your customers, don’t skip the MOF marketing steps.

Once you’re in this stage, though, you can put aside all of that education you did earlier. All you need to do now is sell, so make sure the “Buy” button is as clear as day wherever you put it.

Step 2: Summarize Their Purchase in the Cart

Whether customers are putting products into a shopping cart, purchasing tickets to an event or signing up for your SaaS, it’s a good idea to quickly remind them of what they’re about to buy before you hop into checkout.

On the Cart page, provide a summary like this:

Boston Calling ticket summary

The Boston Calling tickets page reminds visitors what they’re buying before they check out. (Source: Boston Calling Music Festival) (Large preview)

The Cart page makes sure that buyers fully understand what it is they’re buying. That way, they don’t go through checkout, only to realize at the email confirmation stage that they bought something they can’t use or on dates they’re unavailable. This’ll reduce the numbers of emails, calls or refund requests you have to handle post-sale.

Step 3: Streamline Checkout

Last but not least, make it easy for your customers to get through checkout.

The first thing to do is simplify the sign-in/sign-up process:

Boston Calling sign-in process

The Boston Calling Music Festival website provides multiple options to sign in or up for tickets. (Source: Boston Calling Music Festival) (Large preview)

Customers can sign in with an existing account or they can sign up for a new one. And the sign-up process has two options as well:

  1. Create an account with Facebook,
  2. Create an account from-scratch.

You can’t see it here, but the form is enabled with autofill technology, which made filling it out lightning-fast.

The rest of the checkout process should be as easy to get through. One way to do this is by using dropdowns with the most popular options already selected (when it makes sense). That’ll save customers time having to manually enter their data:

Boston Calling auto-fill

Boston Calling auto-fills some checkout fields to speed up the process. (Source: Boston Calling Music Festival) (Large preview)

That said, even the most streamlined of checkout processes can get tiresome if there’s a lot of data to collect. But Boston Calling does a nice job of this, always giving customers a look at how many more steps are to come:

Boston Calling ticket checkout steps

The Boston Calling checkout process clearly lays out each step of the process. (Source: Boston Calling Music Festival) (Large preview)

Even though there are four steps customers have to complete to get their music festival tickets, the last two steps are easy. Secure Ticket provides information on how their tickets are protected in case of inclement weather, disaster or some other reason for cancellation. And the last one is a final check to ensure they purchased the right ticket and are ready to submit their payment information.

It’s a beautiful system from start to finish and ensures that as many interested concert-goers book their tickets as possible.

Wrapping Up

Building a sales funnel into a website can be a huge relief for the people who run it. That’s because a carefully designed pathway can usher your visitors from the point of entry to conversion without much oversight or intervention from you at all.

Aside from some email or social marketing along the way (which can be automated), the rest of the work is done by your website to convert the best-fit customers. Plus, by building your sales funnels for mobile, you’ll ensure that you’ve created the most efficient pathways for your visitors regardless of which device they’re on.

Smashing Editorial
(ra, yk, il)

Source: Smashing Magazine, How To Design Profitable Sales Funnels On Mobile

Collective #571

dreamt up by webguru in Uncategorized | Comments Off on Collective #571




C571_csslayout

CSS Layout

A fantastic collection of popular layouts and patterns made with CSS. Made by Phuoc Nguyen.

Check it out


C571_adventcode

Advent of Code 2019

Advent of Code is an Advent calendar of small programming puzzles for a variety of skill sets and skill levels that can be solved in any programming language you like.

Check it out






C571_drum

DrumBot

Play real-time music with a machine learning drummer that drums based on your melody. Read more about it in this article.

Check it out







C571_ff71

Firefox 71: A year-end arrival

A plethora of new developer tools features including the web socket message inspector, console multi-line editor mode and more are coming in the new Firefox version.

Check it out






Collective #571 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #571

How To Build A Real-Time Multiplayer Virtual Reality Game (Part 2)

dreamt up by webguru in Uncategorized | Comments Off on How To Build A Real-Time Multiplayer Virtual Reality Game (Part 2)

How To Build A Real-Time Multiplayer Virtual Reality Game (Part 2)

How To Build A Real-Time Multiplayer Virtual Reality Game (Part 2)

Alvin Wan



In this tutorial series, we will build a web-based multiplayer virtual reality game, where players will need to collaborate to solve a puzzle. In the first part of this series, we designed the orbs featured in the game. In this part of the series, we will add game mechanics and setup communication protocols between pairs of players.

The game description here is excerpted from the first part of the series: Each pair of players is given a ring of orbs. The goal is to “turn on” all orbs, where an orb is “on” if it’s elevated and bright. An orb is “off” if it’s lower and dim. However, certain “dominant” orbs affect their neighbors: if it switches state, its neighbors also switch state. Player 2 can control even-numbered orbs, and player 1 can control odd-numbered orbs. This forces both players to collaborate to solve the puzzle.

The 8 steps in this tutorial are grouped into 3 sections:

  1. Populating User Interface (Steps 1 and 2)
  2. Add Game Mechanics (Steps 3 to 5)
  3. Setup Communication (Steps 6 to 8)

This part will conclude with a fully functioning demo online, for anyone to play. You will use A-Frame VR and several A-Frame extensions.

You can find the finished source code here.

The finished multiplayer game, synchronized across multiple clients
The finished multiplayer game, synchronized across multiple clients. (Large preview)

1. Add Visual Indicators

To start, we will add visual indicators of an orb’s ID. Insert a new a-text VR element as the first child of #container-orb0, on L36.

<a-entity id="container-orb0" ...>
    <a-text class="orb-id" opacity="0.25" rotation="0 -90 0" value="4" color="#FFF" scale="3 3 3" position="0 -2 -0.25" material="side:double"></a-text>
    ...
    <a-entity position...>
        ...
    </a-entity>
</a-entity>

An orb’s “dependencies” are the orbs it will toggle, when toggled: for example, say orb 1 has as dependencies orbs 2 and 3. This means that if orb 1 is toggled, orbs 2 and 3 will be toggled too. We will add visual indicators of dependencies, as follows, directly after .animation-position.

<a-animation class="animation-position" ... />
<a-text class="dep-right" opacity="0.25" rotation="0 -90 0" value="4" color="#FFF" scale="10 10 10" position="0 0 1" material="side:double" ></a-text>
            <a-text class="dep-left" opacity="0.25"rotation="0 -90 0" value="1" color="#FFF" scale="10 10 10" position="0 0 -3" material="side:double" ></a-text>

Verify that your code matches our source code for Step 1. Your orb should now match the following:

Orb with visual indicators for the orb’s ID and IDs of the orbs it will trigger

Orb with visual indicators for the orb’s ID and IDs of the orbs it will trigger (Large preview)

This concludes the additional visual indicators we will need. Next, we will dynamically add orbs to the VR scene, using this template orb.

2. Dynamically Add Orbs

In this step, we will add orbs according to a JSON-esque specification of a level. This allows us to easily specify and generate new levels. We will use the orb from the last step in part 1 as a template.

To start, import jQuery, as this will make DOM modifications, and thus modifications to the VR scene, easier. Directly after the A-Frame import, add the following to L8:

https://code.jquery.com/jquery-3.3.1.min.js

Specify a level using an array. The array will contain object literals that encode each orb’s “dependencies”. Inside the <head> tag, add the following level configuration, :

     <script>
var orbs = [
  {left: 1, right: 4},
  {},
  {on: true},
  {},
  {on: true}
];
    </script>

For now, each orb can only have one dependency to the “right” of it and one to the “left” of it. Immediately after declaring orbs above, add a handler that will run on page load. This handler will (1) duplicate the template orb and (2) remove the template orb, using the provided level configuration:

$(document).ready(function() {

  function populateTemplate(orb, template, i, total) {}
  
  function remove(selector) {}

  for (var i=0; i < orbs.length; i++) {
    var orb = orbs[i];
    var template = $('#template').clone();
    template = populateTemplate(orb, template, i, orbs.length);
    $('#carousel').append(template);
  }

  remove('#template');
}

function clickOrb(i) {}

Next, populate the remove function, which simply removes an item from the VR scene, given a selector. Fortunately, A-Frame observes changes to the DOM, and thus, removing the item from the DOM suffices to remove it from the VR scene. Populate the remove function as follows.

  function remove(selector) {
    var el = document.querySelector(selector);
    el.parentNode.removeChild(el);
  }

Populate the clickOrb function, which simply triggers the click action on an orb.

function clickOrb(i) {
  document.querySelector("#container-orb" + i).click();
}

Next, begin writing the populateTemplate function. In this function, begin by getting the .container. This container for the orb additionally contains the visual indicators we added in the previous step. Furthermore, we will need to modify the orb’s onclick behavior, based on its dependencies. If a left-dependency exists, modify both the visual indicator and the onclick behavior to reflect that; the same holds true for a right-dependency:

function populateTemplate(orb, template, i, total) {
    var container = template.find('.container');
    var onclick = 'document.querySelector("#light-orb' + i + '").emit("switch");';

    if (orb.left || orb.right) {
      if (orb.left) {
        onclick += 'clickOrb(' + orb.left + ');';
        container.find('.dep-left').attr('value', orb.left);
      }
      if (orb.right) {
        onclick += 'clickOrb(' + orb.right + ');';
        container.find('.dep-right').attr('value', orb.right);
      }
    } else {
      container.find('.dep-left').remove();
      container.find('.dep-right').remove();
    }
}

Still in the populateTemplate function, set the orb ID correctly in all of the orb and its container’s elements.

    container.find('.orb-id').attr('value', i);
    container.attr('id', 'container-orb' + i);
    template.find('.orb').attr('id', 'orb' + i);
    template.find('.light-orb').attr('id', 'light-orb' + i);
    template.find('.clickable').attr('data-id', i);

Still in the populateTemplate function, set the onclick behavior, set the random seed so that each orb is visually different, and finally, set the orb’s rotational position based on its ID.

    container.attr('onclick', onclick);
    container.find('lp-sphere').attr('seed', i);
    template.attr('rotation', '0 ' + (360 / total * i) + ' 0');

At the conclusion of the function, return the template with all the configurations above.

    return template;

Inside the document load handler and after removing the template with remove('#template'), turn on the orbs that were configured to be on initially.

$(document).ready(function() {
  ...
  setTimeout(function() {
    for (var i=0; i < orbs.length; i++) {
      var orb = orbs[i];
      if (orb.on) {
        document.querySelector("#container-orb" + i).click();
      }
    }
  }, 1000);
});

This concludes the Javascript modifications. Next, we will change the template’s default settings to that of an ‘off’ orb. Change the position and scale for #container-orb0 to the following:

position="8 0.5 0" scale="0.5 0.5 0.5"

Then, change intensity for #light-orb0 to 0.

intensity="0"

Verify that your source code matches our source code for Step 2.

Your VR scene should now feature 5 orbs, dynamically populated. One of the orbs should furthermore have visual indicators of dependencies, like below:

All orbs are populated dynamically, using the template orb
All orbs are populated dynamically, using the template orb (Large preview)

This concludes the first section in dynamically adding orbs. In the next section, we will spend three steps adding game mechanics. Specifically, the player will only be able to toggle specific orbs depending on the player ID.

3. Add Terminal State

In this step, we will add a terminal state. If all orbs are turned on successfully, the player sees a “victory” page. To do this, you will need to track the state of all orbs. Every time an orb is toggled on or off, we will need to update our internal state. Say that a helper function toggleOrb updates state for us. Invoke the toggleOrb function every time an orb changes state: (1) add a click listener to the onload handler and (2) add a toggleOrb(i); invocation to clickOrb. Finally, (3) define an empty toggleOrb.

$(document).ready(function() {
  ...
  $('.orb').on('click', function() {
    var id = $(this).attr('data-id')
    toggleOrb(id);
  });
});

function toggleOrb(i) {}

function clickOrb(i) {
  ...
  toggleOrb(i);
}

For simplicity, we will use our level configuration to indicate game state. Use toggleOrb to toggle the on state for the ith orb. toggleOrb can additionally trigger a terminal state if all orbs are turned on.

function toggleOrb(i) {
  orbs[i].on = !orbs[i].on;
  if (orbs.every(orb => orb.on)) console.log('Victory!');
}

Double-check that your code matches our source code for Step 3.

This concludes the “single-player” mode for the game. At this point, you have a fully functional virtual reality game. However, you will now need to write the multiplayer component and encourage collaboration via game mechanics.

4. Create Player Object

In this step, we will create an abstraction for a player with a player ID. This player ID will be assigned by the server later on.

For now, this will simply be a global variable. Directly after defining orbs, define a player ID:

var orbs = ...

var current_player_id = 1;

Double-check that your code matches our source code for Step 4. In the next step, this player ID will then be used to determine which orbs the player can control.

5. Conditionally Toggle Orbs

In this step, we will modify orb toggling behavior. Specifically, player 1 can control odd-numbered orbs and player 2 can control even-numbered orbs. First, implement this logic in both places where orbs change state:

    $('.orb').on('click', function() {
        var id = ...
        if (!allowedToToggle(id)) return false;
        ...
    }
...

function clickOrb(i) {
    if (!allowedToToggle(id)) return;
    ...
}

Second, define the allowedToToggle function, right after clickOrb. If the current player is player 1, odd-numbered ids will return a truth-y value and thus, player 1 will be allowed to control odd-numbered orbs. The reverse is true for player 2. All other players are not allowed to control the orbs.

function allowedToToggle(id) {
  if (current_player_id == 1) {
    return id % 2;
  } else if (current_player_id == 2) {
    return !(id % 2);
  }
  return false;
}

Double-check that your code matches our source code for Step 5. By default, the player is player 1. This means that you as player 1 can only control odd-numbered orbs in your preview. This concludes the section on game mechanics.

In the next section, we will facilitate communication between both players via a server.

6. Setup Server With WebSocket

In this step, you will set up a simple server to (1) keep track of player IDs and (2) relay messages. These messages will include game state, so that players can be certain each sees what the other sees.

We will refer to your previous index.html as the client-side source code. We will refer to code in this step as the server-side source code. Navigate to glitch.com, click on “new project” in the top-right, and in the dropdown, click on “hello-express”.

From the left-hand panel, select “package.json,” and add socket-io to dependencies. Your dependencies dictionary should now match the following.

  "dependencies": {
    "express": "^4.16.4",
    "socketio": "^1.0.0"
  },

From the left-hand panel, select “index.js,” and replace the contents of that file with the following minimal socket.io Hello World:

const express = require("express");
const app = express();

var http = require('http').Server(app);
var io = require('socket.io')(http);

/**
 * Run application on port 3000
 */

var port = process.env.PORT || 3000;

http.listen(port, function(){
  console.log('listening on *:', port);
});

The above sets up socket.io on port 3000 for a basic express application. Next, define two global variables, one for maintaining the list of active players and another for maintaining the smallest unassigned player ID.

/**
 * Maintain player IDs
 */

var playerIds = [];
var smallestPlayerId = 1;

Next, define the getPlayerId function, which generates a new player ID and marks the new player ID as “taken” by adding it to the playerIds array. In particular, the function simply marks smallestPlayerId and then updates smallestPlayerId by searching for the next smallest non-taken integer.

function getPlayerId() {
  var playerId = smallestPlayerId;
  playerIds.push(playerId);

  while (playerIds.includes(smallestPlayerId)) {
    smallestPlayerId++;
  }
  return playerId;
}

Define the removePlayer function, which updates smallestPlayerId accordingly and frees the provided playerId so that another player may take that ID.

function removePlayer(playerId) {
  if (playerId < smallestPlayerId) {
    smallestPlayerId = playerId;
  }
  var index = playerIds.indexOf(playerId);
  playerIds.splice(index, 1);
}

Finally, define a pair of socket event handlers that register new players and un-register disconnected players, using the above pair of methods.

/**
 * Handle socket interactions
 */

io.on('connection', function(socket) {
  socket.on('newPlayer', function() {
    socket.playerId = getPlayerId();
    console.log("new player: ", socket.playerId);
    socket.emit('playerId', socket.playerId);
  });

  socket.on('disconnect', function() {
    if (socket.playerId === undefined) return;
    console.log("disconnected player: ", socket.playerId);
    removePlayer(socket.playerId);
  });
});

Double-check that your code matches our source code for Step 6. This concludes basic player registration and de-registration. Each client can now use the server-generated player ID.

In the next step, we will modify the client to receive and use the server-emitted player ID.

7. Apply Player ID

In these next two steps, we will complete a rudimentary version of the multiplayer experience. To start, integrate the player ID assignment client-side. In particular, each client will ask the server for a player ID. Navigate back to the client-side index.html we were working within Steps 4 and before.

Import socket.io in the head at L7:

After the document load handler, instantiate the socket and emit a newPlayer event. In response, the server-side will generate a new player ID using the playerId event. Below, use the URL for your Glitch project preview instead of lightful.glitch.me. You are welcome to use the demo URL below, but any code changes you make will of course not be reflected.

$(document).ready(function() {
    ...
});

socket = io("https://lightful.glitch.me");
  socket.emit('newPlayer');
  socket.on('playerId', function(player_id) {
    current_player_id = player_id;
    console.log(" * You are now player", current_player_id);
  });

Verify that your code matches our source code for Step 7. Now, you can load your game on two different browsers or tabs to play two sides of a multiplayer game. Player 1 will be able to control odd-numbered orbs and player 2 will be able to control even-numbered orbs.

However, note that toggling orbs for player 1 will not affect orb state for player 2. Next, we need to synchronize game states.

8. Synchronize Game State

In this step, we will synchronize game states so that players 1 and 2 see the same orb states. If orb 1 is on for player 1, it should be on for player 2 as well. On the client-side, we will both announce and listen for orb toggles. To announce, we will simply pass the ID of the orb that is toggled.

Before both toggleOrb invocations, add the following socket.emit call.

$(document).ready(function() {
    ...
    $('.orb').on('click', function() {
        ...
        socket.emit('toggleOrb', id);
        toggleOrb(id);
    });
});
...
function clickOrb(i) {
    ...
    socket.emit('toggleOrb', i);
    toggleOrb(i);
}

Next, listen for orb toggles, and toggle the corresponding orb. Directly underneath the playerId socket event listener, add another listener for the toggleOrb event.

socket.on('toggleOrb', function(i) {
  document.querySelector("#container-orb" + i).click();
  toggleOrb(i);
});

This concludes modifications to the client-side code. Double-check that your code matches our source code for Step 8.

Server-side now needs to receive and broadcast the toggled orb ID. In the server-side index.js, add the following listener. This listener should be placed directly underneath the socket disconnect listener.

  socket.on('toggleOrb', function(i) {
    socket.broadcast.emit('toggleOrb', i);
  });

Double-check that your code matches our source code for Step 8. Now, player 1 loaded in one window and player 2 loaded in a second window will both see the same game state. With that, you have completed a multiplayer virtual reality game. The two players, furthermore, must collaborate to complete the objective. The final product will match the following.

The finished multiplayer game, synchronized across multiple clients
The finished multiplayer game, synchronized across multiple clients. (Large preview)

Conclusion

This concludes our tutorial on creating a multiplayer virtual reality game. In the process, you’ve touched on a number of topics, including 3-D modeling in A-Frame VR and real-time multiplayer experiences using WebSockets.

Building off of the concepts we’ve touched on, how would you ensure a smoother experience for the two players? This could include checking that the game state is synchronized and alerting the user if otherwise. You could also make simple visual indicators for the terminal state and player connection status.

Given the framework we’ve established and the concepts we’ve introduced, you now have the tools to answer these questions and build much more.

You can find the finished source code here.

Smashing Editorial
(dm, il)

Source: Smashing Magazine, How To Build A Real-Time Multiplayer Virtual Reality Game (Part 2)

Get Started With UI Design With These Tips To Speed Up Your Workflow

dreamt up by webguru in Uncategorized | Comments Off on Get Started With UI Design With These Tips To Speed Up Your Workflow

Get Started With UI Design With These Tips To Speed Up Your Workflow

Get Started With UI Design With These Tips To Speed Up Your Workflow

Tomáš Čakloš



This article is about creating limits and rules to follow throughout the entire design process. There is an unlimited number of ways in which you can combine elements in a user interface — and so you’ll need to set some rules and boundaries, or else the design workflow might become an unpleasant chore. You might be struggling with all of the possibilities and trying to pick the best option among many “correct” options. By setting (and following) some basic rules, you will make your design look more consistent, too.

This article is intended for beginner UI designers. You don’t need a lot of experience in order to be able to follow the tips and tricks shared in it.

setting limits and rules helps designing

Having a system is important!

The Importance of Making Your User-Interface Design Consistent

Let’s start at the very beginning. You want your design to look good and trustworthy, and you need to avoid chaos at all costs. For this to happen, it’s very important to have a system for your design work.

Your developers will appreciate a system, too — they’ll love the fact that your design has order, and that you are making their work easier.

A System Of Resizing By A Predetermined Size

It doesn’t matter whether you want to resize a text block, resize an image, or adjust some white space. You need to decide how big each element will be. And I’ll bet you have been in this situation: Have you ever chosen a size for an element, and after five minutes, you change it, and then again, and maybe again and again?

Which size is perfect? It could be one of the ones you tried, right? You need to avoid this endless time-wasting trap!

Start By Choosing The Basic Unit: The 8-Pixel Grid

To make the whole design look cleaner, it’s helpful to first set the measurement value that will then determine all of the sizes. It is completely up to you what value you choose, but quite often, the best option is to stick to a few proven rules. And one of these rules is to resize and move elements by exactly eight pixels. This rule will streamline your decision-making.

Aside on px versus dp: In addition to pixels (px), you may have heard of the term dp being used in screen design and prototyping. The dp unit is short for “density-independent pixel.” The unit is relative to a 160-dpi screen, so 1 dp is equal to 1 pixel on a 160-dpi screen, and equal 2 pixels on a 320-dpi screen, and so on. The numeric value formula is px = dp * (dpi/160).

Note: If you work with smaller elements or objects, it’s also OK to use 4-pixel increments, instead of 8 — occasionally, you can make further adjustments, when required.)

But Why Exactly 8 Pixels?

There are a few reasons why eight often works like a “magic number” here:

  • Eight pixels is a sufficient minimum “jump”.
  • Eight is a great number because it is divisible by four and two.
  • If you use eight, you can easily resize any element without ending up with half pixels, as 8 / 2 = 4, 4 / 2 = 2, and 2 / 2 = 1. If, on the other hand, you start with 10, you’ll end up with 5 pixels, then 2.5 pixels, then 1.25 pixels. When designing for screen, you’d like to avoid half pixels as much as possible. By using whole pixels, elements in the design will align to precise pixel boundaries, and so will look crisper.
  • Multiples of eight (8, 16, 24, 32, 40, 48, 56, 64, 72, 80, etc.) are intertwined with binary values (1, 2, 4, 8, 16, 32, 64, 128, 256, 512, etc.).
  • Finally, the numbers are easy to remember.

What Are The Advantages Of Using An 8-Pixel Grid?

  • As a designer, your decision time is precious. This will make you faster and more efficient.
  • If you are working with a developer, you can create a system that will help you and your team. If the developer needs to make some quick changes, he can adjust the values by 8-pixel increments. This will ensure consistency and order.
  • People using your website will feel comfortable when they visit it. They will trust the website, and it’ll be easier for them to use the interface.

8 pixel grid

An effective way of using the 8px grid

using an 8 pixel grid

The result of using an 8px grid

Work With A Grid To Lay Out All Elements

Horizontal Harmony

I’m sure you have already used a grid when designing websites. Using a grid helps you to accurately place all elements on the digital canvas.

The grid forms the skeleton of your interface and determines where you can place elements. The template holds the composition, and it defines clear boundaries so that your design will be more consistent. Now it will be easier for you to decide where to put the elements. As you gain more experience, you can update the boundaries as needed.

But how do you create this grid? We will cover the specifics next. Basically, the number and size of columns may be random and depends on your needs. The more detailed your design, the more columns the grid will require. If you’re hesitant, ask an experienced colleague for assistance.

Also, I recommend that you read “A Comprehensive Guide to UI Design”, which should help you understand user-interface design a bit more in depth.

horizontal harmony

Horizontal harmony

Vertical Harmony

Similar to maintaining horizontal harmony, it is important to keep vertical distances consistent in a design as well. Like the rows in a spreadsheet, they help you to keep text at evenly spaced intervals.

How big should these rows be? Again, it’s up to you. However, I recommend using 8 pixels or multiples of 8 (such as 16). Redefine boundaries where elements or text are to be aligned.

vertical harmony

Vertical harmony

Picking Font Sizes The Right Way

If you look at some well-crafted designs, you will see consistency in font sizes. This is for a reason.

Note: Keep in mind also that you need only two, maybe three, fonts in your design. However, selecting the right typefaces and making them work together is beyond the scope of this tutorial.

Begin by defining a few key font sizes to use throughout the project. (For example, it would be foolish to use 30, 31, and 32 pixels. Rather, combine these three very similar sizes into one.)

Standard Font Sizes Bring Two Benefits:

  • Your design will be more consistent and more elegant.
  • It will speed up the design process and make you more efficient.

Font Sizes

When you are defining font sizes, make sure not to increase sizes by the same increment. When you are enlarging text, it should be non-linear. This means that the larger the text you are creating, the larger the increment should be.

system in font sizes

Having a system in font sizes

Let’s say you have a text block with a 12-pixel font size, and you want to enlarge it. You try 14 pixels, and you are satisfied. But then imagine that you have a large headline (40 pixels) and you want to make it bigger. Would you increase the size by only 2 pixels, from 40 to 42? Of course not. Optically, the text requires a much bigger change. You might need to increase it by 24 pixels, giving you a bigger 64-pixel headline.

In short, this means that the bigger you want the text to be, the larger the increment you will need to use. This very simple principle applies not only to text, but also to the size of buttons, white space, and everything else.

It is typically based on a geometric progression. Here is a very useful chart demonstrating font scale:

geometric progression

Geometric progression

However, for typography, one proven scale is used with font sizes that you will want to stick with forever. The scale is 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, and 72 pixels.

typography scale

Proven typography scale for sizes

Text Line Height

Once you have defined all font sizes, you will want to take care of line spacing. For line height, use increments of 4 pixels again. For example, for 16-pixel text, let’s set the line height to 24 pixels. If you want the text to breathe more, then increase the row height by 4 pixels to 28.

Define Your Project’s Colors

Do you know how many color combinations exist? A lot! You will waste too much time if you don’t predefine shades of color. You can’t limit yourself to black, white, and, say, blue. For each color, you will need other shades, and it is important to set them in advance, so that the shades are consistent throughout your design project. We don’t want to create chaos in the design. Aim for 5 to 10 shades for each color. I prefer to define 9 shades for each color.

Let’s take a closer look at color shades.

Why 9 Shades Of Each Color?

  • The first advantage is color naming. Whether you are using a graphics editor or CSS code, you will definitely benefit from this tip. Each shade would be assigned a number, such as 100, 200, 300, 400, 500, 600, 700, 800, and 900. (Why hundreds? Typically, this is how cuts of typefaces are also organized.)

  • Secondly, 9 is a handy number for defining colors. The best way to prepare these shades is to prepare a row of 9 squares and fill the squares with colors. The one in the middle will be the base color. Then, you define the lightest shade (at the far left) and the darkest shade (at the far right). The next step is to select the hues in between.

nine shades of each color

Nine shades of each color

Prepare The Different Sizes, Types, And States Of Elements

When working on a design, you will usually work with a countless number of icons, buttons, and other components. Again, it’s a good idea to prepare in advance several sizes for them, and limit the options to as few as possible. During the design process, do not add other sizes, and don’t try to adjust the size of components to suit your needs. Instead, just use the ones you have already defined, and the whole design will be more consistent and clean.

Let’s look at buttons as an example. When you begin, you’ll need to define their hierarchical structure. To do so, make a button with a primary action, a button with a secondary action, and perhaps another button with a less important action. For each button, specify its status (active, inactive) and the color variant. Always try to reduce the number of elements to the most important ones.

button styles

An example of button styles

Define Other Elements’ Properties

User interface designers often use shadows in their design work. However, for less-experienced designers, shadows can sometimes be a struggle. When creating a shadow, you must set the shadow’s distance along the x-axis and y-axis, and also the blur radius, color, and transparency. Shadows can take a lot of time to fine-tune, which is why you’ll want to prepare them before diving into the design. It is helpful to prepare a set of shadows (using the same method as for colors), and then just apply them throughout the design process.

Also, be aware of all the other properties of elements that you will be working with, such as corner radius, transparency, and color gradients.

shadow styles

An example of shadow styles

White Space

Properly adjusting white space is important. Whether you offset elements from the outside (margin) or from the inside (padding), you should rely on the magic number of 8 again. Increase the offset by 8 pixels (4 for small elements). As with font size, the larger the gap you want, the larger the increment will have to be (again, you’ll need to define these increments in advance).

white space

White space

Conclusion

To make your designs clean and consistent, define some boundaries and a clear path through the process.

When working on each element of your design, keep in mind the following:

  • See whether you have used it already somewhere in your design. If so, you can simply copy that element.
  • Follow a horizontal and vertical rhythm, and adjust the size of elements using the steps that you defined at the very beginning.
  • Avoid complicated decisions and never-ending battles with pixels. Have a system in place.
  • Do not create the same element twice. If there is order in your design, your work will be better and more efficient, you will be able to iterate faster, and you will be able to communicate with the developers more easily. The developers will set variables that follow your styles, so define them clearly. You’ll get a clean design, and the developers will be able to create better and more sustainable code. Everyone will be happy.
Smashing Editorial
(mb, il)

Source: Smashing Magazine, Get Started With UI Design With These Tips To Speed Up Your Workflow

Meet “Inclusive Components”: Accessible, Bulletproof Front-End Patterns

dreamt up by webguru in Uncategorized | Comments Off on Meet “Inclusive Components”: Accessible, Bulletproof Front-End Patterns

Meet “Inclusive Components”: Accessible, Bulletproof Front-End Patterns

Meet “Inclusive Components”: Accessible, Bulletproof Front-End Patterns

Vitaly Friedman



Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let’s figure it out together. Meet Inclusive Components, our new handbook for building fully accessible digital products. Download a free sample PDF (1.1 MB).


<img style="border-radius:11px;" srcset="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 400w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 800w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 1200w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 1600w,
https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50529a0d-1825-4279-a1df-b0276d5ee68c/page01-b-opt.png" sizes="100vw" alt="Meet Inclusive Components, our new book for building accessible, inclusive interfaces. Written by one-and-only
Heydon Pickering.”>

Print + eBook

{
“sku”: “inclusive-components”,
“type”: “Book”,
“price”: “39.00”,

“prices”: [{
“amount”: “39.00”,
“currency”: “USD”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “39.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}
]
}

$
39.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

{
“sku”: “inclusive-components”,
“type”: “E-Book”,
“price”: “18.00”,

“prices”: [{
“amount”: “18.00”,
“currency”: “USD”
}, {
“amount”: “18.00”,
“currency”: “EUR”
}
]
}

$
18.00

DRM-free, of course.

ePUB, Kindle, PDF.
Included with Smashing Membership.

About The Book

At its heart, Inclusive Components is a detailed, practical handbook for building fully accessible interfaces. The book examines 12 common interface patterns — accordions, tables, modals, notifications, tabs, toggles, and everything in-between — through the lens of inclusion. The result is accessible and robust components we author, plug in, and use daily.

For years, Heydon Pickering, a seasoned front-end developer with a focus on accessibility, has been writing about accessible solutions. We’ve teamed up with Heydon to produce a book with common challenges and solutions that he’s been refining over all these years.

For each component, the in-depth explorations are meticulously illustrated and all solutions are available as bulletproof code snippets, applicable to your work right away. Bonus: you’ll learn how to build your own accessible components with inclusive design in mind — all in a single book. Jump to table of contents ↓

332 pages. Quality hardcover with a stitched binding and ribbon page marker. The eBook is available as PDF, ePUB, Amazon Kindle. Written and designed by Heydon. Download a sample PDF (1.1 MB).


The cover of Inclusive Components, a new book by Heydon Pickering.


The inner spreads of Inclusive Components.

Print + eBook

{
“sku”: “inclusive-components”,
“type”: “Book”,
“price”: “39.00”,

“prices”: [{
“amount”: “39.00”,
“currency”: “USD”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “39.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}
]
}

$
39.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

{
“sku”: “inclusive-components”,
“type”: “E-Book”,
“price”: “18.00”,

“prices”: [{
“amount”: “18.00”,
“currency”: “USD”
}, {
“amount”: “18.00”,
“currency”: “EUR”
}
]
}

$
18.00

DRM-free, of course.

ePUB, Kindle, PDF.
Included with Smashing Membership.

Table Of Contents

Each chapter tackles a single component, addressing how different and vulnerable people might read and interact with it, and how they can be better accommodated. Download a sample PDF (1.1 MB).

1. Toggle Buttons
+
2. A Todo List
+
3. Menus & Menu Buttons
+
4. Tooltips & Toggletips
+
5. A Theme Switcher
+
6. Tabbed Interfaces
+
7. Collapsible Sections
+
8. A Content Slider
+
9. Notifications
+
10. Data Tables
+
11. Modal Dialogs
+
12. Cards
+

Inclusive Components, a peek inside.

A peek inside of Inclusive Components. A photo by Drew McMellan. See more photos. (Large preview)

About The Author

Heydon Pickering

Heydon Pickering (@heydonworks) has worked with The Paciello Group, The BBC, Smashing Magazine, and Bulb Energy as a designer, engineer, writer, editor, and illustrator. He was shortlisted for Designer Of The Year in The Net Awards.

Heydon previously wrote Inclusive Design Patterns which sold over 10,000 copies. Proceeds from this title were donated to the ACLU and The Democratic Socialists Of America, to help these organizations fight fascism and create a more inclusive society.

Here’s what Heydon shared when asked why he decided to write this book:

“A few years back, I was getting bored with web design. Then responsive design came along, presenting me with fresh challenges. It made my life and my job interesting again. Then I discovered the world of web accessibility, and my enthusiasm was once again renewed. Some people seem to think I do web accessibility because I feel morally obliged, or that I would feel guilty if I didn’t.

While I believe strongly that all sorts of people should be able to access the web, I’m also grateful for the web accessibility challenges I’ve encountered, and covered in this book, for stimulating me, and giving my work new depth.

I have written this book because I want you to know how fun it can be to make your interfaces more accessible, as well as how accomplished you can feel for having done so. Thank you for reading this, and hopefully the book as well.”

Testimonials

Artem Sapegin“Inclusive Components is a very deep and thorough explanation of development of accessible components with real world examples. Heydon Pickering shows several alternative approaches and explains pros and cons of each. It’s also a pleasure to read!”

Artem Sapegin, front-end developer, Wayfair

Sarah Federman“Inclusive Components is chock-full of practical and comprehensive advice on building accessible UI. It’s my go-to resource after the official WCAG and ARIA documentation. I’ve found it extremely helpful when building our design system!”

Sarah Federman, senior front-end developer

Andy Bell“What Heydon achieves with his work on Inclusive Components is a pragmatic, friendly and approachable set of guides that help you to generate not just accessible components, but also resilient and progressive starting-points that will help you to build better websites and web apps in general. I often describe this work as crucial learning material for this exact reason.”

Andy Bell, independent designer & developer

A preview of the book, with examples ranging from accordions to toggles, tables, notifications, dialogs etc. Download a sample PDF (1.1 MB). Large preview.

Why This Book Might Be For You

The devil is in the detail and often the things you do with good intentions can impose accessibility barriers unknowingly. Inclusive Components is for every front-end developer who wants to learn how to detect and address potential accessibility issues in their work. The book will teach you:

  1. How to use <button> elements, how to apply styles to your toggle buttons, and how to label them.
  2. How to create managed lists that allow users to create and delete content — in an inclusive way.
  3. How to address and resolve accessibility issues with navigation menus and submenus (aka “dropdowns”).
  4. How to create accessible and keyboard-friendly tooltips and toggletips.
  5. How to create a “dark mode” theme that’s both accessible and maintainable long-term.
  6. How to build an accessible content slider to prevent harm for motion-sensitive people.
  7. How to create inclusive notifications with live regions to communicate with your users through visual and aural channels simultaneously.
  8. How to create data tables that are semantically correct, responsive, and sortable.
  9. How to build accessible dialogs and modal dialogs with performance and inclusive design in mind.
  10. How to create and group inclusive cards (e.g. for teasers).

Technical Details

Community Matters ❤️

With Inclusive Components, we’ve tried to create a very focused handbook with applicable, long-living solutions and strategies to create accessible and inclusive interfaces.

Our hope is that with Heydon’s book, you will be able to make better design and coding decisions as you build your interfaces. Perhaps it will even become one of those reference books you’ll reach to every time you need to build one of those common UI components.

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their ongoing support in our adventures. As a result, the eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy.

Stay smashing, and thank you for your ongoing support, everyone!


The cover of Inclusive Components, a new book by Heydon Pickering.

Print + eBook

{
“sku”: “inclusive-components”,
“type”: “Book”,
“price”: “39.00”,

“prices”: [{
“amount”: “39.00”,
“currency”: “USD”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “39.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}
]
}

$
39.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

{
“sku”: “inclusive-components”,
“type”: “E-Book”,
“price”: “18.00”,

“prices”: [{
“amount”: “18.00”,
“currency”: “USD”
}, {
“amount”: “18.00”,
“currency”: “EUR”
}
]
}

$
18.00

DRM-free, of course.

ePUB, Kindle, PDF.
Included with Smashing Membership.

More Smashing Books

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as books that stand the test of time. Alla, Adam and Andy are some of these people. Have you checked out their books already?

Smashing Editorial
(il, cm)

Source: Smashing Magazine, Meet “Inclusive Components”: Accessible, Bulletproof Front-End Patterns

Smashing TV Live: Privacy UX, A Session With Vitaly Friedman

dreamt up by webguru in Uncategorized | Comments Off on Smashing TV Live: Privacy UX, A Session With Vitaly Friedman

Smashing TV Live: Privacy UX, A Session With Vitaly Friedman

Smashing TV Live: Privacy UX, A Session With Vitaly Friedman

Vitaly Friedman



Cookie consent prompts, push notifications, app install prompts, video autoplays and annoying pop-ups. Every time we enter a new site, it feels like a fight against all the annoying marketing messages endlessly streaming at us. If you’ve wondered why a product you looked up in a search engine one day keeps showing up in all your social channels over and over just a few hours later, that’s the power of data collection and retargeting at play. We can do better than that though.

For a few years now, we’ve been running live sessions with respected professionals on Smashing TV — our video channel for our dear Smashing Members, who support our little team and our little adventures every month. As the webinars have always been about sharing lessons learned with the community, we’d like to open them up to everybody, with Members having a chance to ask questions right after the session.

Join Live Stream Below: Tue, Dec 3, 5:00 PM London time

The session will start today, Dec. 3, at 5:00 PM London time (12:00 PM New York time) — broadcasted live below!

In the session, we’ll be exploring privacy UX patterns, techniques, strategies and important decisions to consider when designing and building privacy-aware websites and applcations. You’ll walk away with a toolbox of applicable techniques, privacy nightmares and a few notes on how to keep your website/app GDPR-compliant and privacy-focused.

From Smashing With Love

To help you stay on top of things, you can subscribe to our bi-weekly newsletter (193.000 subscribers), in which we announce what’s happening in the Smashing universe. Each and every newsletter issue is written and edited with love and care. No third-party mailings or hidden advertising, of course!

Also, Twitter and LinkedIn are still around. AH, and you could stay updated with our bi-weekly Smashing Podcast, too.

Please do always feel free to reach out and share your thoughts with us — we love hearing from you!

Smashing Editorial
(il)

Source: Smashing Magazine, Smashing TV Live: Privacy UX, A Session With Vitaly Friedman

Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?

dreamt up by webguru in Uncategorized | Comments Off on Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?

Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?

Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?

Drew McLellan



Heydon Pickering In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so what is Inclusive Design, and where do components come into play? Heydon eplains all this and more in this episode. You can listen below, or subscribe wherever you get your podcasts.

Show Notes

Transcript

Drew McLellan: He’s a freelance web accessibility consultant, interface designer and writer. His work focuses on accessible user experience design, as well as writing and editing for Smashing Magazine. He’s the author of the acclaimed book about accessible web application design, Apps For All, and has just released a new book, Inclusive Components, all about how to build accessible web interfaces, again, with Smashing Magazine. So he’s clearly an expert on the subject of accessible design, but did you know he was the first male human to jump the Sydney Harbor Bridge in a speedboat? My Smashing friends, please welcome Heydon Pickering. Hi, Heydon. How are you?

Heydon Pickering: I’m smashing. I’m on brand.

Drew: I wanted to talk to you today about the subject of your new book, Inclusive Components.

Heydon: Yes.

Drew: Obviously just a two word title, but I feel like each of those words does a lot of heavy lifting. Starting at the end, as is obviously logical to do, components, is this about sort of component-based design? What is that?

Heydon: Yeah, so I suppose it’s been a while now since people, front end developers, designers and everyone who collaborates on making interfaces, started to think about things in terms of components and dividing things up into digestible and reusable morsels. And I suppose if you’re not familiar with that way of working for whatever reason, it really is a bit like electronic components. My father is an electronic engineer. He works in the sort of analog world of circuit boards and solder and all that kind of thing.

Heydon: In fact, he’s made some components, very small components, which have been used to regulate the current going into electromagnets at CERN. And he had a lot of faith in me as a kid, because he got me to actually solder some of the bits for them. I think that batch has now been retired, so don’t worry about my poor soldering, my poor teenage soldering, being involved in CERN anymore. But yeah, I think it is analogous to … Oh, there’s too many analogs in there.

Heydon: It’s analogous to analog circuit boards in that the idea is you have single responsibilities for individual parts or components and, together, they make the circuit and, together, they augment the current in the case of a circuit or the, I guess, the interface or the outcome in whatever way, in a design system or in an interface as manifested through a design system. And so, Inclusive Components because I wanted to address the fact that, while, I mean, accessibility does tend to get left behind generally when we advance what we’re doing in different arenas, and I wanted to bring accessibility and, in the broader sense, inclusive design to bear on this kind of new way of thinking and making things using components or modules or whatever you want to call them.

Heydon: So the idea was to both bring accessibility to design systems, but by the same token, think systemically when it comes to trying to address accessibility. Think about solving kind of one problem in one place in terms of accessibility and making sure that simply propagates around the pattern [inaudible 00:03:16] the design system at large.

Drew: In a sort of a practical sense, what does it actually look like to work in a component based way? What might an example of a component be?

Heydon: So, there’s different ways of conceiving and coding components. I tend to get straight into the sort of nitty gritty of it, past the conceptual stuff and think about how I might organize the code. I’ve actually come to focus a lot on custom elements, or if not custom elements, then normal elements but with kind of JavaScript behavior attached to them in a kind of isolated, componentized way. I really like the idea of components which are interoperable. And by that, I mean that they can be used across different frameworks and systems and approaches and technical stacks. And custom elements are nice in that because they’re native. You can define them in one place and then they could be used, say, in a react application or they could be used in a view application or they could be used in an angular application, or whatever sort of larger state management technology you’re using.

Heydon: So for me, usually a component will probably be a custom element. I’ve worked on a project recently which isn’t so much focused on accessibility, although I’ve tried to make it as accessible as possible, called Every Layout, and it’s all about kind of trying to isolate very specific kind of algorithms for CSS layout. And they’re defined as custom elements and kind of they sort of deploy themselves and run their own CSS and work as kind of like primitives within the larger system.

Drew: I mean, in actual practical terms, we’re talking a component might be something like a form field?

Heydon: Yeah, so it could be something as simple as an input. Say, like a text input or it could be something complex like a tab interface. And so, the idea with Inclusive Components was to take the concept of one component with its, hopefully, single purpose, like a text input, and then think about all of the different things that could trip up different kinds of people and try and avoid them. Not avoid the people, avoid the problems. It’s not so much about including people, it’s about trying not to arbitrarily exclude people.

Heydon: That seems to be the easiest way of approaching an inclusive design process for me, is to kind of identify the potential exclusionary elements of something and try and step around them. So with a text input, with a label, you’ve got a number of different things there that you might want to worry about. So, you’d have whether or not it’s actually labeled correctly for a start. So are you using a label element and is that label element pointing to the text field using a for attribute so that the two things are programmatically associated so that when a screen reader user focuses the input, they actually hear the label being announced? So that’s one thing to get right.

Heydon: Then, on a sort of more visual level, making sure that the label is clearly associated with that field and not a different fields, and that’s a question of white space and that kind of stuff. Also, making sure that the label is not, you’re not doing something fancy like putting the label underneath their form input because then when you, for instance, when a virtual keyboard comes up, that might become obscured. So, it’s taking into consideration those sorts of things.

Heydon: Making sure that the input itself has a focus style, so when you focus it with a keyboard, whether you’re a habitual keyboard user who uses keyboards to navigate or otherwise, making sure that it’s clear from the focus style that that’s the input that you’re focused on. Making sure that, I mean, things like autocomplete, worrying about that, whether autocomplete is appropriate and helpful in the context or whether it’s not. And a lot of these things address disability directly, but a lot of them are sort of broader in terms of usability and just making things as understandable as possible.

Heydon: Quite often, there’s a very sort of fine line or perhaps a blurred line between what addresses sort of usability for everyone and what addresses disability. And then, to make it even more kind of difficult to pin down, cognitive disabilities. So if something is not very usable for someone who does not have cognitive disabilities, then it’s going to be even more difficult to work out and be able to use for someone who does have those kinds of challenges.

Heydon: So it’s just trying to think about all of those things in one place. And really, the book is just my, it’s my thought process as I’m approaching each of those. So I did it as a blog to begin with. And each pattern or each component is a blog post and the text is just me going, “So, let’s now address this potential issue. How do we go about that? Okay, we’ve checked that one off. I think we’re okay there.” And, by no means am I trying to say that these are perfect and that I’ve thought of everything, because that’s not possible.

Drew: So does taking a component based approach to how you work on individual parts of an interface, I guess, it allows you to go really deep on that particular item and make sure that you’ve really heavily optimized it in the best way you can so that it’s accessible to everyone. Is there a danger in doing that and doing that on lots of different components and then putting them all together on a page? Is there a danger that you can create issues that you weren’t aware of because you’re testing them individually and not together?

Heydon: That’s a really good point, and I was going to bring that up earlier actually. I’m glad you said that. So, in lots of ways, I think we have, philosophically, we’ve decided that we need to separate things into these individual components. And there’s virtue to doing that, because if it’s isolated then it’s easier to kind of test and sort of treat as a single thing. And you can kind of, in terms of the way we work, it makes things easier to manage. We do have to consider, as well, the fact that these things ultimately have to share the same space and join together into a larger system.

Heydon: And I don’t think, actually, enough of our effort and thought goes into that, funnily enough. I think we componentize things more to make our lives as engineers easier, so that we know what we’re working on at what time. And, but then, we often do neglect the fact that these things will be living in dynamic systems and they have to be …

Heydon: I mean, the Every Layout project, although it’s more about visual design and about layout, is all about trying to make these little CSS primitives, these little layout primitives, in such a way that they can sort of self-manage algorithmically. It’s so that you can take them out of a narrow column and put them then a wide column and then it will be, the code itself will determine how many items abreast there should be or whether it should reconfigure itself in some other way. Because we can’t afford to constantly be intervening, and it has to be a system which is sort of self-knowing and intelligent, I think.

Heydon: There’s always things which you can forget about. So maybe you make a tab interface, you’ve got a row of tabs, you choose between the tab and the tab corresponds to a tab panel, that opens something up. And then, someone will come along and they’ll say, “Well, what if I want to put a tab interface inside a tab interface, or some other component inside a tap interface?”

Heydon: And of course, I mean, it’s partially a technical concern as to whether that would be possible, but yeah, you’ve got to make the choice about whether you’re going to make things as flexible as you can so that it’s possible to sort of imbricate things in a complex way, or simply write hard rules which say, “You can’t put something inside here because the level of complexity in terms of the code would probably be too high, but also possibly in terms of how the user can perceive and use the thing.” I’m all for writing rules which say, “Don’t nest loads of complex functionality inside itself,” because it’s just not likely that people are going to be able to get their head around it, really.

Drew: Is it possible to take a fully algorithmic or automated approach to designing for accessibility?

Heydon: I don’t believe so. No. So we have automated tools and I don’t want to disparage automated tools in any way. I think they are very useful, but I use them as kind of like an early warning system to try and kind of get an impression of where the problem areas are. So, if I was doing an audit for an organization who wanted some advice on how to make their products more accessible. So it’s a good way of kind of funding where the problem areas are, but I mean, you can have an interface which is technically 100% accessible, perhaps, according to some tool, even a good tool for judging it, say, against WCAG, the web content accessibility guidelines, or some other acceptance specification. And, even though it’s a 100% sort of all the boxes checked, it can still be entirely unusable for various reasons.

Heydon: For instance, going back to what we were saying before, it can just be entirely too complex. You can just overwhelm someone with links and there’s just no way that they’d be able to get through it and then that becomes, it’s a very sort of tacit thing and difficult thing to pin down, but it’s bound to just alienate people. But there’s also, you can get, it’s very easy to get false positives and things like that. I had a thing the other day, I said the other day, it was the other month, I was working for an organization and of course they wanted to have a 100% accessibility lighthouse school and there was an iframe which was dropped in there dynamically by a analytic script or something. You know the kind of thing where it’s some sort of slightly gross code, which is just sort of chucked in the page to do some task like that.

Heydon: Now I would recommend not using analytics at all, and I recommended to them to at least support the do not track protocol so that people could opt out. Unfortunately, that protocol is kind of, doesn’t really work anymore because it was never really supported properly. But this iframe, it was saying it doesn’t have a title on it. So the idea is that if you have an iframe, it should have a title attribute because that’s the best sort of longstanding way of identifying what the iframe is for to a screen reader user. But this was an iframe that also was set to display none, so it wasn’t even perceivable to a screen reader in the first place because display none, just as it hides things visually in a screen reader, it will essentially remove it from the interface, so it won’t be encountered or announced in any way.

Heydon: So it was a false positive. I mean, it was asking me to identify an iframe that was not there to be perceived in the first place. So, there’s always going to be those kinds of errors and problems in automated testing. But ultimately, it is about knowing, although it’s just sort of a thing that programmers, I guess, don’t really like to think that they’re involved in and they find it a bit icky, but it is about human behavior and about how people understand things and that’s a very difficult thing to just have a set of kind of binary sort of, or boolean sort of rules about.

Heydon: So, I mean, I spoke to a developer when I was consulting sometime ago about this and they kept saying, “Well, as long as we’ve got automated testing, we’re fine, aren’t we? It’s just, then we can just move forward.” And I said, “You still have to test manually. There’s no automated test which can really tell you if using the interface by keyboard is impossible in one way or another.” There are sort of discrete things you can look for, but the overall experience is still something that needs to be judged by human being. Yeah.

Drew: Sometimes the danger with automated tools is they look at items in isolation or they look at one interface in isolation and not see the wider context.

Heydon: Yes.

Drew: Certainly with using lighthouse for performance audits, sometimes I might make a decision as a developer to include, there may be a lot more CSS than is used on that one page and strictly speaking, I’m downloading too much CSS, but actually, I know that once that file is loaded, by the time the user browses to the next page, they’ve already got the CSS. So it’s an an optimization that’s being made across multiple pages the tool, looking at one page in isolation, sees as an error.

Heydon: Yes, absolutely. You’re thinking ahead and you’re making a judgment call, and until we get to advanced AI to anticipate that, then yeah, you really need human beings looking at it and going through it and going … I mean, so automated testing should be in place, as I say, a sort of early warning system, diagnostic system, but there should also be, if you’re interested in your organization really caring and making things more inclusive and more accessible, there needs to be training as well. There needs to be Q & A.

Heydon: So I would write scripts for, “This is how it should work when you interact with this component with a keyboard,” or, “This is how it should work when you interact with it with a screen reader and not actually step through it. So, when you do this, this should happen. When you do this, this should happen. When you do this, this should appear,” or that kind of stuff. So, and the kind of journey stuff, as you say, automated tools aren’t aware of that. They only just see, “Oh, this doesn’t have alt text here.” And actually, in a lot of cases, maybe it shouldn’t have alt text. And also, it can’t judge whether you’ve written the alt text well or not. So I think an image without all alternative text is probably better than an image with misleading or just bad alternative text. And that’s a judgment call again, isn’t it?

Drew: One of the things that I’ve struggled with, historically, in building things in an accessible way is keeping my knowledge of the best practice up to date because it’s, each time I refer to any documentation or any sort of recommendations, it seems like what I was doing and thought I was doing the right thing, the recommendations have moved on and now I should be doing something else. And that’s a familiar story with all areas of working on the web. But I think the danger is, of course, with accessibility issues, is that, if you’re not following the best practice, if you leave something in your interface that is now not good practice, that could be affecting your users in a negative way. Does a component based approach to building an interface or a site, does it help with that at all in any way?

Heydon: I think purely in the sense that, because you have one component which then, the idea of course in all cases and not just in terms of accessibility, is that you have this component defined in one place which will then be used in different places, at least when aspects or browser support or whatever it is changes and you want to update the component, you only then have to do it in one place and then wherever it’s used, that enhancement or that change will be felt. So from that regard, I think it’s certainly more useful to have things divided into components.

Heydon: But then, yeah, as I say, that doesn’t just affect accessibility, that can affect anything that changes. But then, I’m not sure really how much changes in its … I mean, there’ll be few sort of breaking changes in terms of sort of HTML accessibility, which is, obviously, a very narrow area. But in terms of the code quality or how the code works, things are introduced into the HTML spec, obviously, very slowly and not quite as slowly but fairly slowly into the ARIA spec as well. And then, much of ARIA just mirrors what’s in the underlying baseline HTML anyway.

Heydon: I think, more so than the technology, the perception and understanding of these things tends to change over time. I mean, there was recent, in the WebAIM survey recently, they identified the sites were using ARIA were more inaccessible than sites that didn’t use it. So this technology specifically conceived in order to help people make websites more accessible, was making it worse. So it’s really, it’s just a knowledge gap, not a technology gap or a technology shortcoming. It’s people just taking the technology and misusing it because they didn’t really actually understand how it’s intended to work, unfortunately. Hopefully, some of my writing might be able to help with that. In some areas, anyway.

Drew: But a sort of well structured component-based system would enable you, once you realize that something is out of date or you’ve made a poor decision and you now know better, would enable you to more easily go in and fix that across your application.

Heydon: Yeah, exactly. Yeah, yeah, absolutely. I mean, it’s all about efficiency isn’t it, really? And this dry principle or what have you, and see, that’s why I guess I was originally very excited about this opportunity, because people always complain that making things accessible is extra work and it’s hard and it’s upsetting and all of that. And so, it was kind of an opportunity to say, “Well, you know how you’re making this stuff really, efficiently building these component systems? Get your accessibility in there for that one component that you’re making, and then you didn’t have to worry about the accessibility anymore apart from the occasional spec change or update or what have you.”

Heydon: Or just, I mean, probably most of the time, the iteration will simply be based on user feedback and ongoing research, which, obviously, you should be, as much as possible, conducting with a diverse group of people. So, you should be getting people who use different devices and have different browsing habits and use different assistive technologies and that kind of thing. And you know, things are bound to come up all the time. I think I’ve really pinned down a component, think it’s really rock solid, and then I do a bit of research and I find that I’ve made some pretty bad assumptions. But yeah, with a component system you only have to fix it in one place.

Drew: Can a component ever be fully inclusive or is it a spectrum where you’re just working ever more towards inclusivity?

Heydon: Yeah, it would be possible for a component to be, in terms of let’s say WCAC error free, it meets all of the WCAC criteria, but as I said, that only takes you so far and it could still be entirely unusable or impossible to understand even with those technical criteria met. So yeah, this is something that I talk about a lot. I try to convince people that accessibility is like any other area of design, it’s just a part of the design process and nothing can be perfectly designed just like nothing can be perfectly accessible. I think, unfortunately, a lot of folks think of it just in terms of just making sure that it is compatible with screen readers, which is obviously a very narrow scope in terms of accessibility and inclusion in general.

Heydon: So then, there will be people who, some good folks I’ve worked with like at the Paciello Group, who would say, “Well actually, I want to be known as a accessible UX person.” So it’s not just about this box ticking exercise, it’s more about actually trying to make the experience better and more valuable for the greater number of people and move more towards sort of broader principles and things which are less binary. But ultimately, it’s all that, and WCAC and other such criteria can only really identify the real hard and fast, “This is wrong,” stuff, I suppose.

Drew: So if I’m a developer, what should I be doing differently as I approach how I design and plan and build a component? Is there anything that I should be considering in my work to make sure that that component is going to end up being as inclusive as possible?

Heydon: So, I mean, depending on what you’re building, there’s going to be different criteria which need to be met. So, for instance, not every component is going to have the to have accessible imagery with alternative text, because it might not use imagery at all. It might just be text-based or what have you. Some might not be interactive. So, in terms of the specific requirements, then, it would change between component, but hopefully what some of my writing and what the Inclusive Components book helps you to do is to fall into or kind of adopt a discipline of just thinking inclusively.

Heydon: So, when you’re approaching this stuff, not just thinking, well, basically just getting out of the mindset of, “If it works for me, it probably works for everyone else,” because it’s simply not the case that the way that you or I browse things, I mean, we’ll probably do things completely differently, just us two, right?

Drew: Right.

Heydon: And we’re Western, white, English as first language people. And so, yeah, the amount of diversity in terms of the people consuming this, I mean performance people always talk about this as well, people who are interested in advocating for better performance. You’re used to using a high spec set up on a good network and a lot of your users or a lot of your potential users will certainly not be, and same with accessibility. It’s just a question of, basically, just getting out of thinking about yourself, really. Literally just that. And trying, obviously, to reach out beyond just your immediate colleagues and people in your same social group as well.

Heydon: So hopefully, it’s really just, “Here’s what I solved for this stuff,” and what I was thinking about at the time. You can reuse some of those ideas and apply precisely what I’ve applied, if that’s useful or relevant to you. Hopefully, the book is more about just, “Here is a case study of a person who tries to think inclusively. See, the kind of things they were thinking about, when you’re designing something completely different, perhaps just employ the same kind of thinking and try and open your mind up to the diversity of of users and how they go about things.”

Drew: So the book itself, how did you decide how to structure it? It seems very fiercely practical, which I like in a book, but how have you structured it?

Heydon: Very much like the previous book, actually was Inclusive Design Patterns and I had a lot of trouble that book, to begin with, because I tried to organize it in terms of kind of abstract criteria. So I started out doing a chapter which was all about keyboard accessibility, but that was very hard because then I had to kind of, every time I talked about a different type of keyboard accessibility or the thing that you have to think about, then I had to conjure some sort of component and then ditch that component and then move onto something else.

Heydon: And so, it just made more sense for me to organize things in terms of components themselves. So, Inclusive Design Patterns does this and now Inclusive Components is really just a continuation, which just covers different components. It’s different in that, in terms of features, it’s a bit different because it also includes live code examples and stuff, which I didn’t do so much for the previous books. But yeah, it is literally just, “We’re going to do this component,” whether it’s a tap interface or a collapsible section or a theme switcher or a notification flash card or toaster or whatever they’re called, and then just everything is then organized around that component.

Heydon: So it’s, “This is what we’re doing and these are the things we should consider while we’re doing it to be more inclusive,” because that’s how I work and that’s how other folks work. And as soon as I started doing it like that, it was really just me working and writing notes as I worked. And so, the thing kind of wrote itself, and then all of the effort was really in actually just making sure that I was doing a decent job of making those things not inaccessible, I guess.

Drew: Yes, I mean the table of contents really reads almost like documentation or like a self-help manual or something. Straight in with chapter one, toggle buttons. If you want to implement some toggle buttons, go to this chapter, read it and you’ll get everything you need to know about how to do that, which is an approach I really like. I see things like collapsible sections, tabbed interface, theme switches, data tables, loads of actual, real practical stuff that we’re all building every day and I think we all, probably, could be building better.

Heydon: Yeah, that was totally the idea because it wasn’t just about me making my components, it was a case, and you’ve touched on it there, which I’m glad you did, which is it was of identifying common patterns that we all use. So I mean, there’s tab interfaces everywhere and they’re all implemented differently and they’re all implemented, variously, very badly. I mean, I’ve implemented terrible tab interfaces and that I’ve learned a little about how bad they were for people, and then I’ve tried to make them a bit better and a bit better and a bit better. I’ve probably made 15 or 16 different versions of tab interfaces in my time, having been doing this kind of thing for years now.

Heydon: And you know, they’re getting a bit better, hopefully, every time. But it is just a common thing. It was a common thing that I would use quite often between different websites, I use and everyone uses. So, part of the idea was to say, “Well, actually, let’s do a design system, kind of an accessible design system for the web.” Now, people are going to branch out and they’re going to do their own versions of these things, but to kind of get the core stuff down and the accessibility is a core thing that should be in things. It shouldn’t be an add on, it shouldn’t be an either/or, it shouldn’t be a feature. It should be a core thing. And if you get that core stuff paired down, then yeah, hopefully people would look at the chapters and go, “Oh, okay, I’ve made those. I’ve seen those. Let’s see how to do it as inclusively as possible,” and then hopefully they get some value from that.

Drew: Well, what I like about it is, certainly I know I’ve, in the past, I’ve had some interface features I’ve needed to implement and I know that it’s going to be tricky from an accessibility point of view, say some sort of a fly out menu, drop down menu, something like that. I think, “Okay, here be dragons in terms of accessibility. I need to make sure I do this right.” And so, I Google for how to do it, I find a reputable source saying, “Use this method,” I use that method, I implement it and I move on, but I actually haven’t learnt anything. I haven’t learnt why the solution was that. And what I really like about the way you go into it in the book is I can do two things at once. I can figure out how I should be doing it and I can figure out why I should be doing it like that because it’s all very carefully explained. So, I think it’s really successful from that point of view.

Heydon: Oh, great. That was what I was going for. So that’s good. But yeah, that seems to be my thing. I mean, I’ve been working with the BBC for some months and we’ve kind of made a thing a bit like Inclusive Components but for the BBC, so we’ve done this sort of technical implementation with a through the lens of accessibility version of their design language called GEL. And yeah, it explains the why as well as the how and it’s not a pattern, really. The idea is that the individual departments at the BBC, because there’s so many of them, because it’s such a large organization, so there’ll be BBC Sport, BBC Weather, BBC News, they’re the ones who would be taking care of the kind of technical stack and making their pattern library. And what we’ve really provided is just, we’ve just tried to exemplify the best practices. So it was really much more of a learning resource than a simple plug and play pattern library. Yeah.

Drew: Was it difficult deciding what patterns to include in the book? Was there anything that you left out?

Heydon: The only ones I really had problems with or second thoughts about were the ones where, the tab interface, for instance, I wasn’t going to include, because I really hate tab interfaces, but then I had folks saying, “Could you please do a tab interface? Could you include a chapter of that?” Because I get asked to put them in my interface all the time by clients or whoever. So, I ended up doing one. But it’s full of caveats. And the main caveat is, probably don’t use a tab interface. Use maybe an accordion, it’s a simpler interaction paradigm. It’s easier to make responsive, it’s easier to make compatible with screen readers, et cetera, et cetera.

Heydon: So I put all those caveats in. But yeah, and some of them were ones where I just thought, “Oh, I haven’t written about this before and I could do with having sort of thought about it so that I could actually use it in my design work.” And others were people requesting, saying, “I know this is a gnarly one, I just don’t know how to go about it. Could you give it a go?” And so I gave it a go as best as I could. That is going to be the last time I write a book about accessibility because I’ve done three now.

Heydon: So if anyone wants to know any more and if they think of any other components that they might want doing, just DM me on Twitter or something and I’ll try and deal with it in that way rather than writing a whole article, because those articles are quite long and they take up quite a lot of time and I’m kind of doing other things at the moment. But I’m always happy to chat with anyone who has any questions about this stuff. They might be working on something similar to what I’ve covered and there was just something that they were unsure about or which I, for whatever reason, I hadn’t made as clear as they’d liked it. Yeah, then just contact me because I’m always happy to talk about the stuff because it helps me to sort of ruminate over things and try to, it might challenge my assumptions and help me to do a better job as well.

Drew: So, the book, Inclusive Components, is available right now from Smashing Magazine, smashingmagazine.com/books, and I’d recommend everybody check it out.

Heydon: Thank you.

Drew: So I always like to ask people, I mean, Smashing is all about learning, right, with the books, the conferences, the magazine, we’re all about learning. What is it that you’ve been learning lately?

Heydon: So, recently, well, a couple of years ago I made something, I made a drum machine using the web audio API called Beads and it’s still available as a PWA, it’s a progressive web app. If you Google search Beads GitHub or something like that, you should get the GitHub page which has it on there. But that was a alpha version and I’m now working on doing a much more advanced version of this. And it’s a different kind of drum machine because it’s polymetric, it has different, you can have different tracks of different lengths. So you can have a track which has seven beats and a track which has nine beats, a track which has four beats. And then, the rhythm evolves over time because of the changing syncopation. You’ve got these, it’s multi-threaded.

Heydon: That was the main reason that I wanted to build it, because, as someone who’s interested in kind of experimental music, that’s something I wanted to play with. Obviously, I’m trying to make this drum machine as accessible as possible. And that’s been interesting from the point of view now that I’m working with, I’m turning it into an Electron app. So, for those of you that know Electron allows you to kind of wrap a sandbox version of Chromium browser and create a desktop application but using web technology, which was really great because it makes things, for this projects anyways, because it gets around a lot of performance problems.

Heydon: But also, although I’ve been doing cross browser testing for 12 years now, it’s really nice to have a break and just to design stuff for one browser. And it’s got some, so there’s a flag in Chromium. It’s a, what’s it called, an experimental web platform feature for focus visible. So I’ve been able to make this drum machine completely keyboard accessible with these really nice, big focus outlines without those appearing for mouse users, because focus visible uses this heuristic where it detects whether or not you’re using a keyboard. So that’s been nice, to be able to incorporate that.

Heydon: But the thing recently that I’ve been learning about, just I’ve, I guess, been learning about some of the more advanced things you can do with the web audio API itself. So I had this problem where I have, you can put multiple sounds on one track so you can load in an array of audio files and it places them one after the other, and by default they overlap, so they’ll always play out out, the audio buffer will play until it finishes. So if the next sounds comes before the end of that, it just overlaps, which is fine. It’s kind of like a reverb or something. But sometimes if you’re doing an arpeggio, like a baseline or something, you don’t want them to open up. That’s not how a bass guitar works, right? If you’re on the same string, you press the next note, the first one has to finish.

Heydon: So, I was stopping a note as the next one started and there was always an audible popping sound and it’s not the web audio API having a problem or anything like that. It’s just the human ear will hear a kind of a nasty popping sound where you kind of sever away from. You just cut it, stop it dead, it’s going to sound nasty. And then, so I found that there’s a function as part of the web audio API, which allows you to choose a point where you can taper off the sound. And so I was able to detect where the sounds should end because the other sound is beginning, then taper it off very quickly, but it is a taper, like a fade out, rather than a hard cut off thing.

Heydon: So I solved that problem after it annoying me for ages. So it’s basically been web audio API stuff and messing around with sounds because I’ve always been into, as I say, into experimental music and messing about with that sort of stuff. And I’m trying to write a talk about this. And in the talk, I’m using Billy Jean by Michael Jackson because it’s a very straight, fall to the floor rhythm and I’m going to kind of warp it in various different ways. So I’ve actually had to learn the parts for Billy Jean to kind of sequence that and stuff. So, weirdly enough, that was what I was doing before doing this podcast.

Drew: That sounds like a lot of fun. So if you, dear listener, would like to learn more about Heydon or hire him to consult on your projects, you can follow him on Twitter, where he’s @heydonworks, or visit his website at heydonworks.com. Thanks for joining us, Heydon. Do you have any parting words?

Heydon: Goodbye.

Smashing Editorial
(dm, ra, il)

Source: Smashing Magazine, Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?

1 2 3 4 5 6 7 8 9 10 ... 81 82   Next Page »