Archive

Archive for November, 2019

How Building in the Open Can Change Our Industry

November 21st, 2019 No comments

I have to admit, I’m a developer who hasn’t built a website. When I first read Chris’s question, I sat in silence for at least a minute. Which technical topic did I want to discuss? A new library, programming language or best practice? Nothing, in particular, came to mind. Is that because I’m a new developer?

I’ve been coding for about one year now and got my first job a month ago. Even though I’ve been coding for that time, I wouldn’t say I’ve built a website. I’ve contributed to a couple of open-source projects whose output was websites, but I’ve spent a lot of time practicing technical tests in order to get into the industry and now I’m writing Kotlin for the Guardian Newspaper’s Android application.

After a couple minutes thinking about this question, I realized I wanted to write about who gets to build websites and how and where we choose to build them in order to welcome new people. I’ve spent this year giving conference talks on this topic because I have first-hand knowledge of what it’s like to become a developer with little time and money. It’s not easy being on the “outside” trying to get into our industry. How can we make it easier for new people to join us here? How can we welcome under-represented groups to the table? In 2020 you can make a huge difference to our industry by welcoming new developers, especially those from under-represented groups.

It’s been five years since the most well-known tech companies first released diversity reports, revealing that workforces were overwhelmingly white or Asian men. Despite their business successes, though, none of these big tech companies have made much progress in diversifying their workforces.

In 2014, Apple, one of the largest tech companies by revenue, had 20% women in its technical staff. This increased to only 23% in 2018 (Apple). At Google, the share of US technical employees who are black was 2.0% in 2014 and only rose to 2.8% in 2018 (Google). At Facebook in the US, there were 3% Hispanic technical staff in 2014. Last year there were 3.1% (Facebook).

Continuing our homogenous engineering community is a risk. We are less likely to build products best for our diverse user groups. For example, there have been numerous reports of facial recognition systems misidentifying black people. A US Government study found a top-performing system misidentified black people 5-10x more than white people. In addition, “according to a 2011 study by the National Institute of Standards and Technologies (Nist), facial recognition software is actually more accurate on Asian faces when it’s created by firms in Asian countries, suggesting that who makes the software strongly affects how it works” (Guardian 2017).

Thankfully, there are a number of things you can do in 2020 to contribute to a more diverse engineering community. Building websites in the open, in ways that welcome new people, can have a hugely positive impact on our industry and on the websites that we as an engineering industry produce.

First, how can building open source websites help us welcome new people? You can help with this by being a great open-source citizen and upholding best practices by giving positive and constructive code reviews, keeping documentation up to date and useful, offering help to new contributors and remote pairing with them if at all possible. Some amazing developers like Suz Hinton (@noopkat) live stream their open source contributions, which is phenomenal.

GitHub’s research has shown that documentation is highly valued, but frequently overlooked. As a new contributor, I really value clear and useful documentation, especially on installation, raising a PR and where to get help if I get stuck. Mozilla found that the most significant barrier to engaging in on-ramping others is unclear communications and unfriendly community. Using positive language in your documentation can really encourage first-time contributors to your project. For example, by expressly indicating that you welcome new contributors with instructions on how they can get involved.

We want to create an engineering community highly attractive to under-represented groups. One of the ways that we can do this is by supporting new developers to get a foothold into the profession. There are so many ways we can do this!

The first thing we can do with new developers is to help them by pairing and giving code reviews. Open source projects are perfect for this! By giving constructive code reviews you can help newbies level up their coding skills. You can also set up a Slack channel for your repo where you can answer technical questions. I have met superstar open source heroes who spent time pairing with me, which, if available to you, is an amazing way to help new people.

The greatest challenge I faced when teaching myself to code was finding a job. You can give new developers an insight into your company or your day to day working life by writing an article on Medium, posting a Twitter thread, or making a YouTube video. Some developers offer their own office hours which they do on a live stream or some offer a few one-off mentoring calls with new developers.

Who we welcome into the room to build websites with us says something about who we are and our values. In 2020, let’s welcome new people, especially those from under-represented groups to join us. We’ve discussed how amazing open-source projects are for this and how we can practically contribute to supporting new people. Let’s challenge ourselves to support at least one person from an under-represented group trying to get into the engineering industry in 2020. Together we can change who has the privilege to build the web.

The post How Building in the Open Can Change Our Industry appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Embrace the Political

November 21st, 2019 No comments

The tech industry has long held the belief that technology is apolitical. People are flawed, but the machines? They are neutral. They are pure.

This is ridiculous, of course. People make the machines. We write the algorithms that can’t recognize dark skin tones. We decide to downplay or ignore harassment on our platforms. There are a plethora of examples in books like Weapons of Math Destruction by Cathy O’Neill, Technically Wrong by Sara Wachter-Boettcher, and The Internet of Garbage by Sarah Jeong. Technology is political because people are political.

What excites me is that finally, our industry is starting to admit that yes, our work is political. Our work has repercussions. And we can use our talents for good — not just to line the pockets of our capitalist technocrat overlords. And maybe, just maybe, we have a civic duty to engage with politics.

After the 2016 election, several volunteer organizations popped up with the goal of connecting technologists with progressive candidates, whose tech acumen lags seriously behind that of Republicans. I spend a lot of my spare time volunteering for two such organizations, Tech for Campaigns and Ragtag. We get to support candidates and non-profits trying to introduce gun safety legislation, protect women’s healthcare, act to mitigate climate change, and further many more progressive issues.

These are both huge organizations. TFC boasts over 10,000 volunteers. I’ve personally collaborated with easily a hundred other technologists on political or non-profit websites, and digital advertising for candidates across the country. There are so many volunteers that I get ridiculously excited when I see someone I recognize working on a project. Tech feels like a super small industry sometimes, so getting to meet so many new folks I wouldn’t have otherwise gotten to know? That’s gold.

Working with fellow tech folks on these projects gives me so much hope for the future. Everyone I’ve worked with, regardless of background, job, or experience, has been enthusiastic, kind, and dedicated to making a positive difference. It’s such a different vibe from the “I was just doing my job” discourse I see so often on Twitter.

Getting to work with candidates and their staffers is like a whole new world into how grassroots politics works. I’ve learned a lot just by my small measure of involvement. It’s humbling to see how much technology doesn’t matter sometimes, especially with local campaigns where knocking on doors and talking to people face-to-face can make the biggest difference. Not our usual “tech is the most powerful industry” narrative, eh?

To me, new technology is always fun and interesting. But seeing so many people volunteer to support progressive causes? That lights a fire in my gut. That makes me want to keep trudging forward, step by step. Together, we can make a difference.

The post Embrace the Political appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

What the web still is

November 21st, 2019 No comments

Being a pessimist is an easy thing to fall back on, and I’m trying to be better about it. As we close the year out, I thought it would be a good exercise to take stock of the state of the web and count our blessings.

Versatile

We don’t use the internet to do just one thing. With more than two decades of globally interconnected computers, the web allows us to use it for all manner of activity.

This includes platforms, processes, and products that existed before the web came into being, and also previously unimagined concepts and behaviors. Thanks to the web, we can all order takeout the same way we can all watch two women repair a space station in realtime.

Decentralized

There is still no one single arbiter you need to petition to sign off on the validity of your idea, or one accepted path for going about to make it happen. Any website can link out to, or be linked to, without having to pay a tax or file pre-approval paperwork.

While we have seen a consolidation of the services needed to run more sophisticated web apps, you can still put your ideas out for the entire world to see with nothing more than a static HTML page. This fact was, and still is, historically unprecedented.

Resilient

The internet has been called the most hostile environment to develop for. Someone who works on the web has to consider multiple browsers, the operating systems they are installed on, and all the popular release versions of both. They also need to consider screen size and quality, variable network conditions, different form factors and input modes, third party scripts, etc. This is to say nothing about serving an unknown amount of unknown users, each with their own thoughts, feelings, goals, abilities, motivations, proficiencies, and device modifications.

