Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 21 2019

18:51

What the web still is

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.

16:46

10 Easiest Content Management Systems (CMS) of the Year

The significant benefits of using a CMS are that such software is often user-friendly. These programs enable users to translate their ideas to practicality quickly. The maintenance and updates are regular and easy to handle. It is highly cost-efficient with out-of-box solutions, freeware or open-source. There is a broad scope for functionality using a large number of extensions and plugins. There is a great developer and community support as well.

A Content Management System refers to a software application that can be used for creating and modification of digital content. CMS is generally used for web content management and enterprise content management. ECM (Enterprise Content Management) supports multiple users in a collaborative environment by integrating digital asset management, document management and record retention. Whereas, WCM (Web Content Management) is a collaborative authoring of websites and can include graphics, photos, audio, videos, programmes and maps that display content and interact with the user. Most CMS systems have two aspects to them: Content Management Application (CMA), which is the front end user interface that allows users even who have limited expertise to add, modify or remove content from a website. The second aspect is the Content Delivery Application that compiles and updates the website.

Hence all these advantages act as parameters of a sound CMS system, and it becomes essential to find out the best CMS software available to ensure you can design a great website with absolute ease. This is why we discuss the 10 Easiest Content Management Systems (CMS) of the Year; you should try for your next website.

1. WordPress:

10 Easiest Content Management Systems (CMS) of the Year- WordPress

WordPress has always been a popular option for bloggers for its easy-to-use and open-source flexibility. It has a million plugins to choose from, and it enables you to add on anything you can imagine or want to add to your website. WordPress is excellent software for people who are just starting with a digital marketing professional as well. It was launched in 2003 as a simple blogging site and dominant open-source web development platform and is one of the most effective and widely used CMS systems. Websites like The New York Times, CNN and music celebrities like Jay Z and Katy Perry and also few of the Fortune 500 companies such as eBay, UPS have used WordPress designing and development.

The few advantages of this CMS is that it is very cost-effective, it allows you to update your site from anywhere provided you have access to the internet, it is SEO ready and it is excellent for in links as each new blog entry goes to the RSS feed which makes it easy for others to syndicate your blog across other websites and directories.  It has a responsive web design which eradicates the need for developing separate websites for different devices.

WordPress has an absolute advantage over the other websites in a way that it allows the user to update content as quickly and as many times as you want which is crucial in this content-driven competitive market. It also makes the process a lot easier and less complicated. It also helps build credibility within a user’s niche if he/she continually keeps updating their website content as per the ongoing trends or updates.

2. HubSpot:

10 Easiest Content Management Systems (CMS) of the Year- HubSpot

HubSpot is a great platform that cuts the hassle and cost of integrating all of the requisite components for digital marketing. It does so by providing all those features & plugins in one all-inclusive package. The best part of HubSpot is that it offers what you see is what you get approach. This enables the users to create precisely what they see without having to visualize any element in their mind, and use minimum knowledge on how to edit. The CMS comes with a good setup SEO support, responsive designs, multi-device and cross-browser testing, also many personalizations offers.

Many traditional content management systems gained popularity for allowing users to manage and update their content on their website easily; however, HubSpot takes it one step further by providing smart content that delivers targeted content to a specific group of people. It is configured in a way that it identifies people from their buying journey’s lifecycle stage or contact list. There is a custom template builder which lets you customize a design to a great extent without having any prior knowledge in website design. HubSpot has a unique approach to email marketing, as it has an email workflow that sends a series of emails to the clients depending on the client’s online behaviour that makes the mail reach them at the right time and hence increases the chances of them reading it exponentially.

3. Kentico:

10 Easiest Content Management Systems (CMS) of the Year- Kentico

Kentico is the all-in-one CMS that allows the user to build and manage their website, manage eCommerce, publish their content and run marketing campaigns from one platform. It has a clean User Interface and also a ‘What You See is What You Get’ (WYSIWYG) editor.  Kentico claims to be only ASP.NET Model View Controller support CMS, which is a web development platform that is provided by Microsoft, used for creating website applications.

The support for multilingual content allows managing website in multiple languages, and also is an added benefit largely appreciated as the reach of the potential visitor’s increases exponentially as the barrier of language gets diluted.  The open API system allows endless possibilities for integration and its advanced scalability ensures that you won’t ever outgrow the platform. Since security is Kentico’s one of the top priorities it gives you features like Double Opt-in Registration, User Mangement, Module Permissions which allows you to take advantage of one of the authentication services provided by Kentico or use one of your authentication services into the system. It is the choice of some popular companies like Starbucks, Mazda and Gisbon Guitars.

4. Sitefinity:

Sitefinity Content Management System

Sitefinity has a good user interface making it easy for new users to operate this platform. There are several widgets, SEO optimization, A/B test functionality, eCommerce, forms, and easy accommodation for large businesses that need to manage more than once brand across multiple regions. There are connectors for Marketo, Salesforce, Microsoft Dynamics CRM, Sharepoint and prebuilt marketing tools as well. The visitors of websites are shifting towards browsing from mobiles more than desktops these days.

This is why many marketers are strategizing their website promotion on mobile phones. Sitefinity identifies this trend and allows developing optimized websites for seamless mobile browsing experience. It takes it a step further by allowing you to create apps to reach out to more people. Digital Asset Management is a feature of Sitefinity that allows you to organize file hierarchy, tag the files and make use of metadata for searching for files.This makes it easy to manage pages as you keep updating more pages over the years as your website grows.

5. Joomla:

Joomla-Content-Management-System-CMS

Joomla is another popular CMS system that is cost-free like WordPress. It has over 75 million websites under its belt. There are thousands of extensions and ready to use themes. Most people find it easy to use Joomla even with zero technical expertise. There is a little need for customization from the users end to get all the features of a premium CMS system that you might expect to get out of the box. Joomla can be used to make a website of any category.  Irrespective of whether it’s a small, personal blog or a huge online store with thousands of pages.

It is very flexible, reliable and provides a one-stop solution for all purposes.  Joomla has support for all social media networks and creating links for them is very easy. It is great for managing small websites as it gives you complete ease and control of maintaining them yourself. The plugins are greatly categorized, which makes the user experience of searching for essential plugins a lot friendlier.

6. Mura Content Management Systems:

Content-Optimization-Mura

Mura is a little specific for people who can take full advantage of its potential as a CMS. It works best for developers, programmers, executives, designers and government organizations. Being a platform which is open-source, it has many advantages such as easy-to-use experience moreover also increases productivity. It provides support for mobile optimization, SEO optimization, licensing, posting across several platforms and scalability, among other various other features. There is support for multi-sites with a strong CMS system that allows managing multiple websites with a single code base. Switching between sites is also smooth using the administration panel providing a seamless multitasking experience.  It uses modern web technologies such as AJAX to improve the user experience for developers and content managers; hence, it has great content management capabilities and also content architecture.

7. CrownPeak:

10 Easiest Content Management Systems (CMS) of the Year- Crown Peak

CrownPeak has a great user experience across almost all the platforms. It allows the user to create great websites without prior technical knowledge. It has a powerful cloud-native platform. This cloud platform has a built-in quality assurance that helps you with all the tools needed for creating high quality, contextual experiences. Once you publish your website using CrownPeak, you can build and edit content in-line or take advantage of editing with WYSIWYG controls. You can create and publish content to one site or hundreds of website at the same time. There are thousands of custom models and templates to meet any content requirement moreover is also supports  A/B testing and targeting rules. There are translation tools and content localization that helps reach thousands of people and at the same time, moreover keeping the content authentic as well.

8. Oracle:

10 Easiest Content Management Systems (CMS) of the Year- Oracle Webcenter Content

Oracle WebCenter Content has a single storage facility to house unstructured content, enabling business organizations to deliver it in the right style to business users and within the factors of known applications that fit their working style.  It is an enterprise-level content management system with end-to-end management from the inception to achieving. It is best suited for large, established companies. Their customer support is credible as they continuously maintain their CMS quality by solving bugs as soon as possible.  It is an enterprise-level CMS that requires a minimum 10-user purchase which makes it a little expensive as compared to other CMS systems.

9. idev Content Management Systems:

10 Easiest CMS of the Year- idev CMS-americaneagle

idev CMS comes across as an ideal CMS solution. It is designed to grow in sync with your business. Right from smaller start-ups to large scale businesses, this platform is widely used. Its users love its ease of learning and using. For page building, it uses WYSIWYG which lets the user create new pages as per need. They also allow the user to customize content wherever required and build contact or search forms with ease. The platform it provides is very developer-friendly and allows flexibility of customization wherever needed. It is ideal for customer support. The software was build and is updated and implemented by the same group of people. This means there would be no ambiguity as to whom to call for support. Other option would be to wait for a long time before an official update to improve and fix bugs.

