New year happened. and then Christmas happened. And then I went away for jolly. Enough time to break a habit.
Not a chance.
This weeks design and developer inspiration rundown has even more of the good stuff. Want to know more about accessibility? Check. How about the newest CMSs on the scene? I got you. Enjoy!
Website Inspiration
Beauregard
Beautiful beautiful website. Smooth movement, great imagery and subtle copy. Only one issue… it auto-plays music you cannot turn off. Are they being serious?!
Use best-of-breed solutions tailored to specific use-cases like e-commerce or blogging; it provides a modern framework for rapid iteration and it generates lightning fast websites out of the box. Enter the content mesh!
Story Mapping, Visual Way of Building Product Backlog
Story mapping is a top-down approach of requirement gathering and is represented as a tree. Story mapping starts from an overarching vision. A vision is achieved via goals. Goals are reached by completing activities. And to complete an activity, users needs to perform tasks. And these tasks can be transformed into user stories for software development.
In essence, the Content Mesh allows you to (from Sams article):
select best-of-breed solutions tailored to specific use-cases like e-commerce or blogging; it provides a modern framework for rapid iteration and it generates lightning fast websites out of the box.
That, is an exciting sentence.
There are have been multiple times across different projects where I have wanted to use a piece from this platform, and a piece from that service, but have been tied to a pre-set CMS with no flexibility. It looks like we have a solution!
Why hasn’t Content Mesh been possible before?
Honestly. It has been.
REST APIs have been around for years, and web developers have been able to integrated third-party services into websites. Google Analytics is a perfect example of a script that can be dropped into a site and managed elsewhere. I don’t believe it is a case of “it wasn’t possible”, but rather it hadn’t been widely considered. The reason it is getting traction now is because of the following points.
Dedicated web services for specific use-cases
Fully fledged CMS services still exist, they are continually being improved and built upon. However, micro-services are built to do one thing, and do it right. This means that the right tools can always be used for the job, as opposed to hacking a pre-existing functionality to do it for you (you have to love WordPress development…).
Consider a Ecommerce business for instance. Products need to be managed, payments need to be taken, as well as a blog, CRM, user data storage, and analytics.
One size fits all
In the past I would have directed a client to a monolithic approach, such as Magneto. It handles everything (which is great at first) but development and change is restricted by the software. This become a problem when rolling out continual changes that eventually go against the built in functionality.
So micro-services?
Now it is a different story. Each need has a service!
These can all be called via the respective APIs and shown on the central site.
Each one of these services does a certain job, and it does it well. They have comprehensive documentation, and a boat load of code already written to drop into a site. It is highly likely that the individual managing the products for example, is not going to be the same person writing the blogs. By separating these areas means less distraction, and a cleaner, streamlined approach to the management of the website.
There are several benefits to this micro-service approach:
If one service fails, the rest can still function – this allows fault isolation
Stronger security – each service has its own credentials
Easy integration and deployment – NPM, Netlify, etc
Not locked-in to a specific stack – can try other services
The website can easily be scaled – if a service isn’t working to its fullest, remove and replace
Easier understanding – each tool explains what it does, and only what it does
An evolution of workflow and techniques
The older monolithic services are generally built on top of older technologies and have a slower development process. Need to add functionality? Then it looks like you are writing a large PHP function that goes against the softwares original design. Need to maintain a local environment? Well it’s going to take time pulling in changes from team members.
This has been addressed by more modern technologies, take React and Vue for example. These JS frameworks enable fast spin up times, super easy to start a new project (think create-react-app), and an incredibly large community pushing improvements all the time. The open-source aspect of JS is great, with problems being solved, packaged, and stored on NPM.
These technologies partnered with the agile methodology (or similar, touchy subject) means that ideas can be brought to life in the blink of an eye (internet speed dependant). The web development community has got on board with this “packaged” concept and are really running with it. More and more businesses are understanding the idea of rolling out an MVP and building on it. Introducing Sprints and weekly roll outs to the workflow. This type of mindset requires a more flexible, more scaleable set of tools. The speed of production depends on it.
Because of this, micro-services are able to fall into place easily, meaning the arrival of the content mesh. By being treated as another package on NPM, it is as easy as running a short command in a console and including into the code base. Most of the fiddly stuff is handled by Webpack. Everything is very close to being plug and play.
So what next?
Obviously each project has its own set of requirements and restrictions but I would argue that the content mesh strategy can be applied to almost all cases. Once a basic framework has been created that works for you and your team, services can be introduced easily. You can replace that “one size doesn’t quite fit” solution and use whatever works best. Currently it seems only GatsbyJS comes with out-of-the-box integration, but it won’t be long before others join the race. The concept of a content mesh means the best solutions can all be used. This is definitely the right direction.
It’s a fight to see who can get the best product out. Sketch is doing well, but Adobe keep upping their game. The newest feature seems pretty exciting!
By creating forms, you build an interface where dialogue happens. So, the goal here is to make sure that the form asks the right questions at the right time.
This web app looks like it is going to be a life changer for me. The full code editor, in the cloud. Starting with 3GB free, before any money is needed.
Too many people get precious about those documents—I know I’ve been guilty of it. Somewhere along the way, detailed wireframes, high-fidelity comps, and motion prototypes all got enshrined as critical deliverables. Those design artifacts are unimportant. Only one deliverable matters: the product itself.
Are you able to be the villain? What about if the product you are making has potential to harm? Also, on a more positive note. Here are some great examples of design systems, the state of UX in 2019, and more! Enjoy!
Designer Resources, Examples and Inspiration
Stop Showing Design Options and Commit
Normally create 20 different versions and let the client pick? But you are the expert, no?
They’re not going to be fun conversations. It’s not going to be easy convincing others that these aren’t paranoid delusions best tucked out of sight in the darkest, dustiest corner of the backlog. Realistically, talking about it may even harm your career.
This week is more UI focused, due to a project that I am working on. I have still managed to include some brilliant development inspiration articles, and a few thought pieces at the bottom of the rundown. Have a good week!
Designer Resources, Examples and Inspiration
Adobe XD Wireframe Kits
A collection of Adobe XD wireframes to get you off the ground in your next web project!
It’s time we start addressing accessibility before aesthetics in our design processes to create meaningful products for our diversified societies and cultures. Before diving into the Why, How and What of it, let’s revisit the definitions of these terms to set the context.
Strategies For Headless Projects With Structured Content Management Systems
Using a Structured Content Management System (SCMS) can be a great way to free your content from a paradigm that begins to feel its age. In this article, Knut Melvær suggests some overarching strategies, with some concrete real-world examples on how to think about working with structured content.
Drop-Down Usability: When You Should (and Shouldn’t) Use Them
Deciding when to use a drop-down — or when to use another interface type, such as a radio button interface or open text field — for a specific input can be tricky. This article talks through the when and wheres.
This week is a little more focused on UI design and development. And god damn they are pretty. Its all about those micro-interactions. On top of this, there are articles on Just In Time Design (it rhymes right!) and User Empowerment. Plus so much more! Enjoy this weeks design and development inspiration rundown!
Website Inspiration
BornFight
A digital agency that has been building websites and apps since 2009. Considering they have been doing it this long, I would have hoped the site would load slightly faster. However, it looks really good on desktop!
Another design and dev article curator. But this one is so much nicer. Build on Webflow, the auther only adds 5 pieces of content a day. Each from a different sector. Well worth a look.
Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency and readability. Only loads the ones you need.
autoComplete.js is a simple pure vanilla Javascript library that’s built for speed, high versatility and seamless integration with wide range of projects & systems.
Continuously delivering small iterations based on the team’s needs can transform the product development process. This approach shifts the focus away from highly-produced, out-of-date, difficult-to-maintain design, opening up the process to tighter collaboration and a higher standard of quality.
In our industry surveys help with understanding the end user. The issue is how companies go about getting the information. Sometimes a survey on a website that interupts the user experience just isn’t the best way!
Very few projects end up with exceptional results. HolaBrief makes it easy to ask all the right questions and nail your design brief every time. Built by designers, for designers.
A massive selection this week. 2 great website examples to help inspire your portfolio designs. Some great JS frameworks and testing tools. A few articles to help designers design the good stuff, and even more articles to keep you busy. Enjoy this website design and developer inspiration rundown.
Website Inspiration
Tom Rush
A Leeds based digital creative website. Tom has built a simple, easy to read, and quick to load portfolio that does a great job.
First Tom, now Tim. A lead designer at Transom Design in Seattle. His site uses lots of white space and grids to display his work. Clean, simple, easy to read.
Flow charts, like any deliverable in the design process, is an excuse to talk to your team. As much as we like complaining about meetings and formal deliverables, the truth is that design work would come to a dead stop without (a) conversations and (b) pictures.
A continuous UI testing tool that combines the accuracy of manual testing with the efficiency of automation. 21% of software budget is on bugs, and the cost of bug repair in production is 5-10x. This tool helps save time and money.
The magical disappearing UI framework. I still need to have a proper look into this but it seems really interesting. Using vanilla JS, but the same functionality as major JS frameworks. Teeny tiny in size.
Although the designers have not considered usability at all, it is a good site to show the different animations and reveals that can be used across a website. Some brilliant hover states over images, and gentle fades on scroll.
While looking for tools to unify web designs and developers I came across three really interesting web apps. One not yet out yet. One that have been the block a few times, and the other new on the scene.
Webflow
Give you the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.
Hadron is a development environment for designers and developers who work together towards the same goal, moving ideas forward and learning from each other along the way.
A simple design environment that allows you to simultaneously design across a variety of themes and screen sizes, powered by JSX and your own component library. Create quick mock-ups and share the work simply.
An Annotated Webpack 4 Config for Frontend Web Development
As web development becomes more complex, we need tooling to help us build modern websites. Here’s a complete real-world production example of a sophisticated webpack 4 config
If your job has anything to do with design, there is a good chance that you would have experienced the need to do some form of user research. If you happen to work with or for a group of people who have limited understanding of the design process, then you must have had your moments of frustration. This article helps answer these questions.
There are no silver bullets to web performance. Simple static pages benefit from being server-rendered with minimal JavaScript. Libraries can provide great value for complex pages when used with care. Netflix breaks down the process in this case study.
I am continually trying to speedy up and improve my WordPress workflow process. Unlike a lot of JS framework communities, WordPress seems to be a little behind in creating a fast and efficient roll out process. The whole thing seems a little “work it out yourself”.
That being said, there are hundreds of tools littered around the interwebs once you start looking. I have been aware of Roots, and the resources they have created for a while, but never had the time to properly look into them. Today I decided to look into Trellis and Bedrock.
What the Hell is Trellis? Bedrock who?
Trellis is labelled as “WordPress development and production servers done right”. Basically a complete WordPress server on your local machine, with the ability to deploy and update with a single command. This also means that if someone else on your team needs to spin up the theme to take a look, it is as easy as a few commands. No more sending a zip file across email.
Bedrock is a WordPress boilerplate that completely overhauls the standard environment setup. It means that the project is organised, and just easier to work with.
I will only go as far as setting up a local development environment in this article. I will come back and write an article on remote servers once I have my head around the process.
Installing the Requirements
To begin with Trellis runs on Vagrant – a tool for building and distributing development environments. And Vagrant runs on VirtualBox. So before we can do anything, these two need to be installed.
Firstly, to install VirtualBox, go to https://www.virtualbox.org/wiki/Downloads and find the package for your machine. As I am running Windows I have a feeling this process is going to be harder for me, than someone on Mac on Linux. We shall see…
Vagrant takes care a dependency called Ansible for us. This is a automation system that handles application deployment and task execution. In essence removes the need to run repetitive tasks ourselves. Vagrant only installs Ansible within the project, so if you are going to consistently roll out new project, to save time it would be worth installing locally from https://github.com/ansible/ansible. This is not essential thought.
Create a Project
Now to get into the fun bit. Roots recommend a directory structure that is not the WordPress standard. This is handled by Bedrock, so no problems here.
It looks like this:
Firstly we need a project folder to put everything in.
mkdir example.com && cd example.com
Now we need to introduce Trellis.
At this point you are working with GitHub and SSH. Make sure that you have a SSH key set up on your computer, and also on your GitHub account. If you have not, you will need to do this now.
git clone --depth=1 [email protected]:roots/bedrock.git site && rm -rf site/.git
So far so good!
Configure Your Site
Trellis is built around the concept of “sites”. Each Trellis managed server (local or remote) can support a single, or multiple WordPress sites. Trellis handles the configuration everything required to host a site. This includes the databases, folder directories and Nginx vhosts. This means that this process only needs to be carried out once. After this everything can be run from here.
Trellis uses YAML files for each environment. There are two files that you need to be aware of.
Normal settings file: group_vars/development/wordpress_sites.yml
Passwords and secrets: group_vars/development/vault.yml
Normal Settings
This file manages the top level settings that is used to define all your sites. This is the bare minimum example that is given in the Trellis documentation.
Each site starts with the website name as the key. This is used by Trellis internally to name the site and as a default variable throughout the build. It is recommended that sites are named after the domain, so that it is easy to understand which is which.
To access the development site on your localhost, set the canonical link to the URL of your choice. Trellis will set your system to show your WordPress site when you visit this domain. In the example above, visiting www.example.test will take you to the site.
Under this site name are the settings for that particular site. There is no need to redefine these variables, but if you do, be aware you will also have to edit the corresponding entry in the Password file.
Passwords and Secrets
This file is used by Ansible. It is used as we do not want to include passwords in our Git repository. This is an example of the vault.yml file given in the documentation. As you can see the site names match in both files.
Spinning Up
To get the server up and running, three things need to happen. Firstly move into the Trellis folder, inside your project root. Secondly, run the following command:
Vagrant up
Vagrant will go away and get certain dependencies it needs to run. Once these are installed you will need to re-run the command.
At this point I found on my work machine Vagrant got an error when trying to download a build essential: build-essential_12.1ubuntu2_amd64.deb
The console returned the following error message:
The following SSH command responded with a non-zero exit status.
Vagrant assumes that this means the command failed!
apt-get install -y -qq build-essential curl git libssl-dev libffi-dev python-dev
Stdout from the command:
Stderr from the command:
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/b/build-essential/build-essential_12.1ubuntu2_amd64.deb 400 Bad Request [IP: 91.189.88.152 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
I was able to fix the issue. Once these packages had properly installed, I ran
vagrant reload --provision
To kick off the machine again.
Once running, this will take around 5 – 10 minutes to complete. As soon as this is finished, your WordPress site is accessible. In your browser following the canonical URL set in settings earlier to see the site.
When you need to shut down the machine, you can roll it down without deleting the whole machine by running:
Vagrant halt
This is essentially shutting the computer down. To start it back up just run:
Vagrant up
Once this has been run once and you have the hang of it, your workflow speed is dramatically increased. By including Gulp into your theme development will turn the whole process of developing WordPress themes so much more enjoyable. Rather than messing about with the setting up of environments you can just be creative!
This week was a hard week to work out what not to put in this design development rundown. There were so many great choices. A brilliant website inspiration, some great design based tools, and all the articles. Enjoy!
Website Inspiration
St. Phillips Homes
A development company, specialising in building homes in desirable locations. The site is fast to load, and has a sleek look and feel. A nice change from tech sites.
A curated collection of useful (and not useful) CSS snippets that you can understand in 30 seconds or less. Some really helpful ones, like a load bouncer or how to make a Circle.
Originally built for Ruby on Rails apps (look at the BaseCamp example) this JS script makes navigating a site super speed fast. All by not reloading the page. Simples.
So much varied work goes into producing a digital product. Mock ups, sketches, user flows. This is all incredibly important. The documents that it generates are not. Remember what you are creating.
Hello past self. Here is why web accessibility matters to your job. Turns out web accessibility affects all users, not just thought with disabilities. Sort it out.
How (properly) Wasting Time at Work Increases Productivity
Our workaholic culture and the business epidemic tend to villainize time-wasting behaviours during work — like leisurely lunches and web browsing — but research proves that breaks can enhance your performance, on many levels.
