Tag Archives: environment

Thumbnail

Monthly Web Development Update 1/2019: Rethinking Habits And Finding Custom Solutions




Monthly Web Development Update 1/2019: Rethinking Habits And Finding Custom Solutions

Anselm Hannemann



What could be better than starting the new year with some new experiments? Today I figured it was time to rethink JavaScript tooling in one of my projects. And since we wrote everything in plain ECMAScript modules already, I thought it would be easy to serve them natively now and remove all the build and transpilation steps. Until I realized that — although we wrote most code ourselves — we have a couple of third-party dependencies in there and, of course, not all of them are ECMAScript modules. So for now, I have to give up my plans to remove all the build steps and continue to bundle and transpile things, but I’ll try to figure out a better solution to modernize and simplify our tooling setup while providing a smaller bundle to our users.

Another experiment: Just a few weeks ago I had to build a simple “go to the top of the page” button for a website. I used requestAnimationFrame and similar stuff to optimize event handling, but today I found a way nicer and more efficient solution that uses IntersectionObserver to toggle the button on the viewport. You will find that article in the JavaScript section below. The reason I wanted to share these little stories is because I believe that the most important thing is that we review our habits and current solutions and see whether there are better, newer, simpler ideas that could improve a product. Keep playing, keep researching, and be sure to rethink existing systems from time to time.

News

UI/UX

Web Performance

JavaScript


Infographic showing how authentication and verification work without a password


Passwordless authentication? The WebAuthn API makes it possible. (Image credit)

CSS


An example text with randomly generated underlines.


Una Kravet’s “super underline” example uses randomly generated underlines for each element. Made possible with Houdini and the Paint API. (Image credit)

Work & Life

  • “Feeling a sense of accomplishment is an important part of our sense of self-worth. Beating up on yourself because you think you could have accomplished more can dent your confidence and self-esteem and leave you feeling depleted at the end of the day.” Lisa Evans shares what we can do to avoid falling into that trap.
  • Itamar Turner-Trauring shares his thoughts on how to get a job with a good work-life balance when you’re competing against people who are willing to work long hours.
  • Is it a good idea to provide healthcare and treatment based on digital products like apps? And if so, what are the requirements, the standards for this? How can we ensure this is done ethically correct? How do we set the limits, the privacy boundaries, how far do we allow companies to go with experiments here? Would personalized content be fine? Is it okay to share data collected from our devices with healthcare providers or insurances? These are questions we will have to ask ourselves and find an individual answer for.
  • This article about how Millenials became the burnout generation hit me hard this week. I see myself in this group of people described as “Millenials” (I do think it affects way more people than just the 20-year-olds) and I could relate to so many of the struggles mentioned in there that I now think that these problems are bigger than I ever imagined. They will affect society, politics, each individual on our planet. Given that fact, it’s crazy to hear that most people today will answer that they don’t have a friend they could talk to about their fears and anything else that disturbs them while two decades ago the average answer was still around five. Let’s assure our friends that we’re there for them and that they can talk to us about tough things. 2019 should be a year in which we — in our circle of influence — make it great to live in a human community where we can think with excitement and happiness about our friends, neighbors, and people we work with or talk to on the Internet.
  • We all try to accommodate so many things at the same time: being successful and productive at work, at home, with our children, in our relationships, doing sports, mastering our finances, and some hobbies. But we blindly ignore that it’s impossible to manage all that on the same level at the same time. We feel regret when we don’t get everything done in a specific timeframe such as at the end of a calendar year. Shawn Blanc argues that we should celebrate what we did do instead of feeling guilty for what we didn’t do.