If you do it right, you can build a website or a web app so that it can survive a lot of damage before it is rendered completely inoperable. Frankly, the fact that the web works at all is nothing short of miraculous.

The failsafes, guardrails, redundancies, and other considerations built into the platform from the packet level on up allow this to happen. Honoring them honors the thought, care, and planning that went into the web’s foundational principles.

Responsive

Most websites now make use of media queries to ensure their content reads and works well across a staggeringly large amount of devices. This efficient technology choice is fault-tolerant, has a low barrier of entry, and neatly side-steps the myriad problems you get with approaches such as device-sniffing and/or conditionally serving massive piles of JavaScript.

Responsive Design was, and still is revolutionary. It was the right answer, at the right place and time. It elegantly handled the compounding problem of viewport fragmentation as the web transformed from something new and novel into something that is woven into our everyday lives.

Adaptable

In addition to being responsive, the web works across a huge range of form factors, device capabilities, and specialized browsing modes. The post you are currently reading can show up on a laptop, a phone, a Kindle, a TV, a gas station pump, a video game console, a refrigerator, a car, a billboard, an oscilloscope—heck, even a space shuttle (if you’re reading this from space, please, please, please let me know).

It will work with a reading mode that helps a person focus, dark and high contrast modes that will help a person see, and any number of specialized browser extensions that help people get what they need. I have a friend who inverts her entire display to help prevent triggering migraines, and the web just rolls with it. How great is that?

Web content can be read, translated, spoken aloud, copied, clipped, piped into your terminal, forked, remixed, scraped by a robot, output as Braille, and even played as music. You can increase the size of its text, change its font and color, and block parts you don’t want to deal with—all in the service of making it easier for you to consume. That is revolutionary when compared to the media that came before it.

Furthermore, thanks to things like Progressive Web Apps and Web Platform Features, the web now blends seamlessly into desktops and home screens. These features allow web content to behave like traditional apps and are treated as first-class citizens by the operating systems that support them. You don’t even necessarily need to be online for them to work!

Accessible

The current landscape of accessibility compliance is a depressing state of affairs. WebAIM’s Million report, and subsequent update, highlights this with a sobering level of detail.

Out of the top one million websites sampled, ~98% of home pages had programmatically detectable Web Content Accessibility Guideline (WCAG) errors. This represents a complete, categorical failure of our industry on every conceivable level, from developers and designers, to framework maintainers, all the way up to those who help steer the future of the platform.

And yet.

In that last stubborn two percent lives a promise of the web. Web accessibility—the ability for someone to use a website or web app regardless of their ability or circumstance—grants autonomy. It represents a rare space where a disabled individual may operate free from the immense amount of bias, misunderstanding, and outright hate that is pervasive throughout much of society. This autonomy represents not only freedom for social activities but also employment opportunities for a population that is routinely discriminated against.

There is a ton of work to do, and we do not have the luxury of defeatism. I’m actually optimistic about digital accessibility’s future. Things like Inclusive Design have shifted the conversation away from remediation into a more holistic, proactive approach to product design.

Accessibility, long viewed as an unglamorous topic, has started to appear as a mainstream, top-level theme in conference and workshop circuits, as well as popular industry blogs. Sophisticated automated accessibility checkers can help prevent you from shipping inaccessible code. Design systems are helping to normalize the practice at scale. And most importantly, accessibility practitioners are speaking openly about ableism.

Inexpensive

While the average size of a website continues to rise, the fact remains that you can achieve an incredible amount of functionality with a small amount of code. That’s an important thing to keep in mind.

It has never been more affordable to use the web. In the United States, you can buy an internet-ready smartphone for ~$40. Emerging markets are adopting feature phones such as the JioPhone (~$15 USD) at an incredible rate. This means that access to the world’s information is available to more people—people who traditionally may have never been able to have such a privilege.

Think about it: owning a desktop computer represented having enough steady income to be able to support permanent housing, as well as consistent power and phone service. This created an implicit barrier to entry during the web’s infancy.

The weakening of this barrier opens up unimaginable amounts of opportunity, and is an excellent reminder that the web really is for everyone. With that in mind, it remains vital to keep our payload sizes down. What might be a reflexive CMD + R for you might be an entire week’s worth of data for someone else.

Diverse

There are more browsers available than I have fingers and toes to count on. This is a good thing. Like any other category of software, each browser is an app that does the same general thing in the same general way, but with specific design decisions made to prioritize different needs and goals.

My favorite browser, Firefox, puts a lot of its attention towards maintaining the privacy and security of its users. Brave is similar in that regard. Both Edge and Safari are bundled with their respective operating systems, and have interfaces geared towards helping the widest range of users browse web content. Browsers like Opera and Vivaldi are geared towards tinkerers, people who like a highly customized browsing experience. Samsung Internet is an alternative browser for Android devices that can integrate with their proprietary hardware. KaiOS and UC browsers provide access to millions of feature phones, helping them to have smartphone-esque functionality. Chrome helps you receive more personalized ads efficiently debug JavaScript.

Browser engine diversity is important as well, although the ecosystem has been getting disturbingly small as of late. The healthy competition multiple engines generates translates directly to the experience becoming better for the most important people in the room: Those who rely on the web to live their everyday lives.

Speaking of people, let’s discuss the web’s quality of diversity and how it applies to them: Our industry, like many others, has historically been plagued by ills such as misogyny, racism, homophobia, transphobia, and classism. However, the fact remains that the ability to solve problems in the digital space represents a rare form of leverage that allows minoritized groups to have upward economic mobility.

If you can’t be motivated by human decency, it’s no secret that more diverse teams perform better. We’ve made good strides in the past few years towards better representation, but there’s still a lot of work to be done.

Listen to, and signal boost the triumphs, frustrations, and fears of the underrepresented in our industry. Internalize their observations and challenge your preconceived notions and biases. Advocate for their right to be in this space. Educate yourself on our industry’s history. Support things like codes of conduct, which do the hard work of modeling and codifying expectations for behavior. All of this helps to push against a toxic status quo and makes the industry better for everyone.

Standardized

The web is built by consensus, enabling a radical kind of functionality. This interoperability—the ability for different computer systems to be able to exchange information—is built from a set of standards we have all collectively agreed on.

Chances are good that a web document written two decades ago will still work with the latest version of any major browser. Any web document written by someone else—even someone on the opposite side of the globe—will also work. It will also continue to work on browsers and devices that have yet to be invented. I challenge you to name another file format that supports this level of functionality that has an equivalent lifespan.

This futureproofing by way of standardization also allows for a solid foundation of support for whatever comes next. Remember the principle of versatile: It is important to remember that these standards are also not prescriptive. We’re free to take these building blocks use arrange them in a near-infinite number of ways.

Open

Furthermore, this consensus is transparent. While the process may seem slow sometimes, it is worth highlighting the fact that the process is highly transparent. Anyone who is invested may follow, and contribute to web standards, warts and all.

It’s this openness that helps to prevent things like hidden agendas, privatization, lock-in, and disproportionate influence from consolidating power. Open-source software and protocols and, most importantly, large-scale cooperation also sustain the web platform’s long-term growth and health. Think of web technologies that didn’t make it: Flash, Silverlight, ActiveX, etc. All closed, for-profit, brittle, and private.

It also helps to disincentive more abstract threats, things like adversarial interoperability and failure to disclose vulnerabilities. These kinds of hazards are a good thing to remember any time you find yourself frustrated with the platform.


Make no mistake: I feel a lot of what makes the web great is actively being dismantled, either inadvertently or deliberately. But as I mentioned earlier, cynicism is easy. My wish for next year? That all the qualities mentioned here are still present. My New Year’s resolution? To help ensure it.

The post What the web still is appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Emcee Tips for a Conference or Meetup

November 21st, 2019 No comments

There are some great resources out there to help conference speakers give better talks, but fewer for people who are preparing to take on the role of emcee at meetup or conference.