10. Evoq Content:

10 Easiest CMS of the Year- Evoq

Evoq Content is one of the Content Management Systems that works best for the IT and marketing departments alike given its enterprise nature. Firstly, it strikes a good balance between providing the right set of functionalities and at the same time, being easy to operate. Secondly, it has content creation features, and it is SEO ready. Moreover, it also has the added benefit of workflows which let several users interact with each other. By doing so it also allows personalization to a large extent. This makes it possible for users to implement marketing campaigns easily. It is also an open platform source and has many choices for themes which can be tailored as per need.

It is a great CMS platform for saving time. The software understands key page metrics which eradicates the need of having a separate analytical system such as Google Analytics. It captures many aspects of page views, conversions, bounce rate and traffic sources. All these factors help the user understand and improvise on their strategy accordingly. Evoq gives you the freedom to link your Google Analytics via an in-built connector.

These are the 10 Easiest Content Management Systems of the Year you should look out for your next project. Above all, make sure the CMS must be selected as per your digital marketing strategy.

The post 10 Easiest Content Management Systems (CMS) of the Year appeared first on Line25.

15:20

Emcee Tips for a Conference or Meetup

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.

15:19

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

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.

14:52

Embracing the Universal Web

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.

14:00

20+ Mobile App Wireframe Templates: iPhone + Android

If you want to create a mobile app with a great user experience, you should always start your project with a wireframe. In this post, we share a collection of modern mobile app wireframing templates to help you get started in your design process.

When using a wireframe template, you won’t have to spend hours crafting layouts, buttons, image placeholders, and all the other elements that take hours to create from scratch. All you need to do is edit the templates and rearrange the elements to make your own app wireframe design.

We’ve handpicked some of the best mobile app wireframes you can use to design both iPhone and Android app user interfaces, all in various file formats.

Top Pick

High Fidelity – Android & iOS Wireframe Kit

High Fidelity - Android & iOS Wireframe Kit

High Fidelity is a massive collection of wireframing templates that includes layouts for designing Android and iOS app user interfaces.

This bundle features mobile wireframe designs in 7 different categories. You can edit and fully customize the templates using Adobe XD, Sketch, and Figma as well.

Why This Is A Top Pick

This wireframing kit is quite special. Not just because it has lots of professional layouts. Mainly because it includes layouts for both iOS and Android apps. And it also comes in multiple file formats.

Baseframe – Wireframe UI KIT 200+ Templates

Baseframe is another huge bundle of wireframe templates. This pack comes with more than 200 unique layout templates. It supports both iOS and Android mobile app designs and the templates are available in Sketch file format.

iOS Wireframe Mobile UI KIT (PSD)

If you’re a fan of Photoshop, you can use this mobile wireframing kit to design unique app wireframes using your favorite app. It includes 150 unique templates you can easily customize using Photoshop. The UI kit is also available in Sketch and Adobe XD format as well.

Letur – Mobile App Wireframe Kit

Don’t let those bright pink colors confuse you. This is not a wireframe kit made just for designing feminine mobile app designs. It’s also suitable for many other app user interface designs. It includes 26 easily editable mobile layouts in Adobe XD and Photoshop formats.

Pride – Minimal Mobile Wireframe Kit

Pride is a collection of minimal mobile wireframing templates featuring various user interface templates for crafting mobile app experiences. The bundle includes more than 30 unique interface designs in Photoshop PSD file format.

Collector – iOS Wireframe UI Kit

Another big collection of wireframe templates. This kit is designed for iOS mobile app layouts. It comes with more than 200 templates with layouts in 22 different categories. You can customize them using Adobe XD.

Free Creative iOS Wireframe Kit

This is a bundle of free wireframe templates. It includes a set of simple mobile screen layouts with beautiful modern designs. The templates are easily customizable as well.

Free Mobile Wireframe Kit For Adobe XD

This free wireframing kit includes minimal and clean mobile user interface designs. You can easily customize the designs using Adobe XD to make them your own.

Minimal Mobile Wireframe Kit Templates

If you’re looking for a mobile wireframing kit with a simple design, this bundle of UI templates is for you. It includes more than 90 unique mobile app wireframe templates featuring simple and clean designs. The templates are also available in both Sketch and Illustrator file formats.

Sketchy – Creative iOS Wireframe Kit

Sketchy is a bundle of creative wireframing templates for designing iOS app interfaces. It comes with 218 app interface templates that are made up of over 500 elements. The templates are available in 29 different categories.

Dashboards & Charts – iOS 13 Wireframe Kit

This collection of mobile wireframing templates are fully optimized for crafting iOS 13 app interfaces. In addition to dashboard and chart wireframes, this series also includes templates for walkthroughs, settings pages, and more. Be sure to download them all.

UIXO – iOS 12 Wireframe UI & UX Kit

A unique wireframing kit for designing iOS apps with dark color themes. This bundle comes with more than 100 unique app screens in 16 categories. You can download the lite version of this wireframing kit here.

Liberty – Mobile Wireframe Kit Sketch & PSD

Liberty is a modern wireframing kit you can use to craft trendy and stylish app designs. The bundle includes 125 app screen layouts in 9 categories. The templates are also available in Sketch and Photoshop file formats.

Free Sketch Mobile Wireframe Kit

Another free wireframing kit for designing various mobile app interfaces. This kit includes over 20 unique wireframe templates with easily editable layouts. The templates come in Sketch file format.

Free Music App Wireframe UX Kit 

This free wireframe kit features a complete design of a music app. It includes wireframes for all screens you’ll need to design an app, especially ones for streaming music.

Skeletal – Mobile Wireframe Kit PSD

Craft the perfect mobile app skeleton using this unique wireframing kit. It includes 22 unique screen layouts featuring easily customizable designs. You can edit the wireframes using Photoshop.

Mobnet – Mobile App Wireframe Kit

Another wireframe kit for designing modern mobile user interfaces. This kit comes packed with 23 different app layouts with organized layers and free fonts. The templates are available in PSD file format.

iPhone – iOS App Wireframe Kit

This kit if iOS app wireframes it most suitable for designing blogging and magazine app interfaces. It includes 90 screen designs that are compatible with iPhone X and iPhone 11. You can edit them using Sketch.

Turbo – iOS App Wireframe Kit

Turbo is a bundle of iOS wireframe templates that comes with layouts in 9 different categories. It includes a total of 100 mobile UI templates. You can easily edit and customize them to your preference using either Sketch, Illustrator, or Photoshop.

55 Printable Wireframe Templates

Being able to print your wireframe designs can be quite beneficial. It will allow you to show off your wireframe designs in meetings and to clients. This bundle includes 55 templates for both desktop and mobile interfaces with printable designs.

eBlocks – Free eCommerce Wireframe Kit

This free wireframing kit features multiple mobile screen layouts for designing eCommerce apps and stores. The templates are available in an easily editable Sketch file format.

Free Mobile Wireframe UI Kit (Sketch)

Another free mobile wireframing kit featuring simple user interface layouts. This kit comes with multiple screen designs you can use to craft unique apps for both iOS and Android.

Working on a website design? Then check out our best website wireframe templates collection.

11:00

How To Use FOMO To Increase Conversions

How To Use FOMO To Increase Conversions

How To Use FOMO To Increase Conversions

Suzanne Scacca
2019-11-21T11:00:00+00:002019-11-21T15:35:15+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.

Smashing Editorial(ra, yk, il)
08:08
7 Ways to Find a Niche for Your Ecommerce Store
00:29

It’s my job, and yours.

The role of ethics in our modern web space has been on my mind for the past few years and I suspect it will occupy my thoughts increasingly as I move forward. With each encounter of a questionable feature or setting on a website, I can't help but think of all of the people involved and the discussions that may (or may not) have taken place.

Marketing has always straddled the line between promoting a product to an open and willing target audience and outright manipulating those who don't need it (have you watched toy commercials with a young child lately?). For better or worse, persuasion in marketing has proven to be effective. Fortunately, it is fairly easy to spot an advertisement, even when disguised as sponsored content or product placement. This is what sets marketing apart from some of the more hidden aspects that are built into the apps and sites we use every day.

Many of the discussions surrounding design ethics are focused on privacy, data collection, and analysis by mega-companies and social networks. While there are many unsolved issues in this space, I hope we don't limit our thoughts and conversations to these global apps. In fact, the smaller the product or company for which you are working, chances are the bigger impact you will have. With that in mind, let's explore some ways we can be more mindful when creating our next product.

Research and Communication

