You can find more info about @view-transition here and view-transition-name here.

Pablo A Santamaria

Written by

There are many publications that talk about how to scale a business, but what is the best way to grow a web design business specifically?

The solution may sound simple, sell more websites and hire employees to build them.

Well, that’s a way to do it, but is it the best way? Are there any other ways to do it?

The answer to the first question is “it depends” and the second is “yes”.

You will find this helpful if you are a solopreneur, freelancer or you may have a team working for you already and are exploring other ways to grow your business.

In reality, the only way to be able to scale your business is by removing bottle necks.

The main bottle neck by excellence is time. It is the one resource that you can’t get more of.

The key to grow your business is divorcing wealth from time.

To do so, you should create a system that works, even if you don’t put any time into it.

MJ DeMarco on his book The Millionaire Fastlane writes about the 5 types systems, he calls them money trees: rental systems, computer/software systems, content systems, distribution systems and human resources systems.

The simple solution we mentioned before is a human resources system.

I’ve seen many stories of web design agencies that grew up this way.

To do so, they also have a team/person executing a marketing strategy that helps them bring a constant influx of new clients.

These agencies tipically become marketing agencies and offer services such as SEO or Social Media Marketing, that’s generally something they do well, it was what allow them to get enough clients to hire employees in the first place, now they can do it for others.

But if you are like me, you’re probably better at creating awesome websites and not so good at promoting yourself or your services and don’t have enough work to start employing people.

Let’s explore the other ways to scale your business.

Renting equipment is not really something a web designer wants to do.

How about renting space in your server, so people can put their websites there.

That’s right, we are talking about website hosting, it is a rental system.

Warning, this is not a good option for everybody, specialised technical knowledge is necessary and you’ll need to provide support to your clients.

This type of system may or may not be for you, but even if it isn’t, there is nothing stopping you from making some money from it.

There are companies that pay recurring commissions in their website hosting affiliate programs.

Kinsta in the US or 8 Web Design in Australia are great options.

As a web designer, it’s hard to imagine a distribution system.

The best example of a distribution system in our field is Envato Market. Where template/theme creators can sell their creations.

Uber, AirBnB and Amazon are just some of the most well known businesses of this kind.

You may have the ability to build a website to connect sellers and buyers.

If you have a killer idea, as a web designer you have an unfair advantage to be the creator of the next “AirBnB of [blank]”.

Youtube channels, blogs, courses, newsletters, podcasts are great examples of content systems.

As a web designer, you could start one of these.

Becoming a successful content creator is not easy, there is a lot of competition and people’s attention is becoming a more and more scarse resource these days.

That’s why when it comes to content systems, I have a hybrid approach:

Use content systems to help you promote your other services/products.

If you happen to do great and this system may become your main thing, but if not, you are still getting the benefits of a small audience.

There are plenty of stories out there about web designers creating content systems.

Kevin Powell‘s story is a great example, not only because he has a successful Youtube Channel, but also because he has courses to teach CSS.

Two different content systems that support each other, needless to say, that’s Kev’s main activity now.

I’ve left this type of system last, because that’s the route I’ve chosen.

Out of all types of systems mentioned, it is the most interesting to me because the Internet has made more millionaires in 10 years than there were in the previous century.

Also, once a software is built, they can be run with very little maintenance.

As a web designer, the obvious place to start is by building an online application of some sort.

The most common way to monetise an online application is via subscription, making it a rental system as well.

At Koala Widgets, we build software systems in the form of Widgets that people can embed in their websites.

Our clients pay a subscription and they get something that attracts visitors to their websites.

After the widget is built, we can have 1, 10, a thousand or a million users and the work won’t change much, it’s very scalable.

I hope this article gives you an overview of the different ways to grow your web design business.

I know, in some cases, it means changing the business model.

BTW, if you haven’t read my previous article where I explain why Web Design is a bad business model, you may want to check it out.

Pablo A Santamaria

Written by

See the Pen
Untitled by Koala Widgets (@koalawidgets)
on CodePen.

For a while, I’ve been searching for a flexible layout that meets these criteria:

In the past, I settled for solutions that don’t meet all my criteria, however, with the current state of CSS, I thought it must be possible.

My CSS mentor Kevin Powell recently did a live YouTube responsive layouts workshop. If there is someone who knows how to achieve this, that is Kev.

At some point in the video 1:50:55, Kev had a grid on his screen and somebody asked to center the last row elements.

His response was both dissapointing and hopeful; “That’s something I wouldn’t be able to do with grid… I wouldn’t use grid, in that case I would use flexbox“.

This got me started on a quest to find a solution using flexbox.

Since we are using the page builder YOOTheme Pro in this website, we can easily use the editor to add a Grid, and configure the settings to achieve the desired result.

At first sight, this grid meets all the criteria, so let’s start by looking at the source code. You are welcome to inspect it in your browser as well.

This is the HTML when there are 4 columns showing.

The main code to achieve this is a simple flexbox that justifies the content in the centre.

Flexbox is also allowing all the items in the same row to have the same height.

Then, they use percentages to control the column width based on the screen size, so there is a fair bit of code behind this, which is totally fine.

Also, for the gap between the elements, they are using a left padding on the elements, and a negative padding on the wrapper, to even out the first element of each row.

In conclusion, this is a good approach and I would just need to define the number of columns according to the screen width as I did in the settings of YOOTheme Pro.

However, it is not as portable as I would like, because I would need to pre-define break points for the media queries, which may be different in other projects.

Also, telling the number of columns in various screen sizes, is not as elegant as simply defining the minimun size of the items.