I’ve been fortunate enough to emcee conferences more than 20 times now, most recently JAMstack_conf which I help organize. I also enjoy hosting smaller, less formal meetups which benefit just as much from having somebody to keep things rolling nicely along.

Since emcee-ing is a rather visible role, I often get asked, “Got any tips for emcee-ing?” I do. At the same time, note that there is no substitute for finding the approach that fits you and lets you be yourself. But I’ve found what works for me, and what I enjoy in an emcee when I’m attending or speaking at a conference.

Here’s my advice:

Biggest tip: Enjoy yourself.

I find that trying to relax (yeah, easy to say) and remembering that the audience want you to succeed really helps. When you remember that you’re not hosting the Oscars (if you are reading this in preparation for hosting the Oscars, please contact me directly. DMs are open), and that people are very happy with you being human and personable, it gives you license to relax and talk to the room as if everyone is your friend. That’s liberating and helps you to be more natural.

The crowd’s view of the stage at Vue.js London. Image copyright www.edtelling.com.

To err is human

While we all want things to run as smoothly as possible, mistakes happen. Don’t panic or let them throw you off too much. I find that owning mistakes and communicating them honestly to the audience can be a feature rather than a bug. It also helps them trust you and be on your side. (I believe that there is only one “side” at a conference anyway. And this can help to establish that.)

Many of the moments I consider highlights have come from some silly mistake I’ve made on stage, like giving the wrong information and being corrected by the audience. It’s fine. We’re in it together. Have a little fun with it.

Technical difficulties

It’s really common for there to be technical difficulties during a conference. They often only take a few moments to resolve, but they can occasionally drag on and become a little uncomfortable.

As a speaker it is horrible to think that you are on your own to fix things while a room full of people impatiently watches on. As an emcee, you can help enormously by being ready to jump in if it looks like things might need some time and concentration from the speaker, or if a helpful member of the audio-visual team is sprinting to the stage.

I like to step back on the stage to provide a little buffer. No need to panic. Often just a little company on stage and some headspace is all that is required. My trick is to keep a little pocket-sized notebook on me all day. I keep a few notes ready, things like news and announcements for the audience. Where will the refreshments be later? Who are the sponsors and where can you find them? What are the details for the social later on? Those kinds of things. You may need them at the start of the next break anyway, but you can buy a little time for the speakers and save time for later by being ready to share that at this “handy opportunity.”

“Me again! We’ll get this fixed in a second. While we have a mo…”

Even when there isn’t a problem, the speaker might still take a little time to plug in their laptop, be certain that they can see their speaker notes, and so on. If the conference does need each speaker to plug in as they come to the stage, I like to invite them up while I introduce them, and then check that they are ready when it looks like they have stopped tinkering with their setup. This doesn’t need to be a secret from the audience. “It looks like Jina is ready to go. Are you all set? Excellent! OK, a big round of applause please, for…”

Longer pauses. Oh this is getting awwwwwkward!

Every once in a while, there is a larger technical issue. The audio-visual team is on it, but you’ve used up all your padding material, pulled a couple of jokes from your back pocket, and now you and the speaker are stranded on stage with nothing to say and that horrible feeling of not knowing where to put your hands so that you look natural. Not to worry. Be honest.

Eventually the audience will start to feel awkward too, so cut this off at the pass. If things look like they really do need a few minutes, tell the audience. A bright and breezy update buys you some time and some good will.

“It looks like we still need a couple more minutes to figure this out, so we’ll step off stage for a moment and then come on again to enjoy a second, bonus round of applause. Don’t go anywhere, we’ll be right back!”

This sort of thing can take the pressure off everyone. Including the audience. And you can milk that second round of applause for the speaker as they return.

Just be honest. Everyone is on your side, remember.

Practice all the names

A mistake that makes me uncomfortable is botching somebody’s name when I introduce them. That is a bit of a fear I still have and I’ve done it many times despite my best efforts. I like to watch YouTube videos of all the speakers that I don’t already know to get a sense of what they’ve spoken about in the past, and also as a chance to listen to how they introduce themselves. I practice them out loud and write them down phonetically if they are tricky.

If you find a name particularly difficult, you can even use the voice recorder on your phone to capture how they pronounce it on YouTube, or your own best try, and then have it ready as a last-minute primer just before you need it.

Know more than the speaker’s bio

Speakers often get introduced by someone reading out their bio. I don’t think this gives the impression that you have enthusiasm for, or awareness of them. Both of which are, I think, valuable for creating trust with the audience and comfort for the speaker. I like to look them up and make some notes based on previous talks, the links on their own sites, or whatever else I can scrounge. I like to have an intro that goes beyond the bio that the attendees all have and will recognize as being read verbatim when they hear it.

Introducing Divya Sasidharan onstage at Vue.js London. Image copyright www.edtelling.com.

Jake has a good thought related to this:

… it shouldn’t matter if the speaker has published 18 books, or if they’re just an intern starting out their career, their talk content is what matters.

Yes! Listing their full resume isn’t the point at all. I personally just like to convey that I know who this is, and that I’m not encountering them for the first time as I read the schedule — and that I’m looking forward to hearing what they have to say, irrespective of how extensive their previous experience or fame may be.

It’s also worth double-checking that the job title and company details you have for somebody are still correct. It’s nice to make sure that you didn’t miss a recent role change.

Another good nugget from Jake is to avoid surprising the speaker. I’ve wandered into this territory before where I’ve enthused about a speaker in their introduction and mentioned a bunch of things that they were planning to say for themselves in their intro. As he says:

Make the speaker aware of the kind of intro they’ll get, so they can adjust their own intro accordingly.

That’s good. Communicating with the speaker ahead of time so that you can tune your own intro is likely to be easier than them adjusting their own content, what with slides and timings, etc.

“No surprises” is probably a good motto for this.

Avoid “in jokes”

When you emcee, you might sometimes be introducing somebody you know. Perhaps it’s a friend, a colleague, or somebody you shared a nice chat and giggle with at the reception or dinner the night before. While I think it’s fine to reference a history or relationship in an intro for context, It’s safer to focus on things that everyone can relate to and not just those who already know you or the speaker.

Private jokes don’t mean anything to the vast majority of the audience, and can even alienate you a little by creating a bit of a clique as Jan thoughtfully mentioned on Twitter.

Don’t assume or rely on “fame”

“This next speaker needs no introduction” is rarely true. Even if it’s likely that a lot of people in the room might already know who a given speaker is, there will be some who don’t.

As Luke observed:

Don’t assume the audience knows who the speaker is.

Each speaker deserves a nice introduction. And there will always be some in the audience thinking “who dis?” Even a little background can be a helpful foundation and give the speaker a nice springboard to get started.

Announce and thank people with vigor

I’ve been introduced quite a few times in ways where I’ve been unsure whether the intro is over or not! I like to be sure that the final thing I say is the name of the speaker. (Not their talk title, although I’ll likely mention that and possibly the themes in my introduction.)

An onstage introduction at Vue.js London. Image copyright www.edtelling.com.

Ending the intro with the speaker’s name seems painfully obvious, but I do this even if I’ve used their name earlier in the intro. It makes the handoff emphatic and acts as an obvious cue for audience applause. Using an intonation which suggests “it’s time to clap right now!” is also helpful. Again, it seems obvious but giving the audience clear cues is important.

Let the speakers give the talks

You might sometimes be opinionated about the topic of the next talk. Maybe you’ve given talks on the same subject yourself. Great, that will come in handy if you need to ask informed questions after the talk. But don’t fall into the temptation to show this off during your intro. The speakers are “the show” — not the emcee. And the person you are introducing is the one invited to share their expertise.

I sometimes show I value the upcoming topic, but I advise against flexing your knowledge muscles during an intro. You might cannibalize the content, or even contradict it. And you’ll never communicate it in an intro as well as the speaker can during the actual talk. You might come off as being cocky.