Fundamental to the design and development of anything we publish is research and communication. Asking yourself or your team a series of questions may help facilitate important conversations and decisions. These may include:

  • Why are we creating this?
  • Who is most affected by this?
  • What outcomes should we consider?
  • Could we do better? How?
  • Could this cause harm?

While unintended consequences are unavoidable by nature, thinking through these questions upfront could help avoid negative impacts later.

Consider Your Team

A team of people with diverse backgrounds and life experiences can contribute to building a more thoughtful product. When creating something for a wide variety of people, it is best to include a wide variety of people throughout that build process. If your team is small (I was a team of 1 for many years), then try to do usability testing and research with people who don't necessarily have your same background, interests, and career.

Consider Your Role

Ethics in design isn't only about the things you create, but it is also carried out in the conversations you have. Informing your boss or client that the feature they requested isn't ideal can be undesirable, but it is your responsibility to tell them why and what, if anything, could be done to make it better. It is almost always easier to complete a list of requests rather than explore options and present a case for why and how something else should be considered. You were hired for your expertise.

What's Your Legacy?

While not everyone has the luxury of having their dream job or working on an ideal project, it is important for me to be able to look back at the end of the day and be proud of the work I have done. Is your work helping others? Are you creating something that makes this world a better place? If so, I'd love to hear more about it.

So, when asked what about building websites has you interested this year? the role of ethics in the design and development of the things we use every day weighs heavy on my thoughts.

Also, variable fonts.


If you are interested in learning more about Ethic in Design, here are some resources that I recommend:

The post It’s my job, and yours. appeared first on CSS-Tricks.

November 20 2019

21:27

The future is bright, because the future is static

I've been doing this web thing for money for 10 years this year and although I haven’t been around as long as some folks, I feel like I've seen a few cycles come and go now, so let's say that hot new things are often cynically viewed, initially. This milestone of mine has also got me in a retrospective mood, too, and the question “What about building websites has you interested this year?“ has only encouraged that.

When I first came into the industry, I was an out-and-out designer, delivering static comps to developers until after one-too-many poor builds of my work: I decided to get into code myself. Naturally I focused purely on the front-end—specifically HTML and CSS. Yes, I got a bit into JavaScript too (once Flash became fully irrelevant), but markup and styles have always been my favorite things about web technology. I've never really been into back-end development, either. Sure, I can do it, but it’s certainly not my strong suit and usually this weakens my offering a touch—especially as a freelance web designer. Well, it did weaken me, until now.

JAMstack: an awful name, but awfully empowering.

I love JAMstack because it empowers people like me, who aren’t very strong with back-end stuff, and the aspect of JAMstack that I like the most—and which I think is the best part—is static site generators (SSGs). I’m talking specifically about SSGs like Eleventy and less-so Gatsby here, for reference.

The biggest reason that I like SSGs like Eleventy is that I can have a completely flexible, component-driven codebase that at build-time, compiles down to nothing but lovely, static HTML. You still get the power of JavaScript too, but instead of forcing it down the pipe, you run it at compile-time. This has enabled me to do some pretty darn complex stuff. Eleventy does all of this at lightning speed, too.

Mix Eleventy with Netlify and in some cases, Heroku, and suddenly you have a powerful development setup which results in a fast, performant website that auto-deploys. It’s perfect setup for me.

This stuff excites me so much that I made an Eleventy starter kit this year called Hylia. I did this for two reasons:

  1. I wanted to test the viability of a content-managed static-site that uses source controlled content. I chose Netlify CMS to do this
  2. I wanted to empower people without tech skills to publish a performant, accessible blog of their own, so they didn’t have to rely on centralised systems

The platform went down really well and I think part of the reason for its success is that even though it’s (optionally) content managed, powered by design tokens and fully componentized, it performs really well because all you get is HTML and CSS with a bit of progressively enhanced JavaScript.

This is the magic of SSGs, because they give us developer experience, but much more importantly, because the output is static and lightweight (unless you prevent that with lots of code), it creates a really solid basis for a good user experience, too! This isn’t just the case for small projects like Hylia, too, because SSGs can even power huge projects like the Duet Design System, for example.

Looking back at the empowerment that SSGs enable, I’ll just list some things that they have enabled me, a web designer, to do this year:

  • Self-publish a book
  • Create rapid, interactive prototypes for clients which has completely transformed the decision making process
  • Build actual, full websites for clients
  • Completely transform my design process to use HTML and CSS as a deliverables, rather than static comps
  • Build and document an incredibly comprehensive, multi-platform design system (WIP)
  • Re-platform my CSS newsletter (WIP)

These are huge things that have had a massive, positive impact on me and next year, SSGs are only going to feature more in my work as I transition into providing educational material, too.

Wrapping up

The future is bright with the JAMstack and SSGs—especially when what is delivered to the end-user is fast, progressively enhanced websites. I honestly think that they are creating a momentum wave towards a bigger focus in performance, too.

If we chuck in some serverless technology: suddenly, designers and front-end developers really are all powerful and this really excites me because suddenly, we give lots of people power to have great ideas that might not have been able to before.

The post The future is bright, because the future is static appeared first on CSS-Tricks.

18:18

The Typed Object Model

I help write technical documentation and one feature I've been writing about this year that has really stood out is the Typed Object Model (or Typed OM). If you haven't come across it yet you would be forgiven as it's pretty new. It falls under the CSS Houdini suite of API's and on the surface seems the least exciting. However, it underpins all of them and will eventually change how we view CSS as a language.

It allows for typing of values in CSS. Remember the base syntax of CSS:

selector {
  property: value;
}

That value can be a lot of things, colors, units, images, words. Which to CSS makes sense, but to us, when we access it and try to change it via any means, it comes as a string.

Typed OM allows that to be returned as a type instead. So if we were to access, say 10px in JavaScript, instead of '10px' being returned, we get the number 10 and the unit 'px'. Which is a whole heap easier to work with.

You may have seen some of Ana Tudor's amazing demos. In her example 'Hollow', she registers custom properties in JavaScript to use in her CSS. She's using the Properties & Values API and thus can determine the types of these properties. This wouldn't be possible if Typed OM wasn't around.

How about an example

On the face of it, it seems a little bit more work than the way we're used to accessing and setting styles at the moment, but there are a lot of benefits. If we want to, say, get the width of an element we would do something like this:

const elementWidth = getComputedStyle(myElement).width;
// returns '300px'

Not only are we accessing a string here, but getComputedStyle forces a re-layout. We may not be aware of what units are being used, and so accessing the numerical part of the string becomes tricky, and if we are running this in our code a number of times it could harm performance.

If we want to use Typed OM and return a typed value we would have to access the properties and values via computedStyleMap() and it's get() method:

const elementWidth = myElement.computedStyleMap().get('width');
// returns CSSUnitValue {value: 300, type: 'px'}

Now we can access the value and the unit separately, and the value here is returned as an integer.

elementWidth.value // 300
elementWidth.unit // 'px'

We also haven't forced a re-layout, which is nothing short of a win. Bet you're now wondering and yes, not only can you access the CSS value as a type, but you can create unit values pretty easily as well, via the global CSS object:

let newWidth = CSS.px(320);
// returns CSSUnitValue {value: 320, type: 'px'}

That's a small example and one that's easy to show, as the units part of the specification has been fleshed out somewhat considerably to some other value types. But regardless it allows for a lot less string matching and flexibility.

Another set of values which is well specced are transform values: translate, rotate, scale, etc. This is great because if we wanted to change one of these values on an element without Typed OM, it can be tricky, especially if we've set more than one.

.myElement {
  transform: rotate(10deg) scale(1.2);
}

Let's say we wanted to increase the rotation. If we access this property with getComputedStyle() a matrix is returned.

const transform = getComputedStyle(myElement).transform;
// returns matrix(0.984808, 0.173648, -0.173648, 0.984808, 0, 0)

With the transforms we have on the element, we can't possibly pull out one value from the matrix. I'm not going to go all vectors, scalar values, and dot product here, but suffice to say, you can't pull out one value once the matrix has been formed. There are definitely going to be numerous mappings.

If you have just a transform or scale, this is possible by string matching where the value is in the matrix. But that's information for another day.

We could use custom properties to set the value of these transforms and update those:

.myElement {
  --rotate: 10deg;
  transform: rotate(var(--rotate)) scale(1.2);
}
myElement.style.setProperty('--rotate', '15deg');

However, we need to know the name of the custom property and we are still passing in a string.

Enter Typed OM. Let's take a look at what's returned from the computedStyleMap:

myElement.computedStyleMap().get('transform');
/* returns
CSSTransformValue {
  0: CSSRotate {...}
  1: CSSScale {...}
} */

Each transform value has its own type. There's CSSRotate and CSSScale for the above code. As well as all the others like skew and translate. So instead of dealing with matrix, or still working with strings, we can create these types and apply a CSSTransformValue with them.

const newTransform = new CSSTransformValue([
  new CSSRotate(CSS.deg(15)),
  new CSSScale(CSS.number(1.2), CSS.number(1.2))
])
myElement.attributeStyleMap.set('transform', newTransform);

Notice how we're creating the transform types with the class method and the new keyword, rather than the factory method used with the numerical values.

We have a lot more control over each individual value, something much needed when we declare multiple values in CSS.

I put together a Pen with all this example code here.

It's the foundations

As we begin to get more familiar with other API's within the Houdini suite, the benefits of all of this will become even more obvious. When we declare a new custom property with the Properties and Values API, we set a type and get automatic error handling, for instance. These value types are also passed into the worklets of the Paint API and Layout API, so we can use the power there too.

There are more types I haven't mentioned, more types to come and really a lot more to write about. If it hasn't been already, Typed OM is being implemented in all major browsers at this time. It certainly piqued my interest this year, so look out for it as 2020 comes around!

The post The Typed Object Model appeared first on CSS-Tricks.

16:36

Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements

I recently had to craft a newspaper-like design that featured multiple row and column spans with divider lines in between them. Take a look at the mockup graphic here and see if it makes you sweat at all. If you’re like me, you have been around a while and know just how difficult this would have been with old layout techniques.

Newspaper design with line dividers between cells

The project came with a few requirements:

  • Show the outlines of the grid
  • Columns can be wider, or longer than others
  • Divider lines must be shown between the various blocks

CSS Grid: Teaching an old layout new tricks

Newspaper layouts can cause headaches because everyday CSS is one-dimensional, meaning that elements flow on either a horizontal or vertical axis. Even modern flexbox layout is still uni-directional.

For a layout like this, we would almost want the properties that good ol’ HTML tables once provided: things like row and column spans to stretch cells in all directions. We would also want the benefits of modern day CSS, with all the responsiveness and flexible boxes that can grow to fill available space.

CSS grid combines the best of tables with the best of flexible boxes. In fact, grid’s even better because it provides the grid-gap property for creating gutters between cells while taking available space into account. Powerful as this may be, how can we create divider-lines exactly in the middle of those gutters?

Let’s look at three techniques to make that happen.

What we’ll create

First, we will build a simplified version of the newspaper design that’ll help illustrate the crux of the three different techniques that we’re going to cover. A deceptively easy design, one would say.

Column and row spans in a CSS grid layout

Technique 1: The faux column

This solution creates “faux" columns that allow us to draw vertical lines, and then place a grid on top. Horizontal dividers are painted if needed. The “faux" columns are created by using pseudo selectors in the grid container.

<div class="frontpage">
  <div class="fp-cell fp-cell--1">
    <div class="fp-item">1</div>
  </div>
  <div class="fp-cell fp-cell--2">
    <div class="fp-item">2</div>
  </div>
  <div class="fp-cell fp-cell--3 fp-cell--border-top">
    <div class="fp-item">3</div>
  </div>
  <div class="fp-cell fp-cell--4 fp-cell--border-top">
    <div class="fp-item">4</div>
  </div>
</div>

See the Pen
Newspaper-design, 'faux-column' technique
by Marco Troost (@marco-troost)
on CodePen.

Setting up the lines between the columns

Let’s create a three-column container using display: grid and pseudo-selectors (:before and :after) to create two columns that fill 100% of the container’s height.

.frontpage {
  position: relative;
  display: grid;
  /* Three columns */
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 32px;
  border: 1px solid transparent;
  border-top: 1px solid #DADCE0;
  border-bottom: 1px solid #DADCE0;
  overflow: hidden;
}

/* Two faux columns */
.frontpage:before,
.frontpage:after {
  position: absolute;
  top: 0;
  height: 100%;
  content: '';
  width: calc(33.3% - 4px);
}

.frontpage:before {
  left: 0;
  border-right: 1px solid #DADCE0;
}

.frontpage:after {
  right: 0;
  border-left: 1px solid #DADCE0;
}

Note: 33% of the container doesn’t take the gutter width into account, so you’ll have to compensate accordingly.

This is calculated as:

33% minus (gutter-width divided by (amount of gutters times amount of gutters)) divided by amount of gutters)

Or, with actual numbers:

33% - (32 / (2* 2)) / 2 = 4

We could use one pseudo-selector instead:

.frontpage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 32px;
  border: 1px solid transparent;
  border-top: 1px solid #DADCE0;
  border-bottom: 1px solid #DADCE0;
  overflow: hidden;
}

.frontpage:before {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  height: 100%;
  content: '';
  left: calc(33.3% - 5.3px);
  width: calc(33.3% + 10.7px);
  border-left: 1px solid #DADCE0;
  border-right: 1px solid #DADCE0;
}

See the Pen
Newsgrid-layout 'faux-columns' (using only :before)
by Marco Troost (@marco-troost)
on CodePen.

Note: A different calculation is needed when using only one pseudo-selector: One for positioning, and one for width.

The width is calculated as:

33% plus (amount of gutters times gutter-width) / (amount of gutters times amount of columns)

Again, with actual numbers:

33% + (2 * 32) / (2 * 3) = 10.7

The position is calculated as:

33% minus (amount of gutters times gutter-width) / (amount of gutters times amount of columns) divided by 2)

Making the grid

The design consists of four blocks of content. We’re going to place them in the container and give them a modifier class for future reference while making sure their z-index is higher than the pseudo-selectors of the grid.

<div class="frontpage">
  <div class="fp-cell fp-cell--1"></div>
  <div class="fp-cell fp-cell--2"></div>
  <div class="fp-cell fp-cell--3"></div>
  <div class="fp-cell fp-cell--4"></div>
</div>

Now let’s set the background color for the cells (.fp-cell) to white. This way, the vertical lines won’t show through. We can also set the vertical padding for the cell to 16px in order to match half of the gutter.

The first and second content blocks should get their own unique spans as shown in the design. The first block spans all the way down and the second block spans the second and third columns.

.fp-cell {
  position: relative;
  z-index: 2;
  padding: 16px 0;
  background-color: #fff;
}

/* Span all the way down! */
.fp-cell--1 {
  grid-row: 1 / span 2;
}

/* Span the second and third columns */
.fp-cell--2 {
  grid-column: 2 / span 2;
}

Vertical line dividers

If you look at the design, only the last two cells need a horizontal border. We can give ’em a sweet modifier class.

<div class="frontpage">
  <div class="fp-cell fp-cell--1"></div>
  <div class="fp-cell fp-cell--2"></div>
  <div class="fp-cell fp-cell--3 fp-cell--border-top"></div>
  <div class="fp-cell fp-cell--4 fp-cell--border-top"></div>
</div>
.fp-cell--border-top:before {
  content: '';
  position: absolute;
  top: 0;
  left: -16px;
  right: -16px;
  border-top: 1px solid #DADCE0;
}

The negative margins are half of the gutter width.

Technique #2: Using background-color

Another way to create the dividers is to utilize the grid-gap property. This solution doesn’t necessarily create a “real" distance between cells, but rather leaves some blank space where the background-color of the grid can shine through. The gutter width is delegated to padding within the grid cells.

<div class="container">
  <div class="frontpage">
    <div class="fp-cell fp-cell--1">
      <div class="fp-item">1</div>
    </div>
    <div class="fp-cell fp-cell--2">
      <div class="fp-item">2</div>
    </div>
    <div class="fp-cell fp-cell--3">
      <div class="fp-item">3</div>
    </div>
    <div class="fp-cell fp-cell--4">
      <div class="fp-item">4</div>
    </div>
  </div>
</div>
.container {
  overflow-x: hidden;
  border-top: 1px solid #DADCE0;
  border-bottom: 1px solid #DADCE0;
}

.frontpage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1px;
  margin: 0 -16px;
  background-color: #DADCE0;
}

.fp-cell {
  background-color: #fff;
  padding: 16px;
}

.fp-cell--1 {
  grid-row: 1 / span 2;
}

.fp-cell--2 {
  grid-column: 2 / span 2;
}

.fp-cell--3 {
  grid-column: 2;
}

.fp-item {
  background-color: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  height: 100%;
}

See the Pen
Newspaper-design, background-color technique
by Marco Troost (@marco-troost)
on CodePen.

Since all cells have an extra 16px of horizontal padding, the grid needs to be offset by just as much. A wrapper container will take care of the overflow.

<div class="container">
  <div class="frontpage">
  <!-- ... -->
  </div>
</div>
.container {
  border-top: 1px solid #DADCE0;
  border-bottom: 1px solid #DADCE0;
  overflow-x: hidden;
}

.frontpage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1px;
  background-color: #DADCE0;
  margin: 0 -16px;
}

Technique #3: Creating a cell border

This solution appends a right and bottom border to each cell. Like the last example, the grid-gap is mimicked by adding padding to the cell content. That means it also needs to be wrapped in an extra container.

<div class="container">
  <div class="frontpage">
    <div class="fp-cell fp-cell--1">
      <div class="fp-item">1</div>
    </div>
    <div class="fp-cell fp-cell--2">
      <div class="fp-item">2</div>
    </div>
    <div class="fp-cell fp-cell--3">
        <div class="fp-item">3</div>
    </div>
    <div class="fp-cell fp-cell--4">
      <div class="fp-item">4</div>
    </div>
  </div>
</div>
.container {
  border-top: 1px solid #DADCE0;
  overflow-x: hidden;
}

.frontpage {
  margin: 0 -17px 0 -16px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.fp-cell {
  padding: 16px;
  background-color: #fff;
  border-right: 1px solid #DADCE0;
  border-bottom: 1px solid #DADCE0;
}

.fp-cell--1 {
  grid-row: 1 / span 2;
}

.fp-cell--2 {
  grid-column: 2 / span 2;
}

.fp-cell--3 {
  grid-column: 2;
}

.fp-item {
  background-color: #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  height: 100%;
}

See the Pen
Newspaper-design, 'cell-border'-technique
by Marco Troost (@marco-troost)
on CodePen.

As mentioned, each cell is given a border on the right and on the bottom. The main trick here is the use of the (asymmetrical) negative margin on the grid. This is needed to compensate for the cell’s right border.

.frontpage {
  margin: 0 -17px 0 -16px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Conclusion

Occam’s razor stipulates that the simplest solution wins. In our case, that’s technique number two. But then again, the other solutions have plenty of merit and they could prove useful if, for example, access to the DOM is not possible.

All of these techniques will work. Choosing the right one depends on your use case. The first technique uses the actual grid-gap property to create the gaps, but the others are perhaps easier to understand at a glance... and perhaps easier to maintain as well.

The post Techniques for a Newspaper Layout with CSS Grid and Border Lines Between Elements appeared first on CSS-Tricks.

16:31

Variations on Theme: Reinventing Type on the Web

If anyone knows anything about me, it’s usually one of two things: that I have two outrageously fluffy dogs, or that I like fonts and typography. Like, really really like them. So while I am super excited about how well Tristan is doing with his hydrotherapy —we’re walking 50% further than he was able just a couple months ago, without having to take breaks in the middle—I'm even more riled up about variable fonts.

Image of Tristan and Tillie explaining variable fonts

I know, you’re probably all really shocked.

I've been pretty single-minded about them since their introduction three years ago, and think they are going to be a massively Big Thing. But it just hasn’t gotten to that tipping point—yet. But a few things are coming together that make me think this just might be the year. Let me step back a bit and explain.

See the Pen
Variable font, outlined
by Jason Pamental (@jpamental)
on CodePen.

Plex Sans Variable, with outlines showing the range of weights and widths possible with a single file

The future is variable

Variable fonts are an evolution of the OpenType font specification that allows a single file to contain all of the variations of width, weight, slant, italics, and virtually any other permutation of a typeface the type designer want’s to expose—all in a single file. That one file is highly efficient, so it's far smaller than all of the individual files. For the web, that means we can in many cases save considerable data download, reduce the number of HTTP requests, and in general vastly increase the design flexibility at our disposal. A pretty big change from those plain 'ol static web fonts we’ve been using for the past 10 years. There’s loads of good stuff out there about them (I've written a few here, here, here, and here), but you can also browse the tag right here on CSS Tricks.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari 66 53 62 No 17 11

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox 11.0-11.2 No No 76 78 68
Variable fonts are viewable by 87% of devices on the web according to caniuse.com.

Now that browser support is pretty complete (for the most part everything but IE11 and a couple of Android browsers like Baidu and UC), availability of variable fonts is improving (check out v-fonts.com), and Google is launching support for them via their new API—it feels like this might finally be the breakout year for them.

What excites me the most about that is what we’ll see people create. I’m sure at first it will be lots of "rip and replace", similar to what we saw on the Nielson/Norman group site with their inclusion of Source Sans Variable on their site last year, or what Google has been testing with Oswald Variable on sites 148 million times a day for the past several months. Basically just using that instead of a few static instances to reap the benefits of faster page loads and less code.

Which is great, but only just a beginning.

What I'm looking forward to seeing is people embracing the full range of what these fonts can do. Going form ultra-light to super-heavy, super-condensed to extra-wide. Whatever the fonts support is there for us to explore. I'm hoping to see designers dive in and explore the power of great typography. Type that speaks more and varied volumes to help guide us around our sites and apps. Type set in motion that can lead us from here to there.

See the Pen
Layout variations, part deux
by Jason Pamental (@jpamental)
on CodePen.

This is one of the explorations I did for my newsletter and talks, playing with notions of legibility and the tension between reading fast and slow.

Will some of it be awful?

Probably. But so were a lot of early responsive websites. And lots of sites with static web fonts when they first launched. Or Flash-based sites. All of these have been evolutions of what we can design and make on the web. It’s up to us to do it well instead of poorly. I’m excited to learn together.

After all, if type is the voice of our words—with variable fonts—that voice has become a chorus.

The post Variations on Theme: Reinventing Type on the Web appeared first on CSS-Tricks.

15:55

Build your own React

Wowza! Rodrigo Pombo’s article about how to build React from scratch is fantastic, not only because it’s well written, but because of the outstanding interaction design: each line in the code examples ge highlighted and explored in further detail as you scroll down the page.

This makes it super easy to walk through each process step by step:

How neat is that? This definitely feels like a new way we should consider showing technical information I reckon as it’s just so much easier to read the code.

Oh, and the part about building your own React? Andy Bell advocates something similar when it comes to state management:

Libraries like Redux, MobX and Vuex make managing cross-component state almost trivial. This is great for an application’s resilience and it works really well with a state-first, reactive framework such as React or Vue.

How do these libraries work though? What would it take to write one ourselves? Turns out, it’s pretty straightforward and there’s an opportunity to learn some really common patterns and also learn about some useful modern APIs that are available to us.

Seems like Rodrigo's pattern is a nice way to make that sort of learning possible.

Direct Link to ArticlePermalink

The post Build your own React appeared first on CSS-Tricks.

15:26
Fascinating CSS Grid Layout Examples and Tutorials
14:00

20 Stylish PowerPoint Color Schemes

Color is an element that can make or break a design, and that rule holds true for presentation design as well. Choosing the right PowerPoint color scheme is super-important.

But there’s one extra thing to consider – where your presentation will be given. A PowerPoint presentation can look quite different on a computer or tablet versus on a projected screen.

When it comes to selecting a PowerPoint color scheme, this is an important consideration. Today we’ve rounded up 20 stylish PowerPoint color schemes as inspiration. While darker color schemes might look great close-up on screens, opt for lighter backgrounds (for enhanced readability) for projected presentations.

Note: The last color in each scheme is for the slide background.

1. Modern Blue

#1a4e66 #e26c22 #ffffff

powerpoint color schemes

When you aren’t planning to use brand colors – or maybe as a startup or independent contractor so you don’t have them yet – a modern color combination can add the right flair to a PowerPoint presentation.

The bright grayish blue in the Lekro PowerPoint template – you can find it here – adds the right amount of color without overwhelming the content. Plus, subtle orange accents help guide the eye throughout this PowerPoint color scheme. https://elements.envato.com/lekro-powerpoint-presentation-67YW3M

2. Blackish and Yellow

#3a3839 #fed650 #ffffff

powerpoint color schemes

While at first pass, black and yellow might seem like a harsh color combination, it can set the tone for a project that should emanate strength. This PowerPoint color scheme softens the harshness of the duo with a blackish color, that’s grayer and has a softer feel.

Pair this combo on a light background or with black and white images for a stylish, mod look.

3. Monotone Greens

#8cba60 #59724b #fffff

powerpoint color schemes

Some of the best color schemes for presentations include a monotone palette. What’s nice about a single color style is that you know everything will always match!

This dark and light green pairing is simple, has a nice feel and even with a bright color creates a neutral feel.

4. Orange and White

# ff6908 #ffffff

powerpoint color schemes

A bright color can soften the harshness of a stark PowerPoint design. Especially when used for larger portions of the content area, such as background swatches or to help accent particular elements.

The Sprint template makes great use of color with a simple palette – orange and white with black text – but has slide ideas that incorporate the color throughout for something with a more “designed” look to it. (And if you aren’t a fan of the orange, change the color for use with this template to keep the modern feel.)

5. Baby Blues and Gray

#baedff #5d798e #ffffff

powerpoint color schemes

Light blue is a classic presentation color that never seems to get old. Freshen it up by pairing baby blue tones with a gray or darker gray-blue, like the featured color scheme above.

This color combo can work for almost any type of content and sets the tone for a light and calm presentation.

6. Purple

#695c78 #08121b #ffffff

powerpoint color schemes

Purple presentations are in. The color, which was once avoided by many in design projects, has flourished with recent color trends.

Because more funky, bright colors are popular, a presentation with a purple focus can be acceptable for a variety of uses. The use in the Batagor template has a modern design with a deep header in the featured color, which works best with images that aren’t incredibly bold in terms of color.

7. Blue-Green Gradients

#0784ba #1e997c #ffffff

powerpoint color schemes

Another trending item in color is the use of gradients. This trend can be applied to PowerPOint presentations as well.

Use a blue to green gradient for a soft and harmonious color scheme that won’t get in the way of content. Use each hue alone for accents and informational divots throughout the presentation design.

8. Black and White

#ececec #000000 #fffff

powerpoint color schemes

Minimalism is the design trend that never goes away. A black and white (or gray) presentation screams class and sophistication.

It can also be easy to work with when you don’t want the color to get in the way of your message. And if a design can stand alone without color, you know it works.

9. Reds and Black

# e90039 #ff1800 #2b2b2d

powerpoint color schemes

If you are designing a presentation for viewing on screens, such as desktops or tablets, a dark background with bright color accents and white text can work well. (This combination gets a lot trickier on projector displays.)

While reverse text and red aren’t always recommended, you can see from the Nova template that it can be a stunning combination. But note, this modern color scheme is best for specific content and audiences.

10. Mono Blues

#0f4efd #c6d8ff #ffffff

powerpoint color schemes

With a modern spin on a monotone palette, you can have a lot of fun. The dark and light blues in the Social Media Guide template prove this is a highly usable color scheme.

The old school feel has a look-at-me design and with the same mono overlay on images, this can be quite the stunning combination.

11. Blue and Pink

#264190 #f68484 #ffffff

powerpoint color schemes

This color scheme is a spin on Pantone’s colors of the year from 2016. https://designshack.net/articles/graphics/how-to-use-the-pantone-color-of-the-year-in-design-projects/ The brighter, bolder versions of rose quartz and serenity and fun and sophisticated.

The unexpected combo sets the tone with a strong, trustworthy blue and adds softness with the paler pink. The colors work equally well with white or darker backgrounds.

12. Blue and Green

#95a78d #b0dcff #ffffff

powerpoint color schemes

Blue and green accents can help a black or white background come to life in a presentation template. The colors here can work with either background style, based on how you plan to display your presentation.

What’s nice about these colors is that they are pretty neutral – since both are found in nature – and can be used with ease for design or text elements in a PowerPoint color scheme.

13. Beige and Gray

#eddacc #ddded9 #ffffff

powerpoint color schemes

If you are looking for a softer color palette, consider beige and gray. These hues can work well on screens or projected, making it a versatile option.

The nice thing about such a neutral palette is that it gives content plenty of room, so that will be the true focus of the presentation.

14. Tints and Tones

#525368 #7a7a7a #ffffff

powerpoint color schemes

While the purplish-blue-gray in the Business PowerPoint Presentation template is stunning, it represents a greater trend in presentation design. Pick a color – maybe your dominant brand color – and use tints and tones for the presentation color scheme.

By mixing the color with white or black and gray, you’ll end with up with a stunning set of color variations that match your messaging.

15. Bold Rainbow

#702e52# f2503b#febe28 #fffff

powerpoint color schemes

While most of the color schemes featured here only include a color or two, bright color schemes with wider color variations are trending.

This distinct “rainbow style” can be somewhat difficult to use without rules for each color. Proceed with caution.

16. Bright Neutrals

#89b374 #b5c266 #e4e4e4

powerpoint color schemes

Lime green is the brightest “neutral” you might ever use. A fun palette that’s versatile can be a solid foundation for a color palette.

It works exceptionally well in the Rouka PowerPoint template thanks to a pairing with a subtle gray background. Using a light, but not white, background can be great for screens and projected presentations because it takes away some of the harshnesses of a white background. The subtle coloring is easier on the eyes for reading and viewing.

17. Rich Browns

#90816a #272727 #fffff

powerpoint color schemes

Browns aren’t often what comes to mind when thinking of building a color scheme, but rich browns can be a modern option.

Pair a neutral beige-brown with a darker color for an interesting contrast that works with almost any style of content.

18. Mint Green

#3eb9a5 #e9a02f #ffffff

powerpoint color schemes

Go super trendy with a modern and streamlined palette of mint green and gray on white. While this combination can have a minimal feel, it also adds a touch of funkiness to the design.

Add another hint of color – think orange – for extra accents.

19. Dark Gray and Blue

#387490 #01acb6 #2b2b2d

powerpoint color schemes

It doesn’t get more classy than a combination of grays and blues. This new take on a classic color scheme adds another brighter blue as well to pick up on modern trends.

Just be careful with text using a dark background such as this one. White is probably your best option for typography, and look for a font with thicker strokes.

20. Rainbow Themed

#1ca385 #9cbb5d #f29b27 #bd382f #ffffff

powerpoint color schemes

While most designers stay away from color schemes with more than a couple of colors, a bright rainbow-style option can work for presentations. It’s visually interesting and can help break up a deck with a lot of slides.

When working with a large color palette, give each color a purpose in the design, so that the overall scheme looks intentional.

11:13
Is Your Email List Checker the Best You Can Get? Here’s How to Find Out
11:00

Performing iOS Animations On Views With UIKit And UIView

Performing iOS Animations On Views With UIKit And UIView

Performing iOS Animations On Views With UIKit And UIView

Saravanan V
2019-11-20T11:00:00+00:002019-11-20T13:35:34+00:00

I have been an iOS developer for over a decade now and have rarely seen articles that consolidate all possible ways to perform animations in iOS. This article aims to be a primer on iOS animations with the intent of exhaustively covering the different ways of doing the same.

Given the extensiveness of the topic, we would cover each part succinctly at a fairly high level. The goal is to educate the reader with a set of choices to add animations to his/ her iOS app.

Before we start off with topics related to iOS, let us take a brief look at animation speed.

Animating At 60FPS

Generally in videos, each frame is represented by an image and the frame rate determines the number of images flipped in the sequence. This is termed as ‘frames per second’ or FPS.

FPS determines the number of still images flipped within a second, which literally means that the more the number of images/ frames, more details/ information are displayed in the video. This holds true for animations as well.

FPS is typically used to determine the quality of animations. There is a popular opinion that any good animation should run at 60fps or higher — anything less than 60fps would feel a bit off.

Do you want to see the difference between 30FPS and 60FPS? Check this!

Did you notice the difference? Human eyes can definitely feel the jitter at lower fps. Hence, it is always a good practice to make sure that any animation you create, adheres to the ground rule of running at 60FPS or higher. This makes it feel more realistic and alive.

Having looked at FPS, let’s now delve into the different core iOS frameworks that provide us a way to perform animations.

Core Frameworks

In this section, we will touch upon the frameworks in the iOS SDK which can be used for creating view animations. We will do a quick walk through each of them, explaining their feature set with a relevant example.

UIKit/ UIView Animations

UIView is the base class for any view that displays content in iOS apps.

UIKit, the framework that gives us UIView, already provides us some basic animation functions which make it convenient for developers to achieve more by doing less.

The API, UIView.animate, is the easiest way to animate views since any view’s properties can be easily animated by providing the property values in the block-based syntax.

In UIKit animations, it is recommended to modify only the animatable properties of UIVIew else there will be repercussions where the animations might cause the view to end up in an unexpected state.

animation(withDuration: animations: completion)

This method takes in the animation duration, a set of view’s animatable property changes that need to be animated. The completion block gives a callback when the view is done with performing the animation.

Almost any kind of animation like moving, scaling, rotating, fading, etc. on a view can be achieved with this single API.

Now, consider that you want to animate a button size change or you want a particular view to zoom into the screen. This is how we can do it using the UIView.animate API:

let newButtonWidth: CGFloat = 60

UIView.animate(withDuration: 2.0) { //1
    self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth) //2
    self.button.center = self.view.center //3
}

Here’s what we are doing here:

  1. We call the UIView.animate method with a duration value passed to it that represents how long the animation, described inside the block, should run.
  2. We set the new frame of the button that should represent the final state of the animation.
  3. We set the button center with its superview’s center so that it remains at the center of the screen.

The above block of animation code should trigger the animation of the button’s frame changing from current frame:

Width = 0, Height = 0

To the final frame:

Width = Height = newButtonWidth

And here’s what the animation would look like:

animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion

This method is like an extension of the animate method where you can do everything that you can perform in the prior API with some physics behaviors added to the view animations.

For example, if you want to achieve spring damping effects in the animation that we have done above, then this is how the code would look like:

let newButtonWidth: CGFloat = 60
UIView.animate(withDuration: 1.0, //1
    delay: 0.0, //2
    usingSpringWithDamping: 0.3, //3
    initialSpringVelocity: 1, //4
    options: UIView.AnimationOptions.curveEaseInOut, //5
    animations: ({ //6
        self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth)
        self.button.center = self.view.center
}), completion: nil)

Here’s the set of parameters we use:

  1. duration
    Represents the duration of the animation determining how long the block of code should run.
  2. delay
    Represents the initial delay that we want to have before the start of the animation.
  3. SpringWithDamping
    Represents the value of the springy effect that we want the view to behave. The value must be between 0 to 1. The lower the value, the higher the spring oscillation.
  4. velocity
    Represents the speed at which the animation should start.
  5. options
    Type of animation curve that you want to apply to your view animation.
  6. Finally, the block of code where we set the frame of the button that needs to be animated. It is the same as the previous animation.

And here’s what the animation would look like with the above animation configuration:

UIViewPropertyAnimator

For a bit more control over animations, UIViewPropertyAnimator comes handy where it provides us a way to pause and resume animations. You can have custom timing and have your animation to be interactive and interruptible. This is very much helpful when performing animations that are also interactable with user actions.

The classic ‘Slide to Unlock’ gesture and the player view dismiss/ expand animation (in the Music app) are examples of interactive and interruptible animations. You can start moving a view with your finger, then release it and the view will go back to its original position. Alternatively, you can catch the view during the animation and continue dragging it with your finger.

Following is a simple example of how we could achieve the animation using UIViewPropertyAnimator:

let newButtonWidth: CGFloat = 60
let animator = UIViewPropertyAnimator(duration:0.3, curve: .linear) { //1
    self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth)
    self.button.center = self.view.center
}
animator.startAnimation() //2