So, here’s my quest to find such solution:

Using flexbox by default almost worked perfectly, except for the last column, that stretched the item to take the full width of the row.

The solution for this is simple, just use

Luckily, I came across the article Controlling Leftover Grid Items with Pseudo-selectors where the author finds a solution to center elements in the last row of grid.

This is a very clever solution, just assign 2 cells to every item, then move the item in the last row to the desired position.

In the image above, the last item is targetted in CSS, by selecting the last element, that is also an odd number. Keep in mind, that another way to say “odd numbers” is by selecting the multiples of 2, then adding a unit to it: 2n + 1.

Then, we just tell this item to end in line #4. As you can see in the image, lines are placed at the beginning at the end and at the gaps.

When there are 2 item in the last row, we need to select the second last element that also follows the sequence 4, 7, 10, 13… And tell it to finish in line #4.

Then, the actual last item will be automatically placed in the right spot as it remains next to the second last.

So let’s start by defining a couple of variables:

• Item width
• Grid gap

To understand what we are doing here, I’m assuming that you understand how display:grid; works, so the display and grid-gap attributes should be self-explanatory. If not, you can check these great videos on Grid.

The tricky line to understand is grid-template-columns. We are using repeat to define the columns. Repeat has 2 arguments:

The first argument defines the number of times that the track list should be repeated. We’ve used auto-fit in this case which automatically adjust the number of repetitions to the largest possible number that doesn’t cause the grid to overflow.

The second argument is using a minmax() function, where we define the minimum and maximum width of our columns, but remember, our items occupy 2 columns + a gap.

Let’s start by explaining the first argument of the minmax(), which defines the minimum width.

Do you remember we defined the min-width of the elements as a variable? Let’s use the defined values as examples for our grid.

But, what if the user is using a super narrow phone? Well, in that case, we want the minimum width of the item to be 100% to prevent horizontal scrolling. Since the item is occupying 2 columns, we get: X% + 20px + X% = 100%, which explains the following calculation:

Now, we put those two calculations as arguments inside the function min(), which will automatically select the smallest of the two, and that’s the first argument of our minmax().

The second argument of our minmax() is the maximum widht, which we’ve defined as 1fr, which represents a “fraction” of the available space in the grid container. 

Now, it’s time to use container queries to determine the number of columns. Let’s start with 2 column layouts.

In this container query, we are targetting a min-width that just allows for 2 items to display side by side, and a max-width just before 3 items are displayed in the same row.

Unfortunately, CSS variables don’t work in media queries or container queries, so the code you just saw above won’t work, unfortunately. For now, I have to manually edit this to give fixed values that match our variables var(–min-width) and var(–grid-gap).

Having said that. I’m writing for example 200px*2 instead of 400px, so it’s quick to replace.

See the Pen
Centering last row with CSS Grid by Koala Widgets (@koalawidgets)
on CodePen.

Pablo A Santamaria

Written by

After running a small Web Design company for over a decade, I can tell you, building websites for clients is not the best business model.

The answer is simple, recurring services.

Successful web designers typically don’t just offer web design, often they become marketing agencies/consultants that offer all sorts of marketing services:

• Marketing strategy
• Social media
• Paid advertising
• SEO
• etc.

That way, they don’t have to find new clients every time, client acquisition is less crucial if you have recurring services.

Building websites for clients becomes just part of what they do.

Marketing services are naturally a better business model, because these are recurring services.

However, marketing services is not a solution for everybody, what if you don’t have the skills or the passion for it?

The truth is, we are not great marketers. Being a small team of 2, our skills are more on the technical side of the spectrum.

Early in the journey we introduced recurring services:

• Email
• Website security
• Hosting
• Domains

These services are great, but they come with a problem too.

Email, Hosting & Domains are comoditised services and it’s very hard to market by differenciation from the competition. Having said that, these services can become very easy to provide and while the margins are small, they add up to help your business become profitable.

Website security also produces recurring predictable income, which is great, we are working to grow this arm of the business.

We recently launched this website to create and promote widgets for websites.

We are working on various Widgets, like this Website Cost Calculator or the CEPI Calculator, where clients can subscribe to embed them in their websites.

These widgets are the reason why Koala Widgets exists and it’s our current attempt to escape the web designer rat race.

It is still early days for the widgets and we don’t have many sales yet, but the subscription model it’s more promising than building websites for clients.

Hopefully, you can take some ideas from this article and introduce more recurring services to your offer.

Finally, I have to mention affiliate marketing as an option.

I was hesitant to mention affiliate marketing because in most cases it doesn’t generate recurring revenew, so I have to clarify, I’m referring to recurring affiliate programs.

Some hosting companies like Kinsta in the US or 8 Web Design in Australia offer great recurring affiliate programs.

At Koala Widgets we also offer a recurring affiliate program. We value highly the distribution of our widgets and our Affiliate program is a reflection of that.

That’s right, the format of this website proposal template is a Google Presentation, and there is a very good reason to do it that way.

When I did the 10K Bootcamp with uGurus, which is a prehistoric version of uacademy, one of the commanments was; You shall not just email proposals.

After I stopped emailing proposals to the clients and started presenting them, my conversion rate increased dramatically.

Also, most web designers who were doing the training with experience a significant conversion rate improvement.

Considering all proposal are now presented instead of sent, it makes sense to use a Presentation format for the Web Design Proposal.

This is the exact same format we’ve been using since 2018 and it has given us great results. I hope you find it useful and help you land your next client.

Complete the form below and receive our free web design proposal template for freelance designers in your inbox.