Don’t step on the speaker’s toes. Let them present the content. This is why everyone is here.

Prep speakers for questions and answers

If there is Q&A that you’ll need to lead or curate, it’s important to know that in advance. It is one of the first things I’ll ask the organizer in the run up to a conference. I like to ask the speakers at the speaker dinner the night before the event or when they are getting mic’d up (but earlier really is better, especially when they have time to think while being relaxed) if there is anything they’d like me to ask or avoid saying altogether. There are often things people can’t include due to time and this can be a chance to squeeze that in and also serve as a nice soft ball question to get things started and let them settle in.

Some speakers might not want to take questions. I like to make sure about that first, and steer the event organizers away from it if somebody prefers not to have it.

Housekeeping is a good boilerplate

At the opening of the day, I usually jump quickly into the various housekeeping stuff of toilets, exits, code of conduct, etc. soon after saying my initial hello and maintain an enthusiastic posture about the day. It doesn’t require much imagination and can help you settle in.

Don’t forget to introduce yourself too!

Ask the organizers what they need

Along the way, there might be a need to mention sponsors, inform people of food, or even other things. I like to check in with the organizers at every break to see if there is anything they need me to announce. Maybe there can be a private Slack channel or Whatsapp group so you can stay in contact with them. That way you can find out if they need to adjust timings or any other odds and ends as you go.

Most of all though, and to repeat my first point a little, allow yourself to enjoy the experience. It’s so much fun when the speakers and audience are enjoying themselves.

Make sure you ride that wave and have fun too!

My checklist

I have this little checklist as a starting point for the events I’ll be emcee-ing. It changes a bit depending on what the conference needs.

Prep speaker intro notes
Prep speaker name pronunciation notes
Confirm format for Q&A with organizers
Prep seed questions for each talk
Share event notes Google Doc with organizers
Access/create emcee slack channel or WhatsApp group
Confirm or create event intro/outro slides if appropriate
Get housekeeping notes from organizers
Get familiar with code of conduct and contact info to share
Confirm event hashtags to share
Get sponsor call-out requirements from organizers
Meet AV team and discuss transition format
Brief speakers on transition format and get ok for questions
Get water / pen / notepad / mic
Breath. Smile. Have fun.


What have I missed? Got any good tips? I’d love to hear them. Feel free to leave thoughts and suggestions in the comments.

The post Emcee Tips for a Conference or Meetup appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Create Amazingly Stable Tests Your Way — Coded and Code-Less

November 21st, 2019 No comments

Testim’s end-to-end test automation delivers the speed and stability of AI-based codeless tests, with the power of code. You get the flexibility to record or code tests, run on third-party grids, fit your workflow and tools including CI, Git and more. Join the Dev Kit beta to start writing stable tests in code.

About Testim

At Testim, we too are developers and testers, striving to release quality software faster. We built Testim because writing stable end-to-end tests was just too hard. We were the first to build an AI-based functional test automation solution. Since we launched in 2014, we’ve been adding features, improving quality, and proving our solution with customers every day.

Create tests your way

There are two ways to create tests in Testim — record them using the Testim Extension or code them in your IDE. Actually, there’s a third and recommended approach for those who want to code—record the test, export it as code and modify it in your IDE.

When you record a test, each UI action leverages our AI-based platform to analyze the DOM, weigh the attributes associated with an element and create Smart Locators that uniquely identify elements. If attributes such as the color, class, text or location of an element are changed by development, our AI will still be able to uniquely identify the element so that your test doesn’t fail.

Customize tests

Testim has many features built into the visual test editor to help you customize your tests such as validation of text, email, PDFs, or conditions and loops. You can also insert JavaScript into any step so that you can handle nearly any UI situation.

If you are into JavaScript, you can also export your test as code and customize, debug, or refactor it your IDE; the choice is yours.

Execute your cross-browser tests

When your tests are ready, you can run on-demand or schedule a test run within Testim. We also make it really easy to run your test following a CI action. Tests can be parallelized and across all browsers on our test cloud or any Selenium-compatible test cloud.

Report results

Regardless of how your tests were created (code or codeless) when they run, you will see the results in Testim so you can troubleshoot. If you find an application defect, our bug capture tool makes it really easy to create a bug report, complete with screenshots, video and the test steps to recreate it. Pop it into Jira or Trello to submit your report in minutes. Our reporting shows test run history, including managerial reports so you can show all of the great work you’ve been doing and that releases are ready to ship.

Testim is the fastest way to create your most resilient end-to-end tests, your way—codeless, coded or both. For more information go to www.testim.io.

The post Create Amazingly Stable Tests Your Way — Coded and Code-Less appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

Embracing the Universal Web

November 21st, 2019 No comments

There are constantly new features appearing in browsers—from subgrid to variable fonts to better developer tools. It’s a really great time to be re-thinking everything we know about design on the web. Responsive design has served us well over the years, but it’s still rooted in the limitations of the web from 2010. Ten years later, we’re able to create more “Intrinsic” designs (a term coined by Jen Simmons) and hopefully, re-think some “best practices” that are now holding us back.

That’s exciting but even more interesting to me in the context of a universal web. I began my career during the height of the Web Standards Project, CSS Zen Garden, Designing with Web Standards, and A Dao of Web Design—saturated in the philosophy of universally accessible design. CSS was relatively new, and explicitly designed to balance the desires of a web-creator (like me) with the needs of each individual user (also me), on any number of devices. Terms like “progressive enhancement” and “unobtrusive JavaScript” dominated the industry. We were moving away from “only works in X browser” warnings, to embrace an accessible and resilient user-centered medium.

Over the years, some of those concerns have become industry best-practice. CSS is now standard, and responsive design is the norm. But I also see (and build!) more and more apps targeted at a narrow range of modern, evergreen browsers. Or we ignore new features for years in order to support a browser like IE11. We’ve become resigned to a sense that browser support is binary, and we can only use the features that exactly match our “supported” browsers.

There are many reasons for that shift, including excitement around very cool new features. I don’t think it’s surprising for an industry to have these cycles, but I do think it’s time to reflect on where we’re heading. These new features are designed with universal accessibility in mind, and we also have new features for managing browser-support on a continuum, much like viewport-size.

Whatever we want to call it—Intrinsic Design, Resilient CSS, Progressive Enhancement, Universal Accessibility, or something else—I think we’re poised for a new movement and a new era of web creation. It’s time for us to take the lessons we learned from Responsive Web Design, adapting to screen sizes, and expand out: adapting to screen readers, legacy browsers, “smart” speakers, and any number of other interfaces.

I’m interested in new methodologies and conventions that move past managing specificity and cascade, or phones and laptops, to help us all manage accessibility and universal compatibility. I’m interested in finding ways to embrace all that is wonderful and new on the web, without abandoning the beautiful vision of a universal web. We have the tools. Let’s do this.

The post Embracing the Universal Web appeared first on CSS-Tricks.

Categories: Designing, Others Tags:

How To Use FOMO To Increase Conversions

November 21st, 2019 No comments
Best Buy out of stock

How To Use FOMO To Increase Conversions

How To Use FOMO To Increase Conversions

Suzanne Scacca

2019-11-21T11:00:00+00:002019-11-22T05:35:49+00:00

Consumers are motivated by need and desire. And sometimes, just sometimes, they’re motivated by FOMO. That’s right: we can now add the ‘Fear Of Missing Out’ to the list of drivers that get consumers onto our websites and into our apps.

With that said, when we take a closer look at what FOMO really means and the negative impact it can have on consumers, is it something we really want to be encouraging as we build digital experiences for them? My answer to that is:

Yes, but you must use FOMO responsibly.

FOMO can be a really effective tool to add to a marketing and sales strategy. As a web designer, though, you need to find ethical ways to appeal to your users’ fear of missing out. Today, I’m going to show you some options for doing this.

A More Ethical Way To Design with FOMO

FOMO stands for “fear of missing out”, and while it might seem like some innocuous acronym like YOLO or LMAO, this isn’t a cute way of saying “Wish I were there!”.