Going Beyond…

  • There are words, and then there are words. Many of us know how harmful “just” can be as a word, how prescriptive, how passively aggressive it is. Tobias Tom challenges whether “should” is a useful word by examining the implicit and the result of using it in our daily language. Why “should” can be harmful to you and to what you want to achieve.
  • “We all know what we stand for. The trick is to state our values clearly — and to stand by them,” says Ben Werdmuller and points out how important it is to think about your very own red line that you don’t want to cross regardless of external pressure you might face or money you might get for it.
  • Exciting news for climate improvement this week: A team of arborists has successfully cloned and grown saplings from the stumps of some of the world’s oldest and largest coast redwoods, some of which were 3,000 years old and measured 35 feet in diameter when they were cut down in the 19th and 20th centuries. Earlier this month, 75 of the cloned saplings were planted at the Presidio National Park in San Francisco. What makes this so special is the fact that these ancient trees can sequester 250 tons of carbon dioxide from the atmosphere over their lives, compared to 1 ton for an average tree.
  • The ongoing technological development and strive to build new services that automate more and more things make it even more critical to emphasize human connection. Companies that show no effort in improving things for their clients, their employees, or the environment will begin to struggle soon, Ryan Paugh says.
  • We usually don’t expect much nice news about technology inventions from the car industry and their willingness to share it with others. But Toyota now has decided to share their automated safety system ‘Guardian’ with competitors. It uses self-driving technology to keep cars from crashing. “We will not keep it proprietary to ourselves only. But we will offer it in some way to others, whether that’s through licensing or actual whole systems,” says Gill Pratt from the company.

Thank you for reading! I’m happy to be back with this new edition of my Web Development Update in 2019 and grateful for all your ongoing support. It makes me happy to hear that so many people find this resource helpful. So if you enjoyed it, please feel free to share it with people you know, give me feedback, or support it with a small amount of money. —Anselm

Smashing Editorial
(cm)


Original source:

Monthly Web Development Update 1/2019: Rethinking Habits And Finding Custom Solutions

How To Internationalize Your WordPress Website

On September 30th, 2017, the international WordPress community united for 24 hours to translate the WordPress ecosystem. For the third time, #WPTranslationDay fused an all-day translating marathon with digital and contributor day events designed to promote the value of creating accessible experiences for global users, better known as “localization”.
As an open-source community, we should all strive to localize our open-source contributions. Before you can transcribe your digital assets though, you have to internationalize your codebase.

Read More:  

How To Internationalize Your WordPress Website

The Evolution Of User Experience Design

(This is a sponsored post.) We’re fortunate enough to be working at an incredibly exciting time in our industry. Yes, the challenges are considerable, but the opportunities are – equally – transformational. It’s never been a more exciting time to work as a User Experience (UX) designer.
Great designers deliver wonderful, considered and memorable experiences. Doing that isn’t easy and – through this series of articles – I’ll provide a wealth of pointers to ensure you’re on the right track.

Read this article:  

The Evolution Of User Experience Design

What You Need to Know About Visual Perception and Website Design

visual perception

There’s no lack of data to suggest how visual-oriented we are as humans. For instance, “90 percent of information transmitted to the brain is visual, and visuals are processed 60,000x faster in the brain than text.” Or this:  “65 percent of people are visual learners, and one of the best ways to drive messages home is through visual content.” This data helps explain why visual marketing has really exploded recently, and visual-centric content such as infographics are so popular. Seeing is one of our primary senses by which we intake information and understand the world. Basically, it’s a big deal….

The post What You Need to Know About Visual Perception and Website Design appeared first on The Daily Egg.

Continue reading: 

What You Need to Know About Visual Perception and Website Design

Web Development Reading List #166: Efficient Docker, CSP Learnings, And JavaScript’s Global Object

What fuels your work? What fuels your mind? What do you do on a non-productive day or when you’re sad? Nowadays, I try to embrace these times. I try to relax and not be angry at myself for not being productive.
And the fun fact about it? Well, most of the times when I could convince my mind that not being productive is nothing to feel bad about, things take a sudden turn: I get my ideas back, my productivity rises and, in effect, I even achieve more work than on an average day.

Link to original: 

Web Development Reading List #166: Efficient Docker, CSP Learnings, And JavaScript’s Global Object

Web Development Reading List #162: Server Side React, Inclusive Design And The Web Worldwide

We shouldn’t let ourselves get distracted by people who work on different projects than we do. If a developer advocate works on a web-based QR code application, for example, their way of tackling things most certainly won’t fit your project. If someone builds a real-time dashboard, their concept won’t relate to the company portfolio website you’re building. Bear in mind that you need to find the best concept, the best technologies, the best solution for your specific project.

View post:  

Web Development Reading List #162: Server Side React, Inclusive Design And The Web Worldwide

Web Development Reading List #138: Accessible Web Components And CSS And Sass Precision

From time to time you need to recalibrate your brain by experimenting with new technologies, by tracing down the performance of a certain feature or by reconsidering the environment of your project. While I’m generally not a proponent of inlined CSS, we now will use it for a third-party script we are providing to avoid style leakages. The point here is that this decision won’t harm performance as it’s an asynchronously loaded script.

Read original article – 

Web Development Reading List #138: Accessible Web Components And CSS And Sass Precision

Website Review: charmingcharlie.com

VWO recently conducted a giveaway along with Concept Feedback where we promised a free website evaluation by a Concept Feedback expert. Charmingcharlie.com won this contest and Concept Feedback expert Tom Charde along with the team has been working hard to churn out a brilliant review for this website. Read on for a review of CharmingCharlie.com, head to tail.

Analysis Environment

Note that the following analysis was done viewing the site on;

Web – MacBook Pro 15” Retina display (2880 x 1800) | OS X (10.10.3) | Firefox (38.0.1) browser

Mobile – iPhone 5S | iOS (8.3) | Safari browser.


First Impressions

After a quick walkthrough of the website, a couple things are very clear: it has a very clean design, is aesthetically appealing, has an audience-appropriate tone, and provides an impressive product offering. Charming Charlie steers clear of excessively large images and in-your-face promotional messages, which, in itself, is a big win for the user experience.

Brand Messaging

The first big hurdle that we noticed upon visiting the site is that it lacks any kind of site description, positioning statement, brand promise and/or value proposition. Your existing customers may know all about you, but there’s a large, untapped audience you’re overlooking: people who are unfamiliar with your brand.

Here’s a few basic questions one should ask themselves:

  1. How would you describe the company to someone who’s never heard of it?
  2. How does it provide value to its customers?
  3. What differentiates it from the rest of the market?

Here’s what we can make out from a simple research of the brand; Charming Charlie is a retail store (online and offline) with the latest trends in women’s apparel, fashion jewellery, shoes, handbags, accessories and more. This should ideally be mentioned  on the home page and done so in text format.

There are several great copy points on the ‘About’ page that could ideally craft the messaging and help establish a unique tone for Charming Charlie.

  • We’re crazy for color.
  • We live for sparkle.
  • We thrive on making a statement.
  • We know accessories have the power to transform both your outfit and your outlook.
  • Helping every woman, everywhere, find her fabulous.
  • If it feels good, do it. If it looks good, do it in every color.
  • Unleash your one-of-a-kind style.
  • Bring out your most fabulous, fierce and fun self.

Value Proposition

Charming Charlie needs a one-line “hook” statement; something succinct and hard-hitting that can be used as a tagline near the logo and possibly in the header area. The fifth bullet above (Helping every woman, everywhere, find her fabulous) is close, but it’s a bit too long. Consider this;

Charming Charlie
find your fabulous!

Refining the messaging will not only strengthen the brand, but will also boost the search engine rankings for relevant keywords.


Website Analysis

Moving forth we will break our analysis down to 3 categories; Technical analysis, Heuristic analysis and Mobile website analysis.

Technical Analysis

(Desktop)

The first and foremost thing that one should focus on is to ensure a glitch free website experience. Fixing minor bugs is low-hanging fruit, one that you can make a lot of money on. We found some of these conversion killing bugs on Charming Charlie;

GLOBAL-1 Upon arriving, the site immediately forces an intrusive promotional pop-up on the user. We’d recommend running a few tests on this (one without any pop-ups; one with a 15-sec delay; etc) to see if the bounce rate improves.

GLOBAL-1

The top promo banner in the header (scarves) is loading an error message.

GLOBAL-1

The “Quick Views” feature on the “As Seen In” page doesn’t seem to be working; it displays an endless loading spinner.

Many of the text-based graphics throughout the site aren’t retina-ready. (Examples: Charming Charlie logo, media logos in footer, free shipping banner.) Most users won’t experience a difference, but those with retina displays are seeing a pronounced drop in graphic quality.

(Mobile)

The email sign-up page (under “Customer Service”) gives an “invalid certificate” error. Testing this on Mercury Browser also showed similar results.

MOBILE-3 (1)


Heuristic Analysis

Homepage