Here’s what we are doing:

  1. We call the UIViewProperty API by passing the duration and the animation curve.
  2. Unlike both the above UIView.animate API’s, the animation won’t start unless you specify it by yourself i.e. you’re in full control of the complete animation process/ flow.

Now, let’s say that you want even more control over the animations. For example, you want to design and control each and every frame in the animation. There’s another API for that, animateKeyframes. But before we delve into it, let’s quickly look at what a frame is, in an animation.

What Is A frame?

A collection of the view’s frame changes/ transitions, from the start state to the final state, is defined as animation and each position of the view during the animation is called as a frame.

animateKeyframes

This API provides a way to design the animation in such a way that you can define multiple animations with different timings and transitions. Post this, the API simply integrates all the animations into one seamless experience.

Let’s say that we want to move our button on the screen in a random fashion. Let’s see how we can use the keyframe animation API to do so.

UIView.animateKeyframes(withDuration: 5, //1
  delay: 0, //2
  options: .calculationModeLinear, //3
  animations: { //4
    UIView.addKeyframe( //5
      withRelativeStartTime: 0.25, //6
      relativeDuration: 0.25) { //7
        self.button.center = CGPoint(x: self.view.bounds.midX, y: self.view.bounds.maxY) //8
    }

    UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) {
        self.button.center = CGPoint(x: self.view.bounds.width, y: start.y)
    }

    UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) {
        self.button.center = start
    }
})