The fear part of FOMO is all too real.

A 2013 study titled “Motivational, emotional, and behavioral correlates of fear of missing out” defined FOMO as:

A pervasive apprehension that others might be having rewarding experiences from which one is absent, FoMO is characterized by the desire to stay continually connected with what others are doing.

One of the conclusions from the report was that “FoMO was associated with lower need satisfaction, mood, and life satisfaction.”

It’s not just scientists taking note of the negative effects of FOMO in marketing, social media or otherwise. The Competition and Markets Authority went after hotel booking sites for using misleadingly urgent and deceptive discount marketing messages to increase sales.

Even without the fear of retribution from some standards authority, you really need to think about how your web and mobile apps leave your users feeling. A little bit of envy might be fine, but once the general sentiment trickles over to jealousy, disappointment or stress, it’s time to reassess what you’re doing and why.

Let’s take a look at some ways you can leverage the underlying concept of “missing out” and strip away the fear elements.

Quick note: All of the examples below are from mobile apps, however, you can use these design principles on websites and PWAs as well.

Gently Remind Visitors About Limited Availability

There’s nothing wrong with presenting limits to your users on what’s available or for how long it will remain available. It only becomes a problem when how you convey this sense of urgency or limitation causes stressful decision-making.

This is something I talked about in a recent post, “How to Stop Analysis Paralysis with Web Design”.

Basically, when you induce stress in your visitors or consumers, it makes the decision-making process more difficult and can lead to regretful purchases or no purchases at all. In that last article, the focus was on the drawbacks of presenting customers with too many choices.

However, the same kind of response (i.e. dissatisfaction and overwhelm) can happen when you put pressure on them to make a choice on the spot.

So, instead of displaying a large timer counting down the minutes left to buy items in their shopping cart or a bright red banner that screams “24-Hour Sale!”, use more gentle reminders around the site or app.

Best Buy has an entire section on its product pages dedicated to in-store and online availability:

Best Buy out of stock

Best Buy lets customers know when products are out of stock in store and online. (Source: Best Buy) (Large preview)

Now, if this were a product with only one color or memory option, I’d suggest removing it from the online inventory altogether. If you can’t provide a date when the product will become available again or put customers on a waitlist, don’t bother teasing them with an out-of-stock listing.

That said, this item has multiple variations, which makes the “sold out” notice quite potent.

Paul Messinger, a professor of business and researcher at the University of Alberta, commented on this phenomenon:

Sold-out products create a sense of immediacy for customers; they feel that if one product is gone, the next item could also sell out. Our research shows there’s also an information cascade, where people infer that if a product is sold out, it must have been good and therefore a similar available product will also be desirable.

What’s also nice about displaying sold-out products is that it reduces the number of choices consumers have to make. Granted, some may be unhappy because the silver phone they wanted is unavailable, but, as Messinger says, this limitation on what they can buy might encourage them to try another variation of the product.

One of my absolute favorite examples of gently nudging consumers to use or buy your products is Hulu:

Hulu app expiring content

The Hulu app has an entire tab dedicated to “Expiring” content. (Source: Hulu) (Large preview)

There is an entire tab in the app that lets users know which content is about to expire.

For those of you who stream content like a maniac (like myself), you know how easy it is to lose track of shows and movies you’ve added to your list. You also know how hard it can be to find the perfect thing to watch when you have dozens of options sitting in your queue, especially if you use more than one streaming service.

That’s why this “Expiring” tab is brilliant. The second I see it, I think, “Either use it or lose it, Suzanne” — which is incredibly motivating. Also, the fact that I have a much shorter list to work with helps me get to a decision more quickly.

This would be useful for e-commerce websites, for sure. If you have products that are low in inventory, give them a dedicated space for shoppers to peruse — kind of like a bargain bin without the bargain.

If your website runs a number of offers simultaneously, you could use a similar approach as well. Create a page for “Offers” or “Rewards” and break out a separate tab that shows users all the offers that are about to expire.

Call Attention to Rewards

When selling something online — be it a subscription to a repository of plugins or a store full of products — don’t forget to enable account registration. Sure, it’s a nice touch for users that want the convenience of saving account details so they don’t have to input them with each new purchase. There’s another reason to encourage your users to register though:

So you have a way to call attention to their spendable rewards.

FOMO isn’t always the fear of missing out on what others are doing. Sometimes it’s just a fear of missing the chance to get a really good deal. Promoting attractive sales offers (“75% off everything in store!”) is one way to do that, but, again, you have to recognize that that’s only going to stir up issues caused by the paradox of choice.

A softer but still effective way to compel users to buy sooner rather than later is to show off their rewards totals or expiration dates.

As a Gap customer, this is one of my favorite things about shopping with them. Whether I’m in store, on the app, shopping through the website or looking through my email, I receive these kinds of reminders:

Gap rewards reminder

Gap reminds logged in users when they have rewards to spend. (Source: Gap) (Large preview)

The “Redeem your Super Cash” reminder is the first thing I see when I log in. Even if I’ve gone to the app with the intention of just window browsing, that rewards reminder (and the impending expiration) almost always motivates me to buy something so I don’t lose my member perks.

Unlike sales banners that promote generic offers, this approach works really well because you’re appealing to loyal customers — the ones who’ve already signed up for an account and have a history of buying from you.

And if you’re worried about a banner of that size taking up too much space in your app or mobile website, think again:

Gap pulsing blue rewards reminder

Gap uses a pulsing blue ticker in the top-left corner to remind users about unspent rewards. (Source: Gap) (Large preview)

Gap doesn’t continually show the rewards reminder.

See the icon in the top left corner with the circle over it? That circle is pulsing. It’s there to let customers know that there’s something to look at before they check out. And that something are the rewards they need to spend before they lose them.

Hotels.com, on the other hand, dedicates an entire page to rewards:

Hotels.com Rewards tab

Hotels.com users can access their free night rewards on the “Rewards” tab. (Source: Hotels.com) (Large preview)

It’s similar to that urge people feel to log into social media just to check on what’s going on and to make sure they’re not missing anything. This “Rewards” tab should send a similar vibe: “Hmmm… I wonder how close I am to my free night?”

Although you can’t see it here, Hotels.com has a policy about how long customers can hold onto these earned nights before they lose them. (It’s just below this section.) By gently reminding users about this stipulation, it likely encourages its rewards members to book more trips so they can get their free night.

Encourage Sharing with Friends and Family

One of the problems with building FOMO into a website — much like any marketing you do for business — is that it’s coming from you. Until you’ve earned the trust of visitors and users, how are they supposed to believe a product marked as a “Top Seller” really is what you claim it to be? Social proof is supposed to help mitigate these kinds of concerns, but even that can be faked.

You know what I think is a more effective way to generate FOMO? Let your customers and clients do it for you.

Here’s how Airbnb does it:

Airbnb 'Invite friends' feature

Airbnb rewards its users for inviting friends. (Source: Airbnb) (Large preview)

The “Invite friends” feature encourages users to let their friends, family and colleagues know about how awesome the Airbnb experience is.

Hey, I just booked this awesome apartment in Montreal for Christmas. You’ve got to check this out! Oh yeah, you also get $40 off your first booking!

Even the headline on the landing page encourages them to share the experience; not just do it to get free travel credit (though that’s a nice incentive, too):

Airbnb referral program

Airbnb encourages its users to share their love of travel by rewarding them and their referrals with travel credits. (Source: Airbnb) (Large preview)

Imagine that friend who’s busy running a business and in dire need of a vacation. They receive this offer from you — a person they know and trust. Of course, their reaction is going to be, “I need to do that, too!” And with a discount code in hand, that’s a pretty strong source of motivation to get in the app and make a purchase.

You’ll find another great example of generating FOMO through your users from the 23andMe website:

 23andMe 'Share your Ancestry'

The home page for 23andMe invites users to ‘Share your Ancestry’. (Source: 23andMe) (Large preview)

