How many SEO experts does it take to change a lightbulb, light bulb, light, bulb, switch, lamp, lighting?

See what we did there? That's called keyword stuffing and it's a very common thing (and really bad practice) to get your page ranked on search engines.

How it works is like this: a search engine crawler uses its little robots to read your pages. They find the words that relate to a user's search (these are called keywords) and then shows the user everything they think applies to that search, with the most relevant search at the top.

But language is a very nuanced thing. I might look for a "rubbish bin" whilst an American friend might look for a "trash can". So an international store selling this item might want to have both those variations and then some on the product page.

So the robots then get more juice, but people reading it say, "EWWWWW that reads terribly!"

Your website should be optimized for both human visitors and search engine bots. Keywords are not just about search engine ranking; they are about balancing user experience and creating high-quality content which reduces the bounce rate (if your content is great to read, bounce rates will go down) with search engine optimization.

SEO strategy can be on page or off-page. On-page is easier to tackle - it's on your own website and you mostly have control of those elements. It is a tedious job and does need to actually get done, but it's so worth the effort.

Here are some areas you can tackle on your own website to add keywords to improve your website's search engine ranking.

Heading tags

On each page or blog post, you'll have the opportunity to add headings. Headings should not just be in a different font they should be wrapped in a heading tag, like <h1>heading here</h1>

We don't see the tag when the browser shows us the site, but search engines do. And it helps them prioritise content.

There are heading tags from 1 (page heading) down to 6, some sites even go down to 7 but we think that's a lil bit overkill. Headings should be sequential, following in order from largest to smallest indicating the importance of their content.

This helps the blind who use screen readers understand the content better too. Wins for all!

Title Tag

You can control how your website appears in search results by editing the title tag and the page meta. The Title tag is the link title in results for search queries - the blue/purple link text on google results. Your primary keyword should be used at the start of the title tag, and it should sound natural, not stuffed and bot written. There's no trust to be gained there!

Emotional titles get read more often than non-emotional ones. Titles that use power words decrease click-through rates by 12%. People are attracted to titles that have a strong emotional punch. However, if a title uses too many power words, it may be seen as clickbait. So write title tags with some emotion, but avoid terms like “crazy” and “strong” that could make your title seem like clickbait.

Adding the current year can really help too, especially for blog posts. Like this one!

You've got 60 characters to use, so make them count.

Meta description

The meta description is the blurb of text which appears under the title link in search results. If you share your page on Facebook or other social media, it'll be the description on the post.

Although it's not an official ranking factor for search engines, it can influence whether or not your page is clicked on — therefore, it's just as important when doing on-page SEO.

Here's what makes for a good meta description:

Image Alt Text

Every image on your site should have alt (alternative) text. It's literally an alternative to the image which is read by search engines and also by screen readers for the blind. It's not just excellent SEO it's an accessibility issue too - you get points for both with doing one good thing.

Adding alt text to images will help your images turn up in google image searches.

Here's what to keep in mind when adding image alt-text:

Internal links

Can I shout this one? Internal linking is HUGE for SEO.

Link from pages that rank well on your site to pages that you want to do better. You'll need to have a look in your google search console to figure that one out, then make sure your links are relevant and helpful.

When you do, make sure to use keyword-rich anchor text. For example, if we wanted to rank our brand packages page better using our home page, and our keyword was "brand design" we'd create a text link that might say "Learn more about our brand design packages here".

Internal links are really easy to add, and they will help your user when they are on your site find more relevant content too. Great for everyone, not just the robots.

Mobile responsiveness

While some peeps will argue that all sites should be mobile-first... we're on the fence with this advice. Mobile use is huuuuuuuge. And google does prioritise mobile speed scores over desktop. But what matters for you is how your users use your site. Again, google search console will help you discover what portion of users are on which device. BUT even if all your users seem to use desktop, never neglect that mobile version of your site. It's gotta be fast, actually look good, and work. You'd think that was easy... but so many websites fall down on this. Don't let it be you!

Website speed

