Category: Design

This is going to seem like an odd thing to suggest, considering how much work is required to build a progressive web app instead of a responsive website. But, for many of you, your portfolio site should be built as a PWA.
There are a number of benefits to doing this, which I’ll outline below, but the bottom line is this:
If you want to spend less time looking for clients, applying to design gigs and convincing prospects to hire you, a PWA would be a wise investment for your business.

In the run-up to Christmas, there is a tradition across the web design and development community to produce advent calendars, typically with a new article or resource for each day of December. Last year, I did a roundup of these calendars, and now that the 2019 season is in full swing, here is this year’s line-up.
I’m sure you’ll notice that the majority of the calendars published here are true community efforts, often with the bulk of the work falling to an individual or tiny team, with no budget to pay authors and editors.

We’re opening up our Smashing TV webinars to everyone, and today you’re welcome to follow along as Rachel Andrew builds a layout using CSS Grid and Flexbox.
In the session, Rachel will be building a component of a layout, talking through her thinking as she does so. Is Flexbox or Grid the right method to use? How will the component respond to different screen sizes? And, what about those old browsers?

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

A sales funnel is a set of invisible steps you lay before visitors that takes them from the point of entry to the desired action. There are three stages in a sales funnel:
Top of the funnel (TOF), Middle of the funnel (MOF), Bottom of the funnel (BOF). Why do we call these three stages a funnel? Because, together, they form a funnel-like shape:
A sales funnel and its three key stages: top-of-funnel, middle-of-funnel, bottom-of-funnel marketing.

In this tutorial series, we will build a web-based multiplayer virtual reality game, where players will need to collaborate to solve a puzzle. In the first part of this series, we designed the orbs featured in the game. In this part of the series, we will add game mechanics and setup communication protocols between pairs of players.
The game description here is excerpted from the first part of the series: Each pair of players is given a ring of orbs.

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

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

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

In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so what is Inclusive Design, and where do components come into play? Heydon eplains all this and more in this episode. You can listen below, or subscribe wherever you get your podcasts.
Show Notes The book Inclusive Components from Smashing Magazine Heydon’s project Every Layout with Andy Bell Heydon’s website Heydonworks Heydon on Twitter Transcript Drew McLellan: He’s a freelance web accessibility consultant, interface designer and writer.

One of the major requirements working for a team or an open-source project is using a version control system (VCS). Git is a free and open-source distributed version control system for tracking source code changes during software development. It’s been created by Linus Torvalds in 2005 for the development of the Linux kernel. It is easy to learn and has a tiny footprint with lightning fast performance.
There is a big chance you have already used Git (since it is one of the most popular and well-adopted VCS tools available in the development community), and you most probably already have some knowledge about staging and committing your code by pushing and pulling it from a remote repository.

As the year is coming to a close, many of us feel rushed, trying to meet deadlines, finishing off projects, and preparing for the holidays. Do you remember what December felt like when you were little? It was a time of wonder and expectation, a time to slow down and enjoy the small things: watching the first snowflakes fall, drinking hot chocolate, and admiring the Christmas decorations in your neighborhood, for example.

Every time I have checked my email over the last two weeks, it has been full of Black Friday deals. We will get a short respite before the New Year offers start to roll in. I like a bargain as much as anyone, however, I think that plenty of sites will be covering the best offers on electronics and tech.
I thought we would do something different this year at Smashing.

In the first part of this series, we learned the key concepts to build an application that is as CMS-agnostic as possible. In this second and final part, we will proceed to abstract a WordPress application, making its code ready to be used with Symfony components, Laravel framework, and October CMS (which is based on Laravel).
Accessing Services Before we start abstracting the code, we need to provide the layer of dependency injection to the application.

So far as I can tell, it is uncommon to come across educational content in the field of software development which provides an appropriate mixture of theoretical and practical information. If I was to guess why, I assume it is because individuals who focus on theory tend to get into teaching, and individuals who focus on practical information tend to get paid to solve specific problems, using specific languages and tools.

The web is full of services that host rich content such as videos, images, music and podcasts, maps and graphs, and all manner of different delights. Chances are, when you add your content to a site, it will offer you a way to embed that content in a web page somewhere else.
Sites like YouTube have their own embeddable player that is popular to use in blog posts and even product pages.

Let’s do a quick exercise. Say you’ve been working professionally as a developer for more than five years. You’ve gained hands-on experience through dozens of projects and kept your skillset sharp by learning about new techniques, tools, and frameworks. You contribute to different libraries, routinely refactor the code you write, and periodically exchange code reviews with your colleagues.
But then someone comes up and asks you that one question you haven’t had the chance to figure out: Where do you see yourself, ten years from now?

This article is the second part in a series, with part one located here, which provided basic and (hopefully) intuitive insight into Node.js, ES6+ JavaScript, Callback Functions, Arrow Functions, APIs, the HTTP Protocol, JSON, MongoDB, and more.
In this article, we’ll build upon the skills we attained in the previous one, learning how to implement and deploy a MongoDB Database for storing user booklist information, build an API with Node.js and the Express Web Application framework to expose that database and perform CRUD Operations upon it, and more.

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?