For those of you who haven’t signed up for one of these genetic testing services, it’s actually pretty cool. You submit a saliva sample and they tell you what your ancestral background is (as well as how it can affect your health). But it’s more than just, “Your maternal family originates from Turkey.” It gets super-specific on what parts of the world your ancestors are from.

Notice that banner in the screenshot above that says “Share your Ancestry”? That’s where users find auto-generated social posts that are designed to be share-worthy (they look like Facebook and Instagram Story cards):

23andMe social sharing

23andMe auto-generates social posts users can share with their friends and followers. (Source: 23andMe) (Large preview)

This is my ancestral breakdown according to 23andMe. So, let’s say I want to joke about how boringly anti-nomadic my ancestors were on Twitter. I could edit the banner or share it as is. And guess what? That’s free advertising for 23andMe, even if I chose to ditch the logo they placed at the bottom of the file.

As those posts reach social media connections — those that know the user or those that are only acquainted with them online — FOMO starts to rear its head. “Oooh! I really want one of these! Where’d you find this out?”

With this kind of FOMO marketing on your site or app, you can stop relying so much on heavily-discounted sales events and other urgency-inducing tactics (which will cost you more in the long run). Instead, let your users generate that intensified interest.

Use More Grounded Photos and Designs

You’ve no doubt heard about lifestyle influencers using shady promotional tactics to increase sales.

One of the most well-known examples of this is the Fyre Festival, which created a bunch of buzz on social media thanks to promotional videos of celebrities and supermodels partying it up in the Caribbean. The people behind this failed festival didn’t care about the experience. They focused solely on the image of it and consumers ate it up with a spoon — until they realized that image was a lie once they got there.

Then, you have micro-influencers who try to make money from affiliate sales. However, all is usually not what it seems as Jordan Bunker explained to The Guardian:

All isn’t how it is perceived on Instagram. People assume I have a great life and everything is handed to me. I live with my parents and I work from a desk in my room; it’s not like I have a separate working space or office.

That’s not the only deception. Influencers often make their luxurious lives seem like something that’s easy to achieve. The reality, however, is that many of them have to work really hard to stage their life, every second of every day, hoping to get the perfect shot that will make consumers want to follow them or buy the stuff they promote.

But as Lucie Greene, an analyst who specializes in consumer behavior, pointed out:

We’re seeing a rising awareness of how social media use and influencer culture affects mental health, from Fomo (Fear of Missing Out) to driving compulsive, addictive consumption, to feelings of isolation.

Granted, the messages alone that influencers send to followers are often problematic. But so, too, are the images. So, as you design your website and integrate photos from your clients or from stock photo sites, think about what message you’re really sending.

Sephora, for instance, promotes its products with photos of the actual products. You might see a model or two on the top of the home page. For the most part, though, the focus is on the products.

That said, cosmetics and other beauty products can be used to convey a certain image and lifestyle — one that consumers desperately want. So, is Sephora missing out on an opportunity to create a “Sephora Lifestyle” by not photographing models using its products?

Sephora Inspire community

Sephora lets its users’ photos inspire the right kind of FOMO. (Source: Sephora) (Large preview)

Unlike many other retailers who might share photos of models living their lives in some far-off, exotic locale while wearing their products, Sephora doesn’t do that. The only time you really see photos of its cosmetics and products in action is here, in its “Inspire” community.

So, rather than leave its customers pining for some life that they may unconsciously associate with the red lipstick they were thinking of picking up, real customers get the chance to paint a more realistic portrait of its products.

Sephora Inspire gallery

A gallery of product photos from the Sephora Inspire page. (Source: Sephora) (Large preview)

As consumers grow weary of artificially enhanced photos and scenarios, you’re going to find it harder to make them feel like they’re missing out. However, by allowing your customers to provide a real look at what your products can do (and this goes for any kind of product, physical or digital), that’s where you’ll start to see consumers responding to feelings of missing out.

Before I wrap up here, I want to point out that this isn’t just for companies that sell affordable products.

The Inner Circle, for example, is an exclusive dating app. In order to join, users must first be prescreened and approved.

Now, you might think that a luxury brand like that would want to use influencer-like photos to show users how much they’re missing out by not dating in their “class”. But they don’t.

The Inner Circle dating app with bar photo

The Inner Circle luxury dating app doesn’t focus on the luxurious side of dating. (Source: The Inner Circle) (Large preview)

In this first example from the app’s signup page, you can see that the focus is on finding a popular spot to hang out and meet people. While the black-and-white filter does give it a swankier vibe, there’s nothing about the people in the photo that necessarily screams “Exclusive!”

The same thing goes for this photo:

The Inner Circle dating app with date in the park photo

The Inner Circle paints dating in a positive and natural light. (Source: The Inner Circle) (Large preview)

This is the kind of date most people would go on: a date in the park. The people in the photo aren’t all glammed up or wearing clothes made by high-end luxury designers.

These photos feel accessible. They let users know that, at the end of the day, they’re using this app to make real-life connections. There’s nothing exclusive about that.

And if a luxury brand like The Inner Circle can send that kind of message to its users with photos, then any brand should be able to do the same and be successful with it. Just be honest in what you’re portraying, whether it’s a photo of someone cooking with your products or a look inside the real (not illustrated) dashboard of your SaaS.

If you want to give prospects the feeling that they’re about to miss out on something worthwhile, just be real with them.

Wrapping Up

Maybe not today and maybe not tomorrow, but deceptive FOMO tactics will eventually catch up with you when customers start to realize they were misled by inflated numbers, exaggerated scenarios or seemingly time-sensitive or exclusive offers.

Remember: the websites and apps you build for clients shouldn’t just attract and convert customers. They also need to help your clients retain that business and loyalty over the long term. By being more responsible with the messages you’re sending, you can help them accomplish that.

(ra, yk, il)
Categories: Others Tags:

Is There a Viable Alternative to Javascript?

November 21st, 2019 No comments

The short answer to the title question is “no.”

The long answer is more complex, and begins with, “kindof…” There are several JavaScript alternatives for developers, but (for now) they have to be transpiled into JavaScript before they’re deployed.

People Love to Hate JavaScript

This is not a surprise, if we consider some obvious drawbacks of this programming language, including IEEE 754 Double Precision, the fact that a number of functions and properties tend to be executed differently across browsers, aggressive coercion, and problematic global variables (to name just a few).

However, a recent survey that included 98,000 developers has revealed that JavaScript is actually the second most-loved programming language, with 49% voting in favor of it.

From my point of view, what’s not to love about a programming language that allows for autocomplete, rollover, and dropdown menu effects, animating different elements on a page, and playing audio and video among many other cool features responsible for rich customer experiences?

Besides, we’re talking about an evergreen language compatible with many other languages, and this versatility is extremely important.

The Good of JavaScript

There’s really much to love when it comes to JavaScript, so here are some of the reasons why it’s one of the most popular and widely-used programming languages:

  • It’s the only de-facto option when it comes to front-end development and client-side interface, as it allows programmers to create all kinds of interactive elements and dynamic web pages;
  • JavaScript is light, has a simple syntax, and uses the Single Threaded Event Loop model which eliminates much of the programming complexity;
  • It’s prototype-oriented;
  • With the introduction of Node.js, JavaScript unlocked the back-end programming options once reserved only for the server-side languages such as Java, Python, or Ruby.

The Bad of JavaScript

Here’s why some developers would like to avoid JavaScript as much as possible:

  • It’s weakly typed, which makes the code comparatively obscure;
  • Since users can see the code, JavaScript can be used for malicious purposes and compromise the client-side security;
  • The code has to be tested on different browsers before publishing because it won’t execute in the same way on every browser;
  • The lack of debugging makes it difficult for developers to spot a problem.

Viable Alternatives to JavaScript

It would only be fair to say that there are no true alternatives to JavaScript in the sense that the entire JS framework can be circumvented.