Here’s the breakdown:

  1. duration
    Call the API by passing in the duration of the animation.
  2. delay
    Initial delay duration of the animation.
  3. options
    The type of animation curve that you want to apply to your view animation.
  4. animations
    Block that takes all keyframe animations designed by the developer/ user.
  5. addKeyFrame
    Call the API to design each and every animation. In our case, we have defined each move of the button. We can have as many such animations as we need, added to the block.
  6. relativeStartTime
    Defines the start time of the animation in the collection of the animation block.
  7. relativeDuration
    Defines the overall duration of this specific animation.
  8. center
    In our case, we simply change the center property of the button to move the button around the screen.

And this is how the final animations looks like:

CoreAnimation

Any UIKit based animation is internally translated into core animations. Thus, the Core Animation framework acts as a backing layer or backbone for any UIKit animation. Hence, all UIKit animation APIs are nothing but encapsulated layers of the core animation APIs in an easily consumable or convenient fashion.

UIKit animation APIs don’t provide much control over animations that have been performed over a view since they are used mostly for animatable properties of the view. Hence in such cases, where you intend to have control over every frame of the animation, it is better to use the underlying core animation APIs directly. Alternatively, both the UIView animations and core animations can be used in conjunction as well.

UIView + Core Animation

Let’s see how we can recreate the same button change animation along with specifying the timing curve using the UIView and Core Animation APIs.

We can use CATransaction’s timing functions, which lets you specify and control the animation curve.

Let’s look at an example of a button size change animation with its corner radius utilizing the CATransaction’s timing function and a combination of UIView animations:

let oldValue = button.frame.width/2
let newButtonWidth: CGFloat = 60

/* Do Animations */
CATransaction.begin() //1
CATransaction.setAnimationDuration(2.0) //2
CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)) //3

// View animations //4
UIView.animate(withDuration: 1.0) {
    self.button.frame = CGRect(x: 0, y: 0, width: newButtonWidth, height: newButtonWidth)
    self.button.center = self.view.center
}

