If you’re looking for an alternative approach to responsive navigation, which doesn’t involve the ‘hamburger’ this may be for you.

Simple horizontal scrolling menu with CSS

Illustrator has a fair variety of default width profiles, however you may find yourself wanting to tweak them slightly. In my case I needed to tweak one, for creating some eyelashes. It’s not apparent how to do this. So it makes for a good post to explain for anyone having a similar problem.

Creating custom stroke width profiles in Illustrator

Aligning to a key object in Illustrator is one of the most useful alignment options. If you’ve ever been frustrated with aligning objects centrally, then everything nudges over a few pixels. This is where align to key object comes in, read on for how to.

Illustrator quick tip: align to key object

It’s likely you know how to align things in Illustrator, but you can never remember how to space things equally, so you resort to the tedious way of spacing them individually. If you want to align objects with an equal space between them, this quick tip will show you how.

Illustrator quick tip: evenly distribute objects

A look at type that features prominent cuts or tapering into the type and a variety of recommendations you can use in your designs.

The best ink trap typefaces for websites

Circular is very much in the spotlight at the moment. It has a distinct look to it that so many huge companies are using. From Google to airbnb, it’s everywhere. If you’re looking for alternatives, with different prices and through a different service, this post is for you.

Alternatives to Circular

The inline-block method is an effective float based layout alternative. It’s easier to align and removes the need to clear floats.

How to use inline-block for layout

This post is a follow up to a different method for horizontal scrolling navigation which used inline-block. In this post, I want to cover how flexbox can be used to achieve the same thing and the benefits over the inline-block method.

Using flexbox for horizontal scrolling navigation

Understand the differences between the two, along with how and when to use them.

How to use kerning & tracking

Vertical rhythm is the typographic practice, to create a vertical harmony between text, images and so on. On the web it’s quite difficult to achieve. Yet understanding what it is, with the aim to maintain it, you can improve your reading experience. If you’re aware of it, but have struggled to understand vertical rhythm, this post is for you. It will focus more on the why, rather than the how. So you come away with a better understanding.

A guide to vertical rhythm

I first wrote a tutorial little while back on horizontal scrolling navigation, with the intention of accommodating only mobile devices. As with every device I have come across, the usability of horizontal scrolling areas is good.

Enhancing horizontal scrolling with flickity.js

I have been recently trying to get a consistent look across my element mixin no matter the colour. That’s where scale-color comes in.

Using scale-color in Sass

Good typography is playing a bigger role in the design of websites nowadays. However when starting out it’s something that is overlooked. Considering the web is all about content, it’s important that we give everyone a good reading experience.I’m starting with a few examples that can really help improve your reading experience. I want to help you understand why these things are important and provide guidance as to why it does work.

Typography for beginners: type scale, line height & lengths

One of the frustrating things about the letter-spacing property is the addition of the letter-spacing you apply to the last letter of the text. This is fine when you have left aligned text, however if you right align or centre the text, you’re left with a little bit of space.

Remove letter-spacing from last letter

How do you maintain a perfect square shape with a responsive layout? The solution appears simple; the only issue is your content. Which if you want to maintain a square shape it should be able to accommodate the content. I’ll show you how to do it in with this quick tip.

How to: flexible squares with CSS

Lazy loading doesn’t have to be difficult, here’s how to add smooth loading images to your website.

Nice and easy lazy loading with lazysizes.js

So you use Illustrator for designing websites, and that could be because you’re on a retina screen and Illustrator is vector. So you can design at 1x and it not matter, at least that’s the case for me. However, when it comes to exporting it’s a pain, you can use ‘Save to Web’ and increase the size to 200%, but that’s tedious. You know how to export SVG, but exporting PNG files is the issue at retina sizes. In this post I will show you how to overcome that.

Illustrator quick tip: export 2x with a 1x canvas

Discovering this CSS feature will make my life much easier where it concerns the positioning of images. It’s like background-size for background images. It’s easy to use and behaves in a similar way albeit different naming. I’m going to show how object-fit and viewport relative units can allow us, to size inline images, without worrying about distortion.

Object fit for full viewport images with ease

Feature detection is a core part of day to day life as someone who makes websites. It’s one of those features I usually hand off to Modernizr. I recently saw a tweet, which spurred the curiosity to see if we’re ready to use the @supports feature query. Now is definitely a good time to start.

Feature detection with CSS using @supports

In a responsive world, managing font sizes can be tricky. So how can an atomic approach help?

‘Atomic’ font size management with Sass

Here’s a quick tip of all the ways you can export SVG in Illustrator. Each have their conveniences, advantages and disadvantages. It’s entirely up to you which you use, there isn’t really a bad way.

3 ways to export SVG in Illustrator

Servers isn’t a topic I thought I would write about, however I had to do something for the first time on nginx. There is plenty of information out there on this topic. As someone who was new to redirecting old and new domains on nginx particularly, the information is making a few assumptions. For me, it wasted much of the time, it took me to do this. As I was second guessing what would happen.In this post I want to reassure you and guide you through the process. Answering the questions, that you may have, for what appears to be a simple looking task.

Redirecting an old domain to a new domain with nginx

In Illustrator it appears more difficult than it needs to be to export a colour palette to hex values, here’s a quick way.

Illustrator quick tip: export a colour palette quickly

At one point, I was relying on JavaScript for setting the cookie for my critical path CSS. The issue with that is when JavaScript isn’t available the cookie will not be set. Not a huge deal as the website, would still function.When it comes to Wordpress, it’s not as straight forward as using setcookie in your header.php file or another less than ideal location. In this post I will show you how to set a cookie with Wordpress and use it in your code. The method is very similar to the JavaScript method, with a focus on PHP and Wordpress.

Setting a cookie with Wordpress

If you use Wordpress, it’s likely you’ll be familiar with the_post_thumbnail() or one of its variants. In this post I want to provide a way of using srcset with your post thumbnails today. The aim will be to create a similar function, that takes the same parameters and except the output will contain the srcset attribute.

Using srcset with the_post_thumbnail() in Wordpress

It’s been proven as apps have shifted away from the ‘hamburger’ navigation, to a bottom bar, engagement and browsing metrics have increased. Over time these findings have an impact on the thought process of those designing websites. In this post I detail a list of websites that are using the tab bar navigation.

Websites using alternatives to the ‘hamburger’

In the October 2014 update, Adobe added a new grid/guide creator and it’s great. It covers the majority of things extensions like GuideGuide do and has a couple of advantages.I’m not sure it’s been given the attention it deserves, a small feature, yet one we will use so often. It’s simple to use and allows you to save (like GuideGuide) and should sync your grid layouts with Creative Cloud.

You don’t need an extension for Photoshop grids

Scroll snap points is the answer to the need for JavaScript carousels, to an extent. As browsers gain more and more new features in CSS, it’s important to keep up to date with them. As the generalisation is; where you can replace JavaScript with CSS you gain performance improvements. Carousels in my experience are a good chunk of the need for JavaScript on the average website. So I’m very interested at the prospect of using scroll snap points to replace that.

Get up to speed with scroll snap points

With horizontal scrolling, submenus are quite challenging to make work. Due to the CSS you have to use, a CSS only solution isn’t viable. In this post I show you how to utilise JavaScript.

Multiple level horizontal scrolling navigation

With Wordpress there are a lot of ways to the same thing, for good reason, sometimes you can’t do it one way or the other. This can make it tricky to remember how to do it for each instance. At least this is the case for me. I want to use this post to serve as a guide for each method of doing so. I won’t be covering their parameters, just the necessary steps to retrieve an image.

Ways to get post thumbnails in Wordpress

The second to last post in this series, coding the page. You’re going to build the page using flexbox and make it responsive. The method that will be used to make it responsive, is mostly mobile first, but it will be making logical decisions based on where CSS only needs applying. This saves you from having to undo it in another media query.

Hero area series: HTML, CSS & responsive

An in depth tutorial to add buttery smooth animations to reveal your website search.

Search overlay with smooth reveal animation

Our websites can offer us an important advantage when it comes to choosing colour for illustration—constraint.

Tips for using colour effectively in web illustration

This year I took it at a slower pace with the articles. It was a challenging year, so I was quite surprised to see the website continue to grow.

A year in writing — 2017

There are three types of stroke alignment, so when and where is each useful?

Latest posts

The best ink trap typefaces for websites

‘Atomic’ font size management with Sass

Tips for using colour effectively in web illustration

Nice and easy lazy loading with lazysizes.js

A year in writing — 2017

Illustrator quick tip: which stroke alignment?

Popular in design

Creating custom stroke width profiles in Illustrator

Illustrator quick tip: align to key object

Illustrator quick tip: evenly distribute objects

The best ink trap typefaces for websites

Alternatives to Circular

How to use kerning & tracking

A guide to vertical rhythm

Typography for beginners: type scale, line height & lengths

Popular in code

Simple horizontal scrolling menu with CSS

How to use inline-block for layout

Using flexbox for horizontal scrolling navigation

Enhancing horizontal scrolling with flickity.js

Using scale-color in Sass

Remove letter-spacing from last letter

How to: flexible squares with CSS

Object fit for full viewport images with ease

.l-a,.l-b{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px}.l-a{stroke:#ff7e6d}.l-b{stroke:#ffdb6d;stroke-dasharray:1 8}

Get the articles

Get the articles