All these alternatives are actually workarounds that only allow you to avoid JavaScript when writing code, but the thing is that the code you write for a typical user computer needs to be run on it. These alternatives use the process of transpiling another language to JavaScript.

Here are 5 noteworthy alternatives that significantly improved JavaScript.

1. Dart

Dart is an object-oriented C-like language Google built in an attempt to replace JavaScript. Dart is statically-typed, meaning that it eliminates some of the most common error sources in JS code. It supports type inference which is a big plus.

Still, one of the most beneficial features of this JS alternative lies in the fact that it allows you to go beyond client-side development and create standalone applications. With Google’s UI toolkit, it’s possible to build native web, desktop, and mobile apps. However, being new to programmers and not so frequently used in the market, Dart offers limited online resources, meaning that you can’t easily find a solution once you bump into problems.

2. TypeScript

Developed by Microsoft, TypeScript is actually more like a superset of JavaScript meaning that it basically adds new methods, improves and modernizes the existing JS features, and removes its certain limitations, and most importantly adds optional static typing. In other words, after being compiled to JS, apps written in TypeScript can be viewed in almost any browser.

For example, Angular.js is built entirely in TypeScript.

Another plus of this JS alternative is that it’s compatible with Node.js.

However, the community is smaller and coding in TypeScript requires more time.

3. Kaffeine

Kaffeine is actually a set of extensions to the JavaScript syntax intended to make certain tasks much easier. For example, it helps front-end devs with JavaScript’s callback functions given that it supports asynchronous operations.

With Kaffeine, the process of debugging is much simpler, and besides being easy on developers, this JS extension is also beneficial for the end-user as the browser doesn’t freeze which means that user experience is smooth.

Again, a much smaller community and the lack of resources make this programming language a bit obscure.

4. Elm

Elm is a statically typed functional language that bears more similarity to Haskell than C, but unlike the former, it doesn’t leave developers scratching their heads over its complexity.

It differs from JavaScript mainly because it’s not a general-purpose language, but a solution which will provide advanced front-end web app development experience.

While coding in Elm, developers get immediate notifications when an error occurs so that they can fix it in a timely manner, which prevents numerous bugs in the later development stages. The tagline that this program uses is “no runtime exceptions in practice” which basically means that if an app written in Elm starts running at all, it will be unlikely to crash.

Some of its downsides include the lack of server-side, a steeper learning curve, and the fact that it’s missing some of the higher-level capabilities.

5. CoffeeScript

CoffeeScript is said to improve the readability of the original language as well as simplify code and make it shorter. Its compatibility with Node.js is another advantage.

However, it’s important to mention that developers who want to use CoffeeScript still need to be prolific in JavaScript. One of its main disadvantages is a limited set of features as well as the fact that JavaScript released its ES6 version upgrade which practically rendered CoffeeScript redundant (this upgrade accelerated JavaScript and made it almost as fast as CoffeeScript).

The Bottomline

In a nutshell, JavaScript is, at the moment, a one of a kind client-side programming language, and it’s here to stay.

These alternatives can enhance it, and address some of its shortcomings, but cannot really run without a JavaScript framework, so it’s safe to say that we’ll still have to wait for JavaScript’s true successor which will be able to work independently of it.

Featured image via Unsplash.

Source

Categories: Designing, Others Tags:

7 Ways to Find a Niche for Your Ecommerce Store

November 21st, 2019 No comments

Discovering your niche within a crowded marketplace can give even the most seasoned entrepreneur a tension headache.

With good reason—it’s difficult. But, difficult problems can always be tackled with a combination of ingenuity, research, and good ol’ fashioned elbow grease. Here, we’ll show you the steps to discovering your niche, and how you can capitalize on it.

Research your competitors
Propose new solutions
Whittle down
Determine profitability
Utilize analytics
Run tests
Rinse and repeat

Propose new solutions Whittle down Determine profitability Utilize analytics Run tests Rinse and repeat

1. Research your competitors

Smart marketing within your niche requires information. Being able to outmaneuver your competitors and pull in new customers relies on your ability to evaluate the field. That means competitor analysis. You don’t have to build out a complicated spreadsheet with pivot tables, graphs, and formulas, but knowing who you’re competing with is the first step to determining how you can behave differently.

Find them

Finding competitors is usually pretty easy, and your primary tools are going to be Google and Amazon. Running searches for your niche will give you a good idea of who is top ranking in both areas. If you’re starting a business selling specialized, highly technical outerwear, searching with keywords that become more and more specific will get you closer and closer to your true competition. Don’t just stick with “outerwear,” add more specific adjectives, like “technical outerwear,” “low-temperature technical outerwear,” and see what comes up.

Categorize them

Imagine your business at the center of a bunch of expanding concentric circles, and place your competitors in orbit around you.

  • Main – These are the competitors who are selling the same thing you are, likely to a similar audience.
  • Outside the circle – These are competitors who might be selling a similar product, but in a different price category, or to a different audience entirely.
  • Tangential – Competitors who aren’t competitors yet, but you might be adding products later that will bring them into your competitive space.

What’s their CX

Look at your main competitors. What is their customer experience? Pretend you’re one of their customers and walk yourself through their buyer journey. Where do you see obstacles? What works well, what doesn’t? These sorts of questions will be integral to defining your own position within the niche. Thinking about how you can differentiate can often start with CX, and it might just be as simple as adding a store to your popular blog.

What’s their market position

What do your competitors sell the most of? Why do people gravitate towards their products instead of other products? If we’re talking outerwear again, people purchase from Patagonia and Mountain Hardware for entirely different reasons. This is a market position. If you don’t think you can outcompete a competitor on a particular area of market position, try to fill in a gap.

Pricing, shipping

How do your competitors price their products? If you can position your product as a cheaper, higher quality option, that might be a way in. Going the luxury route is viable too. The key is to determine what might set you apart, and moving your business towards that.

2. Propose new solutions

Now that you’ve done quite a bit of competitor research, you can start shaping your messaging and potentially tweaking your products to match. This is where the research you’ve done comes in. Look at your main competitors. What does your product or service do that theirs fails to?

That isn’t to say that you need to do the opposite of your competitors in every possible area, that might lead you tying yourself into knots. But, if your competitors don’t have the best customer services, or one of their products has a reported problem that hasn’t been resolved, that might be your in. Here are a few examples of businesses that saw a problem and proposed a different solution:

  • Rheos Sunglasses – Sunglasses that are designed to float, especially useful for people who fish who often drop their glasses into the water.
  • Untuckit – Men’s dress shirts often look a bit goofy and billowy when untucked, so this company made shirts that are designed to be worn untucked.
  • Quip – Electric toothbrushes aren’t anything new, but Quip pairs sleek form factor with an accessible subscription model.

Finding a niche and selling within it doesn’t always mean reinventing the wheel! Sometimes you’re just trying to find a way to make it a bit smoother.

3. Whittle it down

Part of finding a good niche is specificity. It’s not enough to just say things like “we do things differently from our competitors.” What things? And how do you do them differently?

One of the best ways to whittle down your ecommerce store and your products to suit a particular niche is to try and boil down what makes you different and interesting into a single compelling sentence. This doesn’t have to be your tagline or anything, but it can be the pillar that you build your brand presence around.

As a silly example that demonstrates this idea, let’s say your business makes modular customizable purses. You can swap out the strap with different colors and patterns, you can add different accessories, the whole shebang. Essentially this business turns around a simple idea, and here’s the sentence: “Our company lets you build your own purse.” This is a niche idea, as purses exist in the world of designer fashion, so the audience is going to be likely small, but anyone who’s looking for a DIY or custom purse is going to find you right away.

4. Determine profitability

Profitability is a crucial part of any store creation/product research process. If you search for products of a similar type to those sold in your ecommerce store, and you don’t find anything, that might be a bad thing–that means that nobody has yet been able to monetize the niche. You might be the first, but it could also be a warning sign that nobody’s biting.