// Layer animations
let cornerAnimation = CABasicAnimation(keyPath: #keyPath(CALayer.cornerRadius)) //5
cornerAnimation.fromValue = oldValue //6
cornerAnimation.toValue = newButtonWidth/2 //7

button.layer.cornerRadius = newButtonWidth/2 //8
button.layer.add(cornerAnimation, forKey: #keyPath(CALayer.cornerRadius)) //9

CATransaction.commit() //10

Here’s the breakdown:

  1. begin
    Represents the start of the animation code block.
  2. duration
    Overall animation duration.
  3. curve
    Represents the timing curve that needs to be applied to the animation.
  4. UIView.animate
    Our first animation to change the frame of the button.
  5. CABasicAnimation
    We create the CABasicAnimation object by referring the cornerRadius of the button as the keypath since that’s what we want to animate. Similarly, if you want to have granular level control over the keyframe animations, then you can use the CAKeyframeAnimation class.
  6. fromValue
    Represents the starting value of the animation, i.e. the initial cornerRadius value of the button from where the animation must start off.
  7. toValue
    Represents the final value of the animation, i.e. the final cornerRadius value of the button where the animation must end.
  8. cornerRadius
    We must set the cornerRadius property of the button with the final value of the animation else the button’s cornerRadius value will get auto-reverted to its initial value after the animation completes.
  9. addAnimation
    We attach the animation object that contains the configuration of the entire animation process to the layer by representing the Keypath for which the animation needs to be performed.
  10. commit
    Represents the end of the animation code block and starts off the animation.

This is how the final animation would look like:

This blog is a great read to help create more advanced animations as it neatly walks you through most of the Core Animation framework APIs with instructions guiding you through every step of the way.

UIKitDynamics

UIKit Dynamics is the physics engine for UIKit which enables you to add any physics behaviors like collision, gravity, push, snap, etc, to the UIKit controls.

UIKitDynamicAnimator

This is the admin class of the UIKit Dynamics framework that regulates all animations triggered by any given UI control.

UIKitDynamicBehavior

It enables you to add any physics behavior to an animator which then enables it to perform on the view attached to it.

Different kinds of behaviors for UIKitDynamics include:

  • UIAttachmentBehavior
  • UICollisionBehavior
  • UIFieldBehavior
  • UIGravityBehavior
  • UIPushBehavior
  • UISnapBehavior

The architecture of UIKitDynamics looks something like this. Note that Items 1 to 5 can be replaced with a single view.

Let us apply some physics behavior to our button. We will see how to apply gravity to the button so that it gives us a feeling of dealing with a real object.

var dynamicAnimator   : UIDynamicAnimator!
var gravityBehavior   : UIGravityBehavior!

dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1

gravityBehavior = UIGravityBehavior(items: [button]) //2
dynamicAnimator.addBehavior(gravityBehavior) //3

Here’s the breakdown:

  1. UIKitDynamicAnimator
    We have created a UIKitDynamicAnimator object which acts as an orchestrator for performing animations. We have also passed the superview of our button as the reference view.
  2. UIGravityBehavior
    We have created a UIGravityBehavior object and pass our button into the array elements on which this behavior is injected.
  3. addBehavior
    We have added the gravity object to the animator.

    This should create an animation as shown below:
    Notice how the button falls off from the center (its original position) of the screen to the bottom and beyond. We should tell the animator to consider the bottom of the screen to be the ground. This is where UICollisionBehavior comes into picture.

    var dynamicAnimator   : UIDynamicAnimator!
    var gravityBehavior   : UIGravityBehavior!
    var collisionBehavior : UICollisionBehavior!
    
    dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1
    
    gravityBehavior = UIGravityBehavior(items: [button]) //2
    dynamicAnimator.addBehavior(gravityBehavior) //3
    
    collisionBehavior = UICollisionBehavior(items: [button]) //4
    collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5
    dynamicAnimator.addBehavior(collisionBehavior) //6
  4. UICollisionBehavior
    We have created a UICollisionBehavior object and passed along the button so that the behavior is added to the element.
  5. translatesReferenceBoundsIntoBoundary
    Enabling this property tells the animator to take the reference views boundary as the end, which is the bottom of the screen in our case.
  6. addBehavior
    We have added collision behavior to the animator here.

    Now, our button should hit the ground and stand still as shown below:

    That’s pretty neat, isn’t it?

    Now, let us try adding a bouncing effect so that our object feels more real. To do that, we will use the UIDynamicItemBehavior class.
    var dynamicAnimator   : UIDynamicAnimator!
    var gravityBehavior   : UIGravityBehavior!
    var collisionBehavior : UICollisionBehavior!
    var bouncingBehavior  : UIDynamicItemBehavior!
    
    dynamicAnimator = UIDynamicAnimator(referenceView: self.view) //1
    
    gravityBehavior = UIGravityBehavior(items: [button]) //2
    dynamicAnimator.addBehavior(gravityBehavior) //3
    
    collisionBehavior = UICollisionBehavior(items: [button]) //4
    collisionBehavior.translatesReferenceBoundsIntoBoundary = true //5
    dynamicAnimator.addBehavior(collisionBehavior) //6
    
    //Adding the bounce effect
    bouncingBehavior = UIDynamicItemBehavior(items: [button]) //7
    bouncingBehavior.elasticity = 0.75 //8
    dynamicAnimator.addBehavior(bouncingBehavior) //9
  7. UIDynamicItemBehavior
    We have created a UIDynamicItemBehavior object and pass along the button so that the behavior is added to the element.
  8. elasticity
    Value must be between 0-1, it represents the elasticity i.e. the number of times the object must bounce on and off the ground when it is hit. This is where the magic happens — by tweaking this property, you can differentiate between different kinds of objects like balls, bottles, hard-objects and so on.
  9. addBehavior
    We have added collision behavior to the animator here.

Now, our button should bounce when it hits the ground as shown below:

This repo is quite helpful and shows all UIKitDynamics behaviors in action. It also provides source code to play around with each behavior. That, in my opinion, should serve as an extensive list of ways to perform iOS animations on views!

In the next section, we will take a brief look into the tools that will aid us in measuring the performance of animations. I would also recommend you to look at ways to optimize your Xcode build since it will save a huge amount of your development time.

Performance Tuning

In this section, we will look at ways to measure and tune the performance of iOS animations. As an iOS developer, you might have already used Xcode Instruments like Memory Leaks and Allocations for measuring the performance of the overall app. Similarly, there are instruments that can be used to measure the performance of animations.

Core Animation Instrument

Try the Core Animation instrument and you should be able to see the FPS that your app screen delivers. This is a great way to measure the performance/ speed of any animation rendered in your iOS app.

Drawing

FPS is vastly lowered in the app that displays heavy content like images with effects like shadows. In such cases, instead of assigning the Image directly to the UIImageView’s image property, try to draw the image separately in a context using Core Graphics APIs. This overly reduces the image display time by performing the image decompression logic asynchronously when done in a separate thread instead of the main thread.

Rasterization

Rasterization is a process used to cache complex layer information so that these views aren’t redrawn whenever they’re rendered. Redrawing of views is the major cause of the reduction in FPS and hence, it is best to apply rasterization on views that are going to be reused several times.

Wrapping Up

To conclude, I have also summed up a list of useful resources for iOS animations. You may find this very handy when working on iOS animations. Additionally, you may also find this set of design tools helpful as a (design) step before delving into animations.

I hope I have been able to cover as many topics as possible surrounding iOS animations. If there is anything I may have missed out in this article, please let me know in the comments section below and I would be glad to make the addition!

Smashing Editorial(dm, yk, il)
10:00

What Is Figma? a 101 Intro

Figma is a cloud-based design and prototyping tool for digital projects. It’s made so that users can collaborate on projects and work pretty much anywhere.

While this tool looks a lot like other prototyping options, the key differentiator is the ability to work with teams on projects. To date, Figma is probably the best-suited option available.

Here’s a look at Figma, and how this tool might be beneficial for your projects and workflows.

What is Figma?

figma

Simply, Figma is a digital design and prototyping tool. It is a UI and UX design application that you can use it to create websites, apps, or smaller user interface components that can be integrated into other projects.

Here’s how Figma describes itself:

Figma helps teams create, test, and ship better designs from start to finish. Packed with design features you already love plus unique inventions like the Arc tool and Vector Networks, Figma helps you keep the ideas flowing. No need to stop to install, save, or export. It’s what any good cloud software should be.

Figma is a vector-based tool that lives in the cloud, allowing users to work anywhere from a browser. It’s a zippy tool that is made for design, prototyping, collaboration, and organizational design systems.

Comparable tools include Sketch, Adobe XD, Invision, and Framer.

Like many other tools, Figma is supported by a robust community of designers and developers that share plugins to increase functionality and speed up workflows. Anyone can contribute and share.

Figma is used by some big brands including Slack, Twitter, Zoom, Dropbox, and Walgreens. Those names alone show that this tool is solid enough to power almost any project.

Who Should Use It?

figma

Figma is a solid tool and with a free plan available, it’s worth trying for anyone who is working in the digital space. (I would argue that most designers should have at least a working knowledge of all the major tools to make them more marketable to clients and potential employers.)

More generally speaking, Figma is most appreciated by people working on more collaborative teams. Other design and prototyping tools lack this key feature or just don’t have the same ability as Figma. This feature alone can save designers time and make projects run more smoothly.

Key Features

figma

Figma is a vector-based design tool that’s highly scalable. It works for individual projects as well as massive team endeavors. The browser-based design is “smart” enough to save your work as you go and even keep up if you momentarily lose an internet connection.

Key features include:

  • Modern pen tool that lets you draw in any direction and instant arc designs
  • Open Type font features
  • Automated tasks via plugins for repeated elements to speed up projects
  • Smart selection tool with auto adjustments for spacing, arrangement, and organizing
  • Flexible styles that save right to your project
  • Create design systems and components
  • Drag and drop accessible libraries
  • Ability to have unlimited viewers on a project so the whole team is in the know
  • Inspect design files and grab code snippets
  • Easy export feature, that has a live link (not a flat PDF)
  • Design interactions and mobile optimized prototypes
  • Smart animation to connect objects and transitions
  • Embedded commenting
  • Edit together with teams in real-time in shared design spaces
  • Version history that lets you know everything that has changed, and who did it
  • Create design systems with searchable assets, shareable styles, and everything in one location
  • Create reusable components with the ability to override them when necessary
  • One platform for everything from design to prototype

Figma Pricing

figma

Figma has free and paid plans, depending on the volume of work you’ll be doing, as well as premium collaboration features.

Full pricing details:

  • Starter (free): Up to two editors and three projects with 30-day version history, and unlimited cloud storage
  • Professional ($15 per editor per month): Includes unlimited projects, unlimited versions, custom file and user permissions, invite-only private projects, and shareable team libraries
  • Organization ($45 per editor per month): Includes everything in professional plus organization-wide design systems, centralized teams, private plugins, plugin administration, shared fonts, single sign-on, and advanced security

Figma offers reduced pricing for annual versus monthly payment and has student pricing.

Conclusion

If you want a cloud-based tool and need something that puts emphasis on collaboration, Figma is likely the right choice for you. It works on Mac and PC, thanks to the cloud interface and has functionality similar to Sketch and Adobe XD (the closest competitors).

Figma has been around long enough to earn a solid reputation among designers and developers and can be a solid tool in your kit.

Note: Examples in this article were all made with Figma.

08:50
7 Fantastic eCommerce Product Videos and The Lessons They Taught Us
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl