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.
Give you the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.
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.
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.
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.
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
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.
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 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: 188.8.131.52 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:
This is essentially shutting the computer down. To start it back up just run:
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!
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.
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.
Up until recently I have been predominantly a WordPress based developer. I have dabbled in other things, a little bit of React here and there but nothing crazy. Recently however, I have felt a bit nonplussed with it all. Everything seems to take a little bit too long to spin up, and although I have built Gulp scripts to help speed me along, they hasn’t help as much as I would like them to. Then Gutenberg became a thing. Not that I don’t think WordPress needs to stay with the times, I just don’t think it will make my life any easier.
Enter Grav. I was looking for a simple, easy to spin up static site generator that has a backend simple enough for idiots clients. It is PHP based (so I can put it on a clients hosting without having to explain Node), and speedy as anything. It seems to cover all those bases.
This was a dream. I already have WAMP and Composer installed on my machine so I had to run 3 commands to get Grav installed and ready to go.
This last one did give me a little bit of trouble. I got the error message:
‘bin’ is not recognised as an internal or external command, operable program or batch file.
Turns out this is due to the PHP directory not being found by Windows. To get past this all I needed to do was show my computer where PHP was located using this command:
C:\wamp\bin\php\php7.0.10\php bin/grav install
At this point everything went well. I already had Wamp switched on, so pointed my browser to that folder in my Localhost.
Installing Admin Panel
The Grav “Learn” section has a really good rundown of all the configuring and option settings that can be set. It walks through the folder structure, what is used for what, and the general layout.
At this point I was not bothered about this. I just want to install an admin panel and smash out a theme (if you are bothered, here is the link: https://learn.getgrav.org/).
It turns out installing the admin plugin is just as easy as installing Grav itself. Firstly you have to make sure that your version of Grav is the latest version.
Then, once you are sure you are on the latest version, add that plugin
bin/gpm install admin
For the two above command, remember that is you had an issue with PHP when installing Grav, you will do again. So reference PHP directly.
I found that my console sat thinking for a while, before anything happened. But something did happen, so sit tight. The admin plugin also requires three other plugins. Login, Forms and Email. These set as though dependencies so will install them for you.
Once this has been completed, I found that when I pointed my browser back to the Grav folder on my Localhost the page had changed. Now there is a admin screen asking me to set up a user. Once this is done you are directed to the admin area.
First thoughts: God damn I like this. It has very obviously been built with ease in mind.
All the options and settings that the “Learn” section went through are all included down the side of the admin section. This made me happy, as I want it as simple and as easy to explain to clients as possible. On a quick click through it seems much like any other CMS, but simplified. There is obvious room for adaption is a project requires it, but for a simple brochure site or blog this setup is perfect.
As Grav is saved down into static files, there is no need for a database. This means that the way the site is backed up, is by downloading the static files. This option is set front and center on the dashboard, alongside a simple user statistic chart.
I like to automate everything I possibly can, and the idea of manually downloading a site backup every week does not appeal to me. Turns out this is not a problem. The Grav CLI allows you to hook into the inner workings of the site, so a cron job could be set to do this for you. Happy days.
The text editor works in the same way the pages do when editing manually. They use Markup. This is a barrier to entry for a lot of people who are not so technically minded. Turns out someone has already got a solution for this.
Once again, installation is a breeze (yes, I like Grav). There are two ways you can manage this.
Log into your admin panel,navigate to plugins. Search the plugin. Click add.
Or, if you are like me and want to run everything quickly when rolling out a new project. Run this command.
bin/gpm install tinymce-editor
I am going to spend a bit of time looking into developing a proper, fully fledged theme. But as a general overview to rolling out a site on a localhost, it is a definite winner! As there is no database it means the whole site can be dropped on a hosting service via FTP/SFTP and you are laughing.
This is the 50th Creative and Development Inspiration rundown. That is almost a year of finding best practise articles, and not updating my site to have SSL (I only sorted it yesterday, what a ballache). In any case, this week has been a great one for web articles. From best UX practices, to setting website goals, to infinite scroll, and back to web accessibility. This weeks design development rundown is an eclectic mix.
Kicking this week off with the website inspiration. A website for sourdough pizza. Simple, easy to understand, with subtle (and not so subtle CSS animations). Someones websites don’t need to be astounding to do a great job.
UX Design Practices: How to Make Web Interface Scannable
Scannability is one of the most essential factors of website usability. We have so much content at our fingertips, more than as can consume. Due to this websites need to be designed in a way to get the information easily and quickly, so we can go back to Twitter.
User Experience: How to Improve Your Website UX with Humor and Cuteness
Building a website is all about your users. You need to be aware of your audience and you build your brand identity around them. There are thousands of ways to approach and enhance your website user experience. One of the strategies we are often presented with is using humor and cuteness added to your website style.
Today’s content can consist of VR, animation, data visualisations, and video games. As well as the more standard HTML tags. This means a broken experience for those who rely on assertive technologies. How can this be changed moving into 2019?
Big reveal research does not work. As in, one person going away and doing all the work, ending in a presentation does not allow the team to immerse in the user information. The team must be there from the start.
This week is more developer heavy, but with reason. There have been some brilliant tools and articles this week, and I really wanted to share them all! Enjoy this weeks design (little less) and development (little more) inspiration rundown.
ACLU — 50 State Blueprint
Not your typical website, but incredibly effective. ACLU have created this simple website showing each one of the 1,942,600 people in state prisons and jails in the US.
When you use eight values specifying border-radius in CSS, you can create organic looking shapes. The article goes through how this is done, and also links out to a handy tool to help in shape creation.
This article stood out to be due to this one like – “Do not commit to a deadline you did not help set”. I think this sentiment is something that needs to be considered by a lot of people in this industry. Interesting read.
Site has gone live, but you have seen tweaks are needed. No need to write each one down and send to the developer. With this extension you can make the changes in the console and send with comments. Cannot believe its taken this long!
While it may seem like a new way of approaching digital workflow, the concept of a design system is not “new” to creative industries. At the core of any design system is a language of design patterns that solve common problems a designer might face.
Getting to Yes — Convincing Stakeholders to Invest in User Testing
Those who understand the importance of UX know that design-centric companies have a higher ROI so including user testing in a design project comes as a no-brainer. On the contrary, unfamiliarity with its potential benefits means that many product owners don’t consider testing in the first place.
After a bit of digging, since 22nd June 2018 Google has updated their business model. Each API has its own separate billing, and for that reason each API must be enabled individually. To get Geocoding on Google Maps to work properly the following APIs need to be enabled.
Distance Matrix Service
So much has happened this week in web! Here is a great overview on UX animation, Lyft has created a colour palette tool. A brilliant article on why select boxes might not be the best option for users, and what to do with user mistake? All this and more on this weeks website design rundown.
A digital design agency based in Ukraine, this website is so smooth. The animation of information entering the page, as well as the use of 3D animation on the home banner made me a massive fan. Easy to find information laid out effectively.
This is a well known company, but god damn I love this website. Designed so that the user can get to where they need, as quickly as possible, and so pretty at the same time! Subtle animations across the website add that little bit extra.
“Eating our own Dogfood” is now a commonplace phrase and philosophy for using the products you create so you can better experience those same products through the eyes of a real consumer. Stop using fake content, and your designs might just get better!
There are many different methodologies that help designers be more productive and efficient. One of the most popular frameworks that’s heavily focused on teamwork and collaboration with the client is the Design Sprint.
Fixed headers are used across the web, with little to no thought to the user’s experience. I have just started working on a new project and am intrigued in how useful fixed headers actually are for the user. Do they help navigate the site faster or do they just get in the way?
Very simply, are fixed headers (think menu, logo, ect) good for user’s experience. Do they work?
Excited? I know right.
I came across a few articles that held both points of view. Here are the links, described, and I summarize the outcome at the end. If you can’t be bothered to read them all 😉
Navigation is the most critical part of a website. According to this study, stick menus are 22% quicker to navigate, and 100% of users preferred them. However, this study was only carried out on desktop.
However sticky menus can be intrusive. The menu should be easily assessible but not compete for attention. There is also the issue of device support – does it work every time?
There are benefits, but only when considered correctly.
If the menu is too big then the amount of content seen is reduced leaving users feeling claustrophobic. This also falls on mobile, especially on small 320px wide devices. When using a website on landscape, the sticky menu can take up a massive amount of screen space.
They prevent leaks. If a user is halfway down the page and cannot navigate they may use the back button – causing them to potentially leave the site.
If buggy or jerky they put the user off. On top of this, when being used on a device with an on-screen keyboard, sometime the whole section of content is hidden.
Users seem to prefer fixed headers, but only if they are implemented correctly.
The header should be small large enough to use, but small enough to not take up too much space. The code used to keep them in place needs to be considered to stop it bugging out on all devices.
When being used on very small devices, headers need to be hidden to provide a larger content space.
The best outcome seems to be hiding the header when the user scrolls down the page and reveal it as soon as they begin to scroll up the page. Whilst they are not at the top of the page show a reduced sized menu (but still large enough to use the links), and only return it to the full height when they are at the very top of the page.