CharmingCharlie.com’s clean, minimalistic design is one of its major strengths. It sets the tone right away. The homepage’s look and feel is right on target. Design-wise, one thing we’d suggest is tweaking the styling (inconsistent text colors and alignment) and placement (perhaps move to hero image area?) of the promo banners, which seem to jumble up the header space. The area of the homepage with the most room for improvement is the content.

  1. Allocation of page real estate: The current viewport is dominated by a giant slider; an area that can be used much more efficiently. Try reducing the height of the slider images, moving some of the featured products and messages up, and testing for engagement.
  2. Complete absence of copy: There is literally zero copy as HTML text; the entire page is image-based. In addition to accessibility issues and increased page load time, lacking text on the homepage is killing the chances of achieving a decent search engine ranking.
  3. Lack of Clarity around Newsletter sign up form: There is a “Sign up for emails” form in the footer, but there’s no information about what this is for. Think about it from a user’s perspective: “Why should I sign up? What are you going to send me in exchange for giving my personal contact information?” Try adding a brief description near the form or a link which describes what a user can look forward to.

Following is a screenshot of homepage, annotated with things that should be worked upon.

Modified Home Page copy

We’ve also made a quick mockup for one possible way the header might be transformed.

Variation

VWO_proposed-header_TC edits

vs

Control

Home header

Category Browsing

The What’s New category is confusing.

  • It has a combination of “themed” content (Modern Americana, Citrus Splash, Moroccan Muse).
  • A redirect to an existing main category (CC Essentials).
  • An out-of-place sub-category (Best Sellers).

There’s really only one true subcategory that fits here: New Arrivals. To remedy this, simply eliminate the What’s New category entirely by ‘New Arrivals’. Following is a screenshot of the category browsing drop down of Charming Charlie and things that should be worked upon.

Category browsing-1

GLOBAL-1

Also consider sorting the resulting list of categories into two grouped areas: those which are a product type (Jewellery, Handbags, Apparel, Accessories) and then all the others (New Arrivals, Best Sellers, Seasonal, Special Occasion, CC Essentials, Sale). And it may help to separate the two groups in the side nav with a faint line. Check the mockup with these suggestions implemented.

Product Page

The product page looks pretty standard but there are multiple tweaks which can be done to make them convert more. The screenshot below annotates some aspects which can be improved.

Product Page (1)

One other glaring aspect which we noticed was that there is no product review system. It often acts as a social proof and really helps the visitor take a decision on the product page.


Mobile Web

With e-commerce buyers rapidly gravitating towards mobile, fully functional mobile site is a must. CharmingCharlie.com isn’t a true responsive site, but it does have a fairly decent mobile
version.

Home Page

Similar to the desktop site, the mobile version of the homepage suffers from a serious page real estate concern: the promo messages, navigation, utilities, etc take up almost 60% of the initial screen. Reducing the size of this footprint and moving the meat of the content up will almost certainly improve bounce rate and conversions.

MOBILE-1

Store Locator – Visual Hierarchy Issues

With two form fields (styled differently for some reason) interspersed among three large, black buttons — the eye just doesn’t know where to go on this page.

Converting the buttons to links, and adding some space between the main content and the footer (email signup form) should help create a better flow.

MOBILE-2

Product Page Readability

We would recommend increasing the font size of the product page body copy. The size used on the About, Privacy, and other non-product pages is much easier to read — as can be seen below in a side-by-side comparison.

MOBILE-4

This brings us to the end of the website review of Charmingcharlie.com. We definitely hope Charming Charlie would implement these changes and share the results with us. We thank Tom Charde for working rigorously on this review and helping us in bringing this review to such good shape.

We are going to conduct another giveaway very soon; Can’t wait for the giveaway? You can head to Concept Feedback and hire expert services to get your website reviewed in detail.

Cheers!

The post Website Review: charmingcharlie.com appeared first on VWO Blog.

See the article here:  

Website Review: charmingcharlie.com

The Line Of Least Resistance

In chess, the psychological dimension that springs from a dialogue between two brains, two ideas, two strategic conceptions that depend on the personality of each chess player has long been somewhat of a romantic mystery. How do Grandmasters think? What strategies do they use?
More often than not, the most successful strategies are rooted in our very own nature. And common to most Grandmasters is that they almost never take the easy way out.

Taken from: 

The Line Of Least Resistance

Incorporating More Quiet Into The UX Design Process

Behind every successful design is a dynamic creative team, and it takes all kinds of personalities and skills to get the job done. However, the culture and expectations of a design agency are often largely centered on one outspoken, gregarious personality. Things such as group brainstorming, on-the-fly presentations and open workspaces have become the norm in most design agencies.
But the stereotypical extrovert is just one of the personalities that make up a successful team.

This article: 

Incorporating More Quiet Into The UX Design Process