No surprises here, folks. If your site is slower than a snail on its way to work on Monday morning... no one will love you. Sad but true. You can test your website speed using a tool such as GTMetrix or Google Page Speed Test (each prioritises different content so the scores won't be the same), find the issues and go from there. You might need an expert to help you, and sometimes the things that make your site slow really can't be helped. An example is loading content from external sites like review systems, or google maps. Then it's a question of what else can be made more efficient so those non-negotiable slow pokes can have a clear run.

 

So team, you have a list of things to investigate! We do the majority of these items in every build we complete; some items like image alt text require ongoing and additional work. We also add google schema and validate your sitemap for google which helps even more! Did we mention Google My Business? Yup, also helps.  Let us know if you need some help getting your on page sorted for your wordpress website.

Pop-ups have long been considered a nuisance by users and marketers alike. If pop-up ads were a person... they'd be that pesky encylopedia salesman desperatley trying to make commission.

Ethan Zuckerman, the boke who invented pop-up ads, has apologised to the world in a lengthy explanation of what he really meant to do. You can read more over this way.

The internet has evolved a lot since the days of marhcing ant borders and those flashy, super intrusive pop-up ads packed with sound that tried convincing us to download dodgy software.

Pop ups do still work (shocker I know!) and deliver good user experience if they provide real value to users. That's a BIG old IF.

 

Wait: whould we still be using popups in 2022?

Yes, IF you're not annoying. Otherwise you'll just increase your bounce rate, and nobody wants that!

There's a few things which get in the way of pop-ups these days. Internet users and web browsers have fought sketchy third-party banners that would basically ruin any website's user experience. Borwser and security based ad blockers have emerged as a popular option to shield visitors from being overwhelmed by flashy, dodgy pop-ups. Business Insider reports that 30% of all internet users now use ad-blockers on a daily basis!

That's a lot of folks who don't even see the pop-up in the first place... everyone else just kills them right away... right?

Nope.

Pop-ups can be effective if used properly. Banner blindness occurs just as frequently on your website as it does in display advertising. Pop-ups grab attention and have a 100% view rate because they require interaction to dismiss. Depending on who you read, pop-ups have a conversion rate of around 2-3%, which may not sound that impressive, but 3% of every website visitor becomes a significant number over time.

So popups are still a great way to get some one on your email list,

Whether or not your popup campaign will be successful depends on many factors including your web page content and your target audience.

Here are some expert tips for creating effective popups as part of your marketing strategy that actually get results.

 

A Timed Popup

A timed pop- up will only appear after a certain period of time has passed. For example 10 seconds. It's based on user activity on a page. If the user is on the page for 10 seconds, there's an excellent chance that they're beginning to interact with the content and may not be so annoyed with the pop-up appearing.

Another example might be waiting one to two minutes (yes, enough actual time!) and offering first-time visitors a discount in exchange for their email address. Given that an email address is valued at $20 or so, make sure the discount is a worthwhile exchange.

 

Scroll based pop-up

A pop-up that shows when a user is scrolling through the site, is working on an activity basis. The pop-up will appear when the user has scrolled down to a certain percentage of the page (e.g. 50%). Once the user has scrolled halfway down the page, the pop up will appear. Again, as this is action based, it means the user has chosen to engage with the website.

For example if you have pop-ups on blog posts and you know you get a lot of traffic some those posts, don't trigger your pop-up until the user gets most of the way through the content.

 

Page based pop-ups

When a web browser encounters a page-based popup, it may either trigger because the user visits a certain number of pages in their session, or because they visit a specific page e. g. pricing or a specific category of product. The key to making these pop-ups work is to make the content or promotion you're showing relevant to the page they're on, and make the value you're delivering (exclusive content like an ebook, discount, etc.) front and center.

 

On-click pop-ups

You can set a popup to appear only after a user clicks an element on your page.

 

Placement of pop-ups

Pop-up ads can be shown in many ways. One of the most common (and jarring) is a full-screen pop-up. While these can work, they do interfere with the browsing experience heavily. Better options would include a modal centred pop-up (not full screen), a banner at the top or bottom of the website, or a slide-in option from the lower left or right corner.

 

Pop-up Frequency

You need to carefully manage pop-up frequency so as not to overwhelm visitors or frustrate them. You should set a limit on the number of times someone will see a pop up during their browsing session. You should also use a cookie to ensure that the popup doesn't appear again after the user closes it.

 

Exit intent popups

A pop-up asking if they want to leave a website is still quite an annoying and intrusive experience for someone who has already decided to leave. It can certainly win back customers with the right message, but must be used sparingly and with great caution. This type of pop-up is best used for a limited time promotion.

 

Make pop-ups easy to quit

Feature the “x” or “no” button clearly or allow people to click off the side of the pop-up to close. Don't hide the exit option. A lightbox popup or modal popup can also usually be closed by clicking anywhere off the canvas, but when used as a mobile popup may have issues as there is not so much background to click on, making that exit button even more important.

Different types of pop-ups can be used to executed different parts of your marketing strategy. Make sure always to be helpful and not get in the way! This reader has lended on your site after all to read, purchase, or browse - exactly the behaviour we want.

If you want to get more traffic to your site, then you need to make sure that you're providing quality content. If you've been putting off doing an audit of your own website, now's the perfect time to start.

An audit is simply a process where you review every single page on your website. It's a way to find out if there are any issues with your content, such as broken links, duplicate pages, missing images, etc.

You'll also want to check for any issues with your design, including broken links, broken images, and other problems.

Once you've completed your audit, you should have a much better idea of what needs to be fixed on your website.

Hold up, what's website content?

It's your blogs, your sales pages, your portfolio items - it's any words or images you have on your website.

Next you want to list a step-by-step process for performing a content audit. Here are some tips that should help you get started:

1. Create a spreadsheet

The first step will need them to create a spreadsheet with various headings in order to capture the data. Get organised! What would we include, at the very least?

2. Define your goals

Think about what you want to accomplish. You'll have a better idea of how to organise your audit when you have your goals in mind.

An audit of your content can include information on conversion rates, as well as the number of visitors to your website. One goal to consider could be to determine which of your pages need to be SEO-optimised and focus on getting organic search traffic. Every content strategy needs to incorporate SEO best practice to be effective; every SEO needs to embrace SEO content marketing in order to remain on Google's good list.

But once you get that traffic, how are you content going to guide those new eyeballs toward their goal? That might be a stage two for your audit.

You could even identify your the most interesting and best-performing content during your audit and place  on your website's home page or in an email newsletter.

What goals would we have?

3. Populate your content

Now you need to have a list of all the pieces of content you want to focus on for this audit: web pages, landing pages, portfolio or blog posts? If you have a small website, you can easily copy and paste the information into your spreadsheet. Alternatively, you can use a tool such as Screaming Frog (https://www.screamingfrog.co.uk/seo-spider/).

4. Data analysis

Time to analyse the data you've captured.

There may be gaps in titles and meta descriptions if they're looking to get more visibility. You should be paying special attention to older content if they want to update it. Finally, you should be looking at the level of traffic that each page receives. It's important that the pages that get a lot of traffic have good content. Important pages that aren't getting a lot of traffic are a good opportunity for improvement. Older posts are key areas that can be updated with new information - something that the search engines love!

5. Action plan

After this analysis, your will now have an action plan that you can work on. Some content will need updating, some might need deleting and there are likely whole new content pieces that you'll want to create.

Make a list of the action items and assign them each a priority. Then all you need to do is get started!

Giving feedback to your web designer and to your copywriter is a super important step in your project.

Why? Because your website - its design, branding, words and user experience - is a tool for your business. We are experts in our field (that's why you hired us!) and we want to ensure you smash your goals.

We collaborate with our clients so they can reach their project goals. This is why we work so hard on the brief in our early days together; to get to know you, your business, your ideal client and your future vision.

When Is Design Feedback Needed On A Project?

When we are about halfway through the project, we ask for design review (or wireframe review, or copywriting review, depending on where exactly we are at). Other studios have different workflows, but all ask for client feedback on a proposed design before a project is finalized.

Your constructive feedback helps us make any tweaks, shifts or changes to stay on the path we set out together in the early phases. We are as invested in your project as much as you are because, as creatives, it's part of our identity.

A Healthy Feedback Loop Means A Positive Designer/Client Relationship

These are the steps we find help our clients meet their goals with us. If you're design professional COPY, PASTE, LOVE. Take 'em and tweak 'em. If you're a client, then put those listening ears on an learn right in. We're telling you how to ensure a successful and happy project.

You may not understand every decision we've made but there is a reason behind every sentence, every button, every well placed menu. We've studied marketing strategies, sales, story crafting, psychology, user experience, code, colour, branding and more. We love our business as much as you love yours and we're always hungry for learning the latest information.

So what does this mean for you, the client? Some of what we do is not intuitive and you won't necessarily understand why we've placed items in a certain place, or worded things a particular way but it's a roadmap to help you convert.

Keep this in mind when you give your feedback and feel free to ask us anything. We love talking about our work!

Our job is to take the problems you pose in the brief, apply our skills and solve them. You job as the client is to help us ensure that these solutions meet your goals by providing effective feedback and making sure we're on the same page.

1. Remember The Ideal Client

This ain't about you, sunshine. This whole process is about meeting business goals NOT about making you the centre of attention. It's about your business connecting with the right clients for you to do business. This is not your personal art collection or brag file, you need to take a step outside yourself, pop your personal preferences in a little baggie, zip it up and come get them when you're done.
Step into the mind of your ideal client, live and breathe who they are the whole time you're reviewing your material. Because this is ALL about them.

Ask yourself these questions:

2. Remember The Design Brief

When you started work with your creative professional, they will have asked you a tonne of questions. probably an annoying amount, which really made you think about what you do as a business and where you're going.

It's not easy stuff- but it's absolutely essential.

These thoughtful answers have real power and potential to help your business connect. We distill all these answers and conversations into your creative brief, our game plan.

The creative takes all the feelings and plans and ideas in that brief, pulls out words and images to help expand and explain, and builds a design to match. It's the combination of where you want to be and what your ideal client want's to see. It's a process and a skill and an art. Our design choices are all about solving a business problem. #goals

Remember what we are doing and who we are doing it for. Spoiler alert it's not you. Sorry, not sorry, not even your ABOUT page is about you, it's got to be about your audience. The people who see and interact with your website.

3. Remember Why You Hired Your Creative In The First Place

Chances are you hired your creative because you loved their work.

Designers keep on designing because we LOVE it: we have studied human psychology, we understand how people see, read, and why they buy things. We understand why the eye travels across a design in the way that it does, how proportions and symmetry tell a story and why colours matter.

Words are the yin to a design's yang. They craft a story, evoke powerful emotions and connect to the reader. In business, words communicate your brand. How they are structured, their tone, subtle connotations, it's a multi-layered approach designed to take your viewer on a journey- where the pot of gold at the end is your product.

Remember how you felt when you looked through the A Lined Design's website? Do you remember what made you want to choose us out of the gazillions of other firms out there? Something that tipped the scales and made you say YES! This is the crew for me.

Hint: We did that on purpose. To attract you. It involved a thousand decisions and careful planning (because we love working with like-minded clients).

Now, let us do that for the people in your audience.

A creative professional is not an order-taker; they are a problem solver.

Let them work their magic for you.

Which leads into the next point.

4. Do Not DIY

You might have questions about word order, placement and selection or layout but feel free to ask or comment before grabbing your red pen or the delete button. We can explain the strategy and thought that went into our creative decisions- so make sure you have all the info you need before we start cutting and shifting. And please don't stress if these things aren't immediately obvious! This is our world and we want to invite you inside.

We are happy to review and make small changes for good reason but keep in mind that we've selected carefully, based on your brief. If a phrase feels inauthentic or if you had a different vision for a module- these things can be modified. But nitpicking our work is going to reduce the quality of your end result. (It might sound like we're being harsh here but it happens and we hate seeing incredible words and design, dulled).

Remember, a site is not meant to sounds like YOU it's meant to sound like your audience, visually appeal to them, and create a memorable user experience.

When you decide to go to a particular artist for a commission, you need to trust them (and your own instincts for choosing them). You don't select which brushes they are allowed to paint with and you shouldn't ask them to change half of the paint on the canvas.

In the case of design work, the elements will be weighted and aligned just so, colours carefully chosen. If the designer is gracious enough to accept these tweaks and fixes, the client is often left wondering why their design didn't turn out quite right or why it doesn't look quite like they expected.

Same with words. Every word in your copy is carefully crafted with intent. Often websites use a small amount of copy to communicate which is actually more difficult than writing a novel. Every word has meaning and every word matters. Sometimes you might find a typo in the process, in which case we apologise in advance for our human-ness (luckily it's an easy fix.) But trust that our word-weavers have your best interests in their looms.

5. Lose The Committee

No. Don't. Ever. Ever Never.
 
Never ask anyone what they think of a design. It's a case of opinions and unfortunately everyone has one. The real question is, should you care about their opinion? Consider the source. Is this person a designer? And if they are, are they a good one (but not so good you hired us instead of them)?
 
Too many cooks in the kitchen is never a good idea.

Managing stakeholders is a whole 'nother ballgame. There will be opinions which matter and team members who need to be consulted, but all need to be on board for the goals of the project. A project manager for that business client needs to have the authority to make the hard decisions so that the designer or writer has one point of contract and source of truth. 

Let's look at points 1 and 2 again. If this person/facebook group is not your ideal client, we don't really care what their opinion is. In fact if they are not your ideal client and they don't like it, perfect! We don't want to connect with them. It's not where your best business lies.
 
If you are stuck and want to ask people that can be okay IF you ask questions like this:
 
Then give that feedback to the designer with your interpretation and ask the designer to solve the problem.
 

These are productive questions that have real answers and can lead to the best outcome.

6. Ask Clarifying Questions

We get that this design thing is not an everyday life situation for our clients. We do! And we expect a tonne of questions even though we do our best to educate and inform the whole way through our journey together.
 
But no creative professional is a mind reader. Or an interrogator. And whilst I do have crystal balls on my desk (three in fact) their long range reception is a bit spotty.
 
We need to know what's going on in that head of yours in order to serve you better. But make sure your questions serve the creative brief, and not your own preferences. Design critique like, "I don't like red, lose the red" is not what we are looking for here. 
 
Ask your creative professional thoughtful questions:

So there you have it. Six easy steps to getting through the feedback stage to make sure you get the results you hired us for.

More heads are better than one and we do view our work as a collaboration with our lovely clients.  It takes a team to make sure the projects which run smoothly, on time and on budget. Useful feedback during the design process really does ensure that every design decision hits its target. In the end, it's all about informed communication: if you don't like a colour, tell us why? If you aren't sure about a headline, give us some more direction. If there is something unclear about the user experience- put your hand up. If we work together in this way you'll get the absolute best result for your business. Let's do this!

Design pros in the room anything else you'd add? We'd love to hear!

Love it? Share it!

Hover over the image here to share it on your socials.

This is not your typical Wordpress vs Wix vs Shopify vs Squarespace article.

Which ecommerce solution is best?

This question comes up a lot with our clients and colleagues in the web design business. We see it come up daily in business groups, and the answers given.... leave a lot to be desired.

The core of this question is evangelical. Yes. I said it. Selecting an ecomm platform is a lot like choosing a religion and people get fanatical about their answers.

So who do you trust?

Well let's just say I'm one of those people who are spiritual but not religious. I look at everything with a critical lens and chose the best programs for my clients because at the end of the day, I care about humans and their success.

And who am I, you ask? Fair question.

I'm the CEO of my own web design firm that I built from scratch after leaving my career as a lawyer. I notice things. I compare things. It's all in the details. You'll see.

I do have my answer, as you may have gathered from the title of this piece but I'll walk you through all of your options so you can decide if you want to go full zealot or make your own decision.

Disclosure note - links marked * are affiliate links.

Open Source Vs Closed Source

This is the core issue which literally every piece of advice I had read totally misses. Like, doesn't even skim or attempt to answer.
 
Open source software is software with source code that anyone can inspect, modify, and enhance.
 
This means that anyone, for free, can take this software apart, modify it, make it better, break it... whatever you like.
 
Wordpress is open source. I can go and download all of Wordpress, muck about with its insides, have a real good look at what's going on inside. It doesn't cost anything to do this, and if I make an interesting discovery I can use and share it. I can even package it up and sell it if I want to.
 
Closed source software is exact opposite: only the original authors of software can access, copy, and alter that software. In a case with closed source software, you are not purchasing the software, but only pay to use it or pay to even have a look at what it;s made of. You can't download it or change it.
 
This is Wix, Squaresapce and Shopify. We can't go download all of Shopify and have a play. We can't create a development environment anywhere other than Shopify's servers, and we must pay to access the code. So if we make a little thing which is awesome that makes the closed platform better, we need to pay the owner of the code to do so. 
 
Did you glaze over reading all that?
 
Important note: We at A Lined Design only recommend Wordpress as a solution for businesses of any size because it's the only platform (apart from a ground up bespoke build) which guarantees you own your content, lets you control the operation and performance of your website and keeps the costs down over time.

What Does This Mean In Practice?

A few things. For our clients is comes down to cost, risk, customisation, and the power of content.
 
 

Costs

Closed source is pay to play. So the developers have to recoup their costs somehow. With Shopify this is monthly fees for their solution for what in Wordpress would usually be a once-off fee. Thanks for the loan, Kimmy.

For example a mega menu: those big, feature rich flyouts with images and columns and all the pretty.

Our favourite mega menu for plugin is Ubermenu. It costs $25USD once, with updates for a life and a small tech support fee of $7.50 for six months.

Same solution in Shopify?

$99USD a year wuth Globo Mega menu OR $9.95 USD a month with Buddha Mega menu

Say you want a page builder: no need to code every section of your site from the ground up, drag and drop your content into place.

Our fave Divi* costs $89USD a year or smart money with $249USD once.

Same solution in Shopify?

$35-$45 USD a month with LiquidBlox.

Let's say you have your site for five years.

 
Wordpress is $274 if you go lifetime options + your hosting.
Hosting varies a lot, but even with a premium host like our faves at Siteground*, you're looking at $9.99AU each month. For five years this is $599.40.
 
A grand total of $873.40.
 
Shopify is $2895 for the extras + whatever monthly plan you go for. 
 
Bit of a difference yeah? Thats a big chunk of money that could go toward your income stream.
 
Shopify’s platform is a “leasing” system, and not a pay-to-own system. When you walk away from Shopify, you walk away from your website, and you’ll need to have another one built. A customised e-commerce will range from $7,000 to around $20,000 on average. For the $299 monthly price (which offers a similar levels of bells and whistles to woocommerce) of using Shopify for 2 years, you could have your very own custom-built e-commerce platform! A platform that you own, control, and can optimise to fit your business needs.

Risk

Websites break. It's true. No matter what platform you are on. Why? Lots of reasons. Websites are a lot like a house. They have structure, plumbing, and are affected by external factors.
A Wordpress site is like having a vacant lot. As a website owner you have a lot of control over everything, and that can be really daunting.

YOU CAN BUILD ON YOUR OWN LAND.

Wix, Sqaurespace and Shopify are like having a rented space in an office (Wix/Squarespace) or retail (Shopify) center. You get what you're given and you're not allowed to change the stair access for a ramp, the lighting, the advertising, or the grumpy valet at the door. comparing Shopify and Wordpress is like comparing a leased shop floor and a vacant lot. Shopify is a leased shop floor where you can't change what building your in, you pay the electricity etc to the centre manager. Wordpress is the vacant lot - what you put on it matters and it is all your to do anything with. The tools you pick matter a lot. If you want to scale and add more features you can. You will have to pay more for this in Shopify.

YOU ARE LEASING.

You'll hear a lot of people say - but you have to maintain Wordpress! I'm sick of all the error and it breaking. You don't need to maintain Shopify! and nothing goes wrong!

Spoiler alert - it does but you don't know about it because you don't get the error notifications.

And the closed platforms can roll out changes willy nilly, which you just have to live with it. Core updates broke your site? Tough. You can't roll back. Had a barney with mailchimp over user data and they won't play any more? Gotta migrate all your contacts across and find a new solution.

Doesn't happen on Wordpress where you can roll back any core updates which break things or rely on the community to come to your rescue when an integration breaks.

Which brings me to the next point

Customisations

 
When you get a theme for your website, on any platform, that theme guides the fonts, colours, styles and functions of your site.
 
In Wordpress you have the parent theme and you build a child theme where your customisations live. When the theme developer rolls out changes you just click update and your developer's hard work stays intact.
 
On closed platforms, these updates destroy your developer's hard work. There is no ability to build a child theme.

You cant make a child theme to edit your theme in a non destructive way. Shopify says you don't need to update their themes which is crap. Everything on the internet needs updating from time to time to keep up with best practices. If you need to update a theme you've played around in or spent money having a developer play around in and find that it's out of date etc and needs up dating - you can't.

We know already that adding custom apps or functions is expensive, but adding/customising performance for closed platforms is actually impossible. The source files required are locked down which means you're stuck with sucky site speeds. Every new thing you add in is a load on the core system which can't then be optimised for delivery. Imagine a camper van flying along the highway with extra wires and windows and rattling cans banging along - that's your solution on the highway of the internet.

With Wordpress we can use caching systems to bring these add ons inside the campervan and make sure she's built for speed.

Oh yeah, and the source stuff which drives SEO - you can't touch that either. So optimising your permalinks and structure for more google love is not gonna happen. And if your theme gets out of date for google and you want to update it but you can't because you've customised it - we're talking a full rebuild. Which you might not be able to afford because of all those monthly fees.

As far as ecommerce is concerned - the work flow of Shopify vs woocommerce is so similar is silly. It's just a matter of aesthetics.

Content

When you use Shopify’s e-commerce platform, you do not own your website. You may own your images and text, but you do not own the code, the hosting, or the system. Should you decide to leave Shopify, you will not be able to take your website with you, as it is not yours to take.

if you're content marketing - which you damn well should be because most site's most popular page is a blog article not their home page - you need to have good control of your SEO. Shopify is not a blogging platform, it's ecomm. Don't believe us or want to read more technical stuff? Head over here.

Okay, So Wordpress Is The Clear Choice. Would We Ever Recommend A Closed Platform?

Yep. owning a business requires a bias for action. Get out there! Start! If that's Shopify or Wix, do it! But be well schooled in the limitations of the platform and the true costs.
 
Tap Tap, this is important so pay attention. Shopify is a bit like a multilevel marketing company. Developers who recommend it get paid every month you hit your targets. It becomes a passive income stream for them. It's a tasty business model and we so get it. 
 
So would you take a recommendation from someone who gets a kickback or someone who is outside the cult, explaining your options to you? Ah-hem.
 
Get out there, get your website up however you need to. Learn Wordpress and get control of your stuff. That's what we would do.
 
And when you're ready to come level up come have a chat with us at ALD and we'll help you out.

Building websites is a really intense job; for me as the designer/developer and the client. We have SO much to organise. It's a great time to organise all of your information in a really logical and helpful way and examine how your business operates. 

Because there is so much information going on it's easy to get overwhelmed. This is why I am a firm believer in wireframing before we go into design. 

What is a wireframe?

It sounds like a pretty weird term, right? Why would I be building your website from wire anyway?

The term comes from older applications of this method. Making 3D forms by computer used to take up soooo much memory that it was damn near impossible. It was much easier to make shapes like the ones below than render a 3D model with skin.

These days, animators still use wireframes prior to adding skins when running building animations.  

 

Those lines are much easier to handle than all the data needed for the sides. 

 

 

 

What is wireframing?

When it comes to websites, wireframing layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process. All the component parts are there it's just that they aren't pretty yet.

The aim of a wireframe is to provide a visual understanding of a page early in a project to get approval of how stuff works and interacts and guides the target user to their goal. If you want your user to get to your contact page, we can make sure that it's easy to find for them and valuable when they get there.

The wireframe stage looks at button, links, navigation menus, overall layout, and the labels and information of those parts to make sure they make sense. Placeholder content can be used as long as there is an understanding about what's going in there once the content is finalised.

Getting a wireframe going means you have a prototype for the website on which you can apply the design skin.

 

 

 

How are wireframes made?

I build my wireframes directly in the browser so a client can really take it for a test drive. Want an example? I made one here.

Other designers will make theirs as a picture which the client agrees upon and then sends to the developer to code and then put the agreed design into the frames. 

 

 

Why take this step?

It is quicker and cheaper to review and amend the structure of the key pages in a wireframe format because there is less to move around, recode, and rethink. 

Pretty simple really!

What should be reviewed at the wireframe stage?

It's so tempting to get excited once the baby website is born. But the wireframe stage is about basic user journeys, organisation of information (also called information architecture), and site function. This means that the following elements are the source of review:

  1. navigation and menus - do the labels make sense? Do the links go where they need to? Should the links open in a new page or another one?
  2. buttons, links and their actions - same as the above really!
  3. organisation of information: hierarchy, levels, order of pages, order of blog or shop categories and tags - should some pages be nested under others in order to make sense? Could further categories be added to make your content more visible to search engines? 
  4. flow and order of information on the page - Does the information have the right order and flow? Have we missed any important sales points, calls to action, or emotional connection?

 

Wireframes are so important

They may not be pretty, but they are pretty damn important! 

     

    We all know people don't really read much, well maybe you do! But pictures are so damn important to websites and social media but there are things you might be doing which are not doing your site speed any favours. According to HTTP Archive, on an average, around 64% of a website’s weight is comprised of images. 

    If you're not careful with your images, you can also get penalised in search engines for being a bit on the slow side, not to mention that you're annoying your readers.

    What exactly am I talking about? Uploading images holus bolus without worrying if they're the right size for purpose without thinking about compression and image size.

    say what now?

    If you're making a blog post or a new product on your website, doesn't matter if it's wordpress, shopify, squarespace or the myriad of others...

    Do you click upload and you're done?

    Let's have a chat about that. 

    Check Your Image Size

    How about we work through an example.

    I've downloaded a really pretty image of flowers from unsplash. Get that image info by hovering, right clicking, apple+I or properties (Windows) in the file manager of your system before you upload it.

    How big is this one image?  You can see that the size is 2.56MB. Given that the data size of a page should be under 3MB, you're going to obliterate any chances of this if you upload this bad boy. 

    Next thing, dimensions. You need to have your image at 2000px or so wide for any hero type sections, but on a page anywhere is generally okay with 800px wide. This one is 3456 wide, and is portrait oriented so the height is even bigger. 

    yowsers!

    Already uploaded it to wordpress? You can check this info in media library, click on the image and view the Attachment Details. 

     

    Image Compression And Optimisation, Baby!

    If we are able to reduce the size of these images without reducing the image quality, then it will have a direct positive impact on page load speeds and user-experience of visitors on your websites. YASSS.

    Optimizing web images is a process of delivering the high-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size. Your website itself should have some tools to help, but the most powerful of all is getting it in there right in the first place. 

    There are a lot of tools you can use to trim those images to size. There's a method for those with Adobe Creative Cloud, and another for those without.

     

    You can even batch process images in Photoshop so you don't have to do this to all the images individually. Handeh.

    Have all your images open, and go to File > Scripts > Image Processor.

    You'll have a few options in here to play with. I have set my images to be 2000px wide (not the best for portrait, so try and get landscape in one go, and portrait in another) and at 6 quality, and JPEG. Hi res images at 6 quality really can't be differentiated by the naked eye. Promise. You can choose which folder to export into as well. Hit Run, and watch the magic happen.

    Our image from the example was knocked down to 218KB.

     

    If you've created the image in Illustrator, you can export the image using File > Export > Save for Web. You have a series of settings to use, but keep an eye on the file size in the bottom left corner. You can see how changing the image resolution changes the file size. Save where ever you like when done.  

     

    There are a bunch of services you can use, but I like http://picresize.com/ because it has all the options in one place. Our example image was reduced to 543kb easily. It's as simple as following the video below. Lots of annoying ads, but it's free...

     

     

    Wanna See The Results?

    Let's place these images side by side, and see what the difference is. If this post loaded slowly for you, here's the reason! I've forced them all into the same sized container, though their 'natural' size is different.

     

    The Original

    2.56MB, 3156 x 5136px.

    Hero Dimensions

    526KB, 2000 x 3000px

    Smaller Dimensions

    219KB, 1000 x 1500px

    Can You See The Difference?

    If you squint, place your hand on your chin, and say 'hmmmm', chances are you can see a bit of a difference between the depth of the first and the third. But geez, you have to try.

    Considering the big image is over half the weight of this page even though there are three videos on it too, smushing those images makes a big difference to load and little to the eye. Totally worth the effort.

     

    Reckon That's All Too Hard?

    Well, there's actually a plugin you can use to smush what's in your database already AND resize your images to the appropriate pixel width. The paid version on EWWW Image Optimizer is the go. The results are outta this world.

     

    Communication is saaaahhhhh key to getting results, and that’s true for everything in life. When you’re at the stage of “I know I need a website, what now?”, heads start whirring with what-ifs and where-fors because this web stuff is something totally out of the norm for most people.

     

    If you’re looking to order your favourite coffee, you know exactly what to ask for. You’ve had coffee before. You know you like the foam and nuttiness of almond milk over moo milk, and the buzz of robusta over arabica.

    One almond latte, please!

    As an aside, have I mentioned how much I love coffee? Let me draw you a picture.

     

    Ahhhhhh!

     

    When you're going into an area you don't know back to front, which uses isolating jargon and is so technical your head does this every time you try to understand the things you think your head will explode...

    How can you give a great brief which the designer or developer picks up and says, "yes! fantastic!" Tough stuff.

    You want  to achieve a goal (sales, conversions, information to the public are examples) and you want to make sure your chosen person has the tools and skills to deliver.

    If you can answer the following questions clearly, you'll be in the right headspace to start a productive chat with your web developer and have them go the right direction for you.

    tl;dr - break it down and get organised; focus on the content and functions your site needs for the customers you want to attract.

    Get Clear On This First

     1. Do You Have Your Content Ready To Go?

    I cannot stress this enough: your developer is not a business coach, product developer, copywriter, image editor, cat herder, and is also not you.

    While some of us, like me, will be super happy to develop the words you provide to make them fit the web or to provide an analysis of strengths to brief a copywriter... we just don't know you and your business like you do. While there will be a time for delivering draft content and then finalising it, you do need some idea of where you're going to make sure you get the brief right. Revising a brief is costly and downright annoying for everyone involved.

    Get those ducks in a row and then we can get them on a screen for you.

    2. What Function Will Your Site Have?

    Your website is a tool for your business. It can do a bunch of things: sell, validate, show a portfolio, invite contacts, blog, all of those things. And also lead a potential customer totally down the garden path if you don't know what you want your clients to DO once they get there.

    So many tools.

    Make a list of the functions your site needs, why, and how your customers will interact with those functions. You will have a very happy developer once you find them.

     3. Do You Want To Be Able To Manage Your Site After Handover?

    High fives if so, but if that's scarier to you than an huntsman in your gumboots that's totally fine too. But, this may have a bearing on how your site is set up in the backend. Make sure you make a plan about how much time your site will take each week, your willingness to learn, how your backups will work, if training will be included in your development package, and then make a decision.

     4. How Will You Manage Your Project?

    If you have stakeholders in your work, engage them right now and have them understand how the custom website development process will work. Otherwise you could be left with an amazing piece of work the CEO refuses to sign off on or an interface your VA totally hates. Not cool.

    Now you're clear on what you really want, you can dive into figuring out what you need to ask your designer/developer to build for you.

    Zigga Zay Ah.

    I love things to be in a logical order. When it comes to websites, how people think and move from one page to the next is really important. If you jump the gun your reader will feel jarred, brushed off even. You could miss making an important connection. And then there's just plain old messy which is just no good.

    One annoyance I have with out of the box Wordpress is this layout:

    My problem with this layout is if someone has something to say they have the distractions of other posts which they may like... and the comments bit is buried down the bottom. I want to encourage people to write a comment before they go elsewhere. I want to move it up to the first thing they encounter at the end of a post, then sharing stuff, then related articles.

    You'll need to be able to edit the .js file of your theme for this bitsie of code.

    See the Pen Place comments above related posts in wordpress by Sarah Crawford (@ALinedDesign) on CodePen.

    The result? Take a squiz below! If time has elapsed and my comments aren't open any more, here's what it would have looked like:

     

    Neater, more logical, more engaging. Winner!

    If you'd love this layout but are terrified of code, give me a shout and I'll help you out.

    I know how it is. You work really hard to get beautiful images to represent your story, all processed and lovely so you want them out there bringing those digital bums to sit on seats. Then you want those people to pin your images or share them on facebook so they take off and bring in even more people. Well, there are a few tricks.

     

     

    a lined design logo with circular tagline salt pink rgb
    We’re a creative brand and web design agency based in Hobart, Tasmania servicing clients all around Australia and the world. We specialise in helping creative entrepreneurs shine online.
    data privacy certified agency partner
    members
    Awiaartboard 1
    members
    Agda
    proud sponsor
    Kivaartboard 2
    Wpe Badge Hq
    your voice matters
    lgbtq+ rainbow flag quasar progress variant
    Copyright © 2016 – 2022 Sarah Crawford t/as A Lined Design
    magnifiercrosschevron-downcross-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram