Structure Matters
Great, you’ve done your homework and picked out the perfect template, so it’s time to build your dream website, right?
Not quite yet, but we’re getting closer!
If you want to make a great website that everyone can enjoy, you’ll need to learn a bit about web design best practices. (Yes, even if you follow your chosen template very closely.) Setting up your website correctly will help you rank higher on search engines, but more importantly it makes your website more accessible.
Website Structure Basics
There are so many great resources for learning the ins-and-outs of web design, and I’d suggest you check out one of these, or one of the many other resources out there, for a more in-depth understanding. In this post, I’ll be focusing on just what you need to know to work on a Squarespace Template and really paring things down, but it’s a fascinating topic to learn more about!
Every web page made up of code. HTML is the language that creates the structure for websites, and that’s all we need to know for now. Squarespace takes care of turning what you add to your website into the code, so don’t worry too much about it. (But it’s super fun to learn, at least for nerds like me, so consider giving it a try anyway!)
Hierarchy
A good web page has a very clear hierarchy of information, straight down to its HTML structure. When anyone comes to your website, they want to be able to tell immediately what the page is about and what kind of information they can find there. (This information can be informative text, like this blog post, or your photography gallery, or the products in your swimsuit shop.)
When we talk about hierarchy in the visual sense, we suggest making the most important information the most prominent thing on the page, and working your way down from there. You can do that by keeping important information at the top of the page, and by making titles and headings larger than your body text, and possibly through experimenting with different typefaces, colors and other ways to make them stand out.
It is important to carry that hierarchy through to the structure itself. Many people use screen readers to access websites due to visual impairment and for many other reasons, so they won’t see the size of the text or the styling you created, or they need an accessible website due to a motor or cognitive impairment. Through giving your website great structure you can do your best to help everyone enjoy your website.
Squarespace takes care of a lot of the structure and accessibility of your website, and if you follow these suggestions on the part that you create, you’ll be helping to create an internet that is for everyone!
Headings
One of the biggest things you can do to help is to use the correct headings.
On your Text Toolbar, you’ll see this dropdown.
This is how you set normal paragraph type, or change your text to a heading. They each also correspond to a “tag” in HTML that sets a heading, and that are a big part of building hierarchy on your web page, within the code.
Every page you create should have a Heading 1 (aka the <h1> tag if you looked in to HTML.)
This is how your site visitors know what the page is about.
You can then use your Heading 2 and Heading 3 to break down the sections further.
It’s tempting, but don’t just use your Headings interchangeably to change the size of the text. Each level of heading should correspond to the correct level of importance.
This will help anyone viewing your page understand what it is. A fantastic side effect is that this also helps to optimize your website for SEO. (More about that from Neil Patel here.)
Alternative text
Adding alternative text to your images is extremely important. The alternative text lets people who can’t see your images (for a number of reasons) understand what you are trying to show them.
Your alternative text should just be a sentence or two, with a description of the photo and what’s important about it. I like to write mine by just imagining how I’d describe the photo if I was telling someone about it.
Here’s a pretty good guide: https://moz.com/learn/seo/alt-text
Here’s how to add alternative text to images throughout Squarespace:
https://support.squarespace.com/hc/en-us/articles/206542357-Adding-alt-text-to-images
Alternative text also improves your SEO, since search engines primarily read the text on your website, and now they will be able to include your image text in their rankings.
Search engines (and most importantly, people!) also give priority to well-structured, accessible and well-designed websites. (It can’t hurt to watch your grammar and spelling, as well!)