But, if there’s a reasonable amount of products within the niche you’re looking to compete in and it isn’t oversaturated, that’s a good sign. Take note of what people are charging for their products, and see how you can price yours competitively.

5. Utilize analytics and algorithmic advertising

If you’ve already got an ecommerce store up and running, utilizing analytics drawn from services like Google Analytics can be invaluable for discovering and defining your niche. See where your traffic is coming from. If you have customers coming in from a particular demographic or from a specific traffic source, see what happens when you pivot towards those customers.

You can also use data to create marketing and advertising campaigns that are targeted to your niche. Shopping, a service from Google, can create and manage machine learning-driven ad campaigns that can draw new customers toward your products. Some ecommerce services even offer this as part of a paid plan, reducing your overall costs.

6. Run tests

Nobody’s an expert on their products, business, or niche on the first go around. Part of developing and discovering your niche is trying out new ideas and making mistakes. Fear of failure keeps many business from success, and the only true failure is not taking the things that you learn and using them to grow.

Run tests! Try different versions of copy in product descriptions. Use different photography for product images. Anything and everything about your product can be changed, and finding and leveraging what works is an essential part of growing, especially as a small, untested business.

7. Rinse and repeat

One of the hallmarks of a successful business is continuous iteration. You’re going to be constantly evaluating and tweaking your business and products to ensure maximum ROI and maximum customer satisfaction, because both of those directly translate to sales. Once you’ve found your niche, the journey doesn’t end. Perhaps you can refine even further? Maybe you’re ready to start competing at a larger scale. The possibilities are endless, and with enough creativity, your business endeavors will be a success. Good luck!

Categories: Others Tags:

7 Ways to Find a Niche for Your Ecommerce Store

November 21st, 2019 No comments

Discovering your niche within a crowded marketplace can give even the most seasoned entrepreneur a tension headache.

With good reason—it’s difficult. But, difficult problems can always be tackled with a combination of ingenuity, research, and good ol’ fashioned elbow grease. Here, we’ll show you the steps to discovering your niche, and how you can capitalize on it.

Research your competitors
Propose new solutions
Whittle down
Determine profitability
Utilize analytics
Run tests
Rinse and repeat

Propose new solutions Whittle down Determine profitability Utilize analytics Run tests Rinse and repeat

1. Research your competitors

Smart marketing within your niche requires information. Being able to outmaneuver your competitors and pull in new customers relies on your ability to evaluate the field. That means competitor analysis. You don’t have to build out a complicated spreadsheet with pivot tables, graphs, and formulas, but knowing who you’re competing with is the first step to determining how you can behave differently.

Find them

Finding competitors is usually pretty easy, and your primary tools are going to be Google and Amazon. Running searches for your niche will give you a good idea of who is top ranking in both areas. If you’re starting a business selling specialized, highly technical outerwear, searching with keywords that become more and more specific will get you closer and closer to your true competition. Don’t just stick with “outerwear,” add more specific adjectives, like “technical outerwear,” “low-temperature technical outerwear,” and see what comes up.

Categorize them

Imagine your business at the center of a bunch of expanding concentric circles, and place your competitors in orbit around you.

  • Main – These are the competitors who are selling the same thing you are, likely to a similar audience.
  • Outside the circle – These are competitors who might be selling a similar product, but in a different price category, or to a different audience entirely.
  • Tangential – Competitors who aren’t competitors yet, but you might be adding products later that will bring them into your competitive space.

What’s their CX

Look at your main competitors. What is their customer experience? Pretend you’re one of their customers and walk yourself through their buyer journey. Where do you see obstacles? What works well, what doesn’t? These sorts of questions will be integral to defining your own position within the niche. Thinking about how you can differentiate can often start with CX, and it might just be as simple as adding a store to your popular blog.

What’s their market position

What do your competitors sell the most of? Why do people gravitate towards their products instead of other products? If we’re talking outerwear again, people purchase from Patagonia and Mountain Hardware for entirely different reasons. This is a market position. If you don’t think you can outcompete a competitor on a particular area of market position, try to fill in a gap.

Pricing, shipping

How do your competitors price their products? If you can position your product as a cheaper, higher quality option, that might be a way in. Going the luxury route is viable too. The key is to determine what might set you apart, and moving your business towards that.

2. Propose new solutions

Now that you’ve done quite a bit of competitor research, you can start shaping your messaging and potentially tweaking your products to match. This is where the research you’ve done comes in. Look at your main competitors. What does your product or service do that theirs fails to?

That isn’t to say that you need to do the opposite of your competitors in every possible area, that might lead you tying yourself into knots. But, if your competitors don’t have the best customer services, or one of their products has a reported problem that hasn’t been resolved, that might be your in. Here are a few examples of businesses that saw a problem and proposed a different solution:

  • Rheos Sunglasses – Sunglasses that are designed to float, especially useful for people who fish who often drop their glasses into the water.
  • Untuckit – Men’s dress shirts often look a bit goofy and billowy when untucked, so this company made shirts that are designed to be worn untucked.
  • Quip – Electric toothbrushes aren’t anything new, but Quip pairs sleek form factor with an accessible subscription model.

Finding a niche and selling within it doesn’t always mean reinventing the wheel! Sometimes you’re just trying to find a way to make it a bit smoother.

3. Whittle it down

Part of finding a good niche is specificity. It’s not enough to just say things like “we do things differently from our competitors.” What things? And how do you do them differently?

One of the best ways to whittle down your ecommerce store and your products to suit a particular niche is to try and boil down what makes you different and interesting into a single compelling sentence. This doesn’t have to be your tagline or anything, but it can be the pillar that you build your brand presence around.

As a silly example that demonstrates this idea, let’s say your business makes modular customizable purses. You can swap out the strap with different colors and patterns, you can add different accessories, the whole shebang. Essentially this business turns around a simple idea, and here’s the sentence: “Our company lets you build your own purse.” This is a niche idea, as purses exist in the world of designer fashion, so the audience is going to be likely small, but anyone who’s looking for a DIY or custom purse is going to find you right away.

4. Determine profitability

Profitability is a crucial part of any store creation/product research process. If you search for products of a similar type to those sold in your ecommerce store, and you don’t find anything, that might be a bad thing–that means that nobody has yet been able to monetize the niche. You might be the first, but it could also be a warning sign that nobody’s biting.

But, if there’s a reasonable amount of products within the niche you’re looking to compete in and it isn’t oversaturated, that’s a good sign. Take note of what people are charging for their products, and see how you can price yours competitively.

5. Utilize analytics and algorithmic advertising

If you’ve already got an ecommerce store up and running, utilizing analytics drawn from services like Google Analytics can be invaluable for discovering and defining your niche. See where your traffic is coming from. If you have customers coming in from a particular demographic or from a specific traffic source, see what happens when you pivot towards those customers.

You can also use data to create marketing and advertising campaigns that are targeted to your niche. Shopping, a service from Google, can create and manage machine learning-driven ad campaigns that can draw new customers toward your products. Some ecommerce services even offer this as part of a paid plan, reducing your overall costs.

6. Run tests

Nobody’s an expert on their products, business, or niche on the first go around. Part of developing and discovering your niche is trying out new ideas and making mistakes. Fear of failure keeps many business from success, and the only true failure is not taking the things that you learn and using them to grow.

Run tests! Try different versions of copy in product descriptions. Use different photography for product images. Anything and everything about your product can be changed, and finding and leveraging what works is an essential part of growing, especially as a small, untested business.

7. Rinse and repeat

One of the hallmarks of a successful business is continuous iteration. You’re going to be constantly evaluating and tweaking your business and products to ensure maximum ROI and maximum customer satisfaction, because both of those directly translate to sales. Once you’ve found your niche, the journey doesn’t end. Perhaps you can refine even further? Maybe you’re ready to start competing at a larger scale. The possibilities are endless, and with enough creativity, your business endeavors will be a success. Good luck!

Categories: Others Tags: