Stephanie (Walker) Sedgwick is a freelance web and graphic designer based in Windsor, Nova Scotia, at the edge of the beautiful Annapolis Valley. Specializing in nonprofit and small business websites, and promoting accessibility in design and user experience.
Having a multilingual website means your website is available in more than one language. This is another aspect of Web Accessibility we love talking about here. There are two considerations: do you want your website back end to be in a language other than English? Or do you want to have your website served to your viewer in their preferred language?
Even here in Canada with our two official languages, I’d love to suggest that all Canadian websites should be multilingual and have a French and English version just by default – wouldn’t that be something? But as far as I can see, multilingual websites are typically only offered by government organizations.
And what are the stats showing? It’s easy to be complacent and presume that just because the majority of the internet is English speaking, this “global” language will suffice. But things get a little more complicated when you read stats from Google.
In fact, the majority of online searches are conducted in languages other than English… And, when we say the majority of the Internet is English speaking, it makes up just 25%. Not much of a majority, is it?
Why does it matter if online searches being conducted in other languages? Simply put, if your online shop isn’t in the language your potential customer is using, you won’t appear in search results.
i18n or Internationalization is a big consideration for many companies, large and small. It can be dangerous to assume that your client base is comfortable with transacting online in just English. Whether you’re looking to improve your user experience (UX) by offering your site in multiple languages, or you want to improve your buyer’s experience online, there are things you need to consider – and things to avoid! – with your multilingual website.
5 Things to Avoid When Building a Multi Language Website
#1. Back away from Google Translate
Do NOT rely on Google Translate! It can be helpful to a certain extent, but the worst thing you could do to translate your website would be to copy and paste whole content into Google Translate, and back again. Google Translate can be helpful for ensuring that visitors will get a general idea of what you’re trying to say. But, cultures and keywords are different across the globe, and it’s not always just about translation (see #4 below!). Google Translate is NOT FOR YOU.
#2. Too Many Duplicate Pages in your Menu
The last thing you want to see is a menu bar with three home pages in three different languages. Three versions of every single page will overload your menu bar, and really diminish the user experience for your visitors. This is where having a language switcher comes in, where you have different versions of your site in different languages. This kind of multilingual website can make for a much smoother user experience!
#3. Using Fonts That Aren’t International
It’s easy to forget, but make sure you choose a font that displays special characters. French accents (like this: é) can totally change the meaning and pronunciation of a word, so they’re important to include and get right. You can read more about font choices here.
#4. Including Culturally Insensitive Photos, Words, Phrases
Watch out for outdated stock photos. Make sure images you’re using are inclusive and represent the people you’re writing for. If you’ve translated your site into 50 different languages, but only show images of one country, people, food, your message is not going to get across. The same applies to the language and words you use. And beware of unintentional ethnocentrism (cultural superiority complex) or even just cultural bias within your writing – are you really writing for a diverse international audience? Consider partnering with a local to translate your content. The Neil Patel article link above also recommends this, and really it’s the perfect solution.
#5. Messing Up Date and Time
Wait – is it Jan 10 2021 or Oct 1 2021? This is a small, simple thing that causes endless confusion on all sides of the ocean. Avoid it entirely by just writing out the full date instead: for example, January 10, 2021.
How to Easily Create a Multilingual WordPress Site
If you’re working on a WordPress site, luckily you’ve got some pretty straightforward options. If your site theme isn’t already translation-ready (which means that it already supports multiple languages) then stop right now and just change it. This will involve some revamping of your website, obviously, but this is probably your easiest strategy. I mean, honestly, designers need to be accounting for this already in their design; if they’re not, doesn’t it make you wonder what else they’re skipping? And this is WordPress, which offers the most user-friendly options for improving your website’s accessibility.
If you’re totally committed to your existing theme and for some reason you’re unwilling to change (although may I add, if you’ve been using the same design for over a year it’s probably time to consider updating it just to stay fresh) then there are plugins available for WordPress sites. WPML plugin is the most common, which can translate pages, posts, custom types, taxonomy, menus and even the theme’s texts. It is also great for multilingual website SEO, which is a critical feature. Here’s what WPML itself says it does:
WPML lets you fully optimize your site for SEO in multiple languages.
You have full control over how URLs look.
You can set SEO meta information for translations.
Translations are linked together.
Sitemaps include the correct pages and pass Google Webmasters validation.
With WPML, search engines understand your site’s structure and drive the right traffic to the right languages. Sounds pretty critical, right?
You can also read this WPBeginner article for some suggestions on creating a WordPress multilingual site.
Create a Multilingual Website With Other Site Builders
It’s true, there are other website builders out there, with varying features and levels of success.
Wix used to make you duplicate and translate all of your pages, but now their Wix Editor is integrated with Wix Multilingual (sites on Wix ADI are not integrated at time of this writing.) I have to point out that their own support forums encourage users to use Google Translate. (See my Tip #1 above for why that’s NOT a good idea.)
Weebly offers a few apps. From what I can tell, these are paid add-ons. Weebly’s Tutorials are outdated and reference using third-party services, many of which are no longer available, to translate your website content. I do not know if there is now a built-in feature – no offense to any Weebly lovers out there, but I doubt it.
With Squarespace, you’ll have to manually create each set of pages for each language you want to offer – or create a whole separate website for each language. And you’d probably need to upgrade your subscription in order to handle that number of pages.
Shopify does not offer its own native solution to make your store multilingual, but there are a couple different options – although only one of them really makes any sense. You can have multiple stores (this might sound like a good idea at first, but it’s a nightmare to manage and maintain) OR you can use a multilingual app. The most common right now is an app called Weglot, which will let you add hundreds of languages to your store in minutes. It claims to take care of detecting and automatically translating the whole of your Shopify site (including checkout and email notifications), and it also handles the multilingual SEO of your newly translated store.
Creating a multilingual website isn’t particularly easy, but it should be part of your natural development process. Adding a multi-language option for your website doesn’t have to be highly technical, but you or your web designer should have a good handle on how it will impact the usability of your website, AND your SEO.
At the very least, you can easily research into your target audience and what languages they speak at home. In Canada, Wikipedia offers demographics based on Stats Canada surveys, so it’s not that hard to find – and the results just might surprise you.
Your logo has a massive impact on the perception of your organization. It’s critical to keep it looking crisp, whether it’s on your website, your email signature, or the side of a blimp. But how do you know what size your logo should be?
The answer? It varies.
Online platforms all have different requirements. The standard size of a logo depends on which platform you’re going to use. For example, a YouTube profile photo is 800 pixels x 800 pixels; a logo for a website often has a maximum height of 100 pixels. If all you have is the website logo, it’s going to look really fuzzy on your YouTube profile!
You can create your logo yourself using popular online tools like Canva, or hire a professional. Either way, having easy-to-resize PNG and vector files will help you adapt your logo accordingly. Bear in mind that online “free” tools often offer resizing only after a paid upgrade.
Logo Sizing Basics
Every logo is unique, but the sizes in which you save and share them are not. Great logos can be resized, and quickly produced across hundreds of different contexts.
Whether you want your logo on a business card, or on a giant billboard, it needs to be scalable. This means that if you did end up putting your logo on a billboard, it would still look clean and detailed (not pixelated).
Here are a few logo sizing basics:
Logos are measured in pixels, which means you’ll often see them referred to in dimensions like 500px by 500px. Pixels = dimensions, whereas bytes (KB/MB/GB) = the file size.
Vector files are necessary. A vector file is a file ending with .SVG, .AI, or sometimes .PDF (depending on how the PDF was created). EPS is another vector file type, although it’s older and doesn’t support transparency. Vector files are based around mathematic formulas, which means they can be scaled infinitely. They’re created in programs like Adobe Illustrator, and can then be converted to any other file format that you need, such as PNGs or JPGs.
Horizontal, vertical, and square versions of your logo are good to have. These variations allow you to place your logo wherever you see fit; for example, a billboard, backdrop, website, business card, or T-shirt.
Use a PNG file to display your logo online that’s less than 200KB, ensuring fast load times while remaining detailed and sharp! PNGs are lossless compressed files, which allows them to maintain a lot of quality while having a relatively small file size. They also allow for transparency/transparent backgrounds and are great for social media, websites, and most other online cases.
A brand guidelines document outlines where and how a logo can be displayed, and at what file dimensions. This allows your brand to remain consistent across all communications. This isn’t just for big corporations, but you’ll find that if you’ve noted the type of font used, as well as the names of the colours, you’ll save yourself – or someone else – a ton of homework later on.
Logo sizes for websites
Websites are a critical part of any business. This is where people can learn more about what you do, your company vision, and gauge if they’re interested in finding out more. Even if your website serves only as an “online bookmark” so people can physically find your business, it must look smooth and sharp. A fuzzy or distorted logo is the first turn-off.
The best logo size for a website really depends on how and where it’s going to be displayed.
The most common areas to display a logo on a website are in the top banner/header, and the favicon (the small icon next to your address bar or the title on your browser tab). I will often include a version in the footer as well, to help keep the brand visible if a user scrolls to the bottom of the page.
Using a logo in your website header
Most companies display a logo on the left-hand side or centre of the top nav bar. This allows the brand to be present on all pages of the website. If you’re using a website builder like Squarespace or Weebly, you’ll have an option to add in the logo to this spot.
The logo size for your website header, as well as the positioning, will depend on the website builder and theme you’re using. For example, Squarespace’s Bedford family of themes requires logos with a maximum height of 100px for desktop.
The average height of a website logo is typically between 20px and 30px, while the width often varies depending on how long the brand name is. See how my 100 Women Who Care group uses their logo and icon in the navigation bar of their WordPress website below:
Using a logo in your favicon
Favicons allow your brand to be present in the search bar, allowing customers and leads to tab back and forth between your site and others easily. These images tend to be just the icon that represents your brand, as they are too small to read any text. Standard favicon sizes for browsers are 16px x 16px. Did you notice the one in the image above for the 100 Women Who Care?
Logo sizes for social media
Social media is one of the most prominent applications for displaying your logo. Ideally, you choose your social media streams to connect with your audience and communicate your mission and your passion.
Each social platform will involve multiple images for your brand, such as profile photos, cover photos and banners, and actual image posts. Profile photos tend to be circular or square, banners are more narrow and rectangular, while image posts can be square, horizontal, or even vertical depending on the style you’re going for.
Below are some basics to get you started. Bear in mind these can change from time to time, so you might want to do a quick google search before you commit to anything listed here:
Logo dimensions on Instagram:
Profile photo (circular): 110 x 110px on mobile, 180 x 180px desktop
Logo dimensions on Facebook:
Profile photo (square): 170 х 170px
Logo dimensions on YouTube:
Profile photo (circular): 800 x 800px Thumbnail photo: 1280 x 720px
Logo dimensions on Twitter:
Profile photo (circular): 400 x 400px
Logo dimensions on LinkedIn:
Profile photo (circular): 400 х 400 px
Logo dimensions on Pinterest:
Profile photo (circular): 280 x 280px
PNG or JPG?
When posting on social, use a PNG file! PNG is a lossless compressed format that allows you to retain transparency. Transparency is important because it means you wouldn’t have a white background on your logo, over a coloured header bar. Again, check out my 100 Women image above to see how a logo on a transparent rectangle can show beautifully on a photo background.
JPG files are lossy compressed, meaning the file size may be a bit smaller than a PNG, but the quality also decreases, leaving some logos looking pixelated or “soft.”
Logo sizes for print
Thinking about swag for your staff or for giveaways? When you want to start making some swag, the opportunities are almost overwhelming: T-shirts, brochures, business cards, posters, clothing, packaging, mugs, pens… !
Here are some common logo sizes for print:
The maximum size that can be screen printed on a T-shirt is usually 14’’ x 15’’
On an 11 oz. mug, the standard print size area is 8.5″ x 3″
On an average hat, the logo size is around 3″- 3 1/2″ wide
If you’re planning on printing your logo onto something, first check with your provider about standard print sizes so you can send them the correct files. This is where that vector file is going to be necessary, as most providers will also request a vector-based file so that the logo can be scaled up or down without losing any quality.
SPECIAL NOTE: Vector files have a CMYK color mode — Cyan, Magenta, Yellow, and Black — which is what’s required for printing, versus a HEX color code, which is based on RGB – Red, Green, Black – and used online.
Logo sizes for email signatures
Email signatures can be a great place to display your logo. It’s another place to help further display and promote your brand. But use caution – most email clients don’t automatically download images. And, including an image make your email more likely to end up in the recipient’s junk folder.
If you use your logo in your email signature, make sure it is PNG format and is smaller than 10KB. Keep it small to reduce the load on the receiver’s device. This will also help ensure the logo doesn’t get removed to a separate attachment to your email.
This shouldn’t come as a surprise: Did you know that 54% of email is opened on a mobile device? That means over half of all email recipients are unable to read email signatures that aren’t designed to scale on mobile. Phone or mobile screens are much smaller than computers. Choose type and graphics that remain legible when scaled down significantly. Make sure any buttons you include (like social media icons) are easy to tap – which means leaving some white space in between them.
Other Logo Considerations
Many organizations think they should have one logo and that’s it – no modifications or alterations. But chances are you won’t be able to fit your logo as-is into every application. Just like for my 100 Women website above, you’re not likely to fit your logo into a 16×16 pixel square.
Colour and design variations can actually make your life easier and should be incorporated with any good design proposal. Check out my next article coming soon, which will give some examples!
With the novel global coronavirus pandemic that began to unfold early this year, you don’t need me to tell you that pretty much everything we thought we knew has been turned on its head. Everyone is stressed, overwhelmed, and several are having trouble coping with the “new normal” – for however long that new normal lasts. For many, working from home on top of all the new stressors is the ultimate challenge. This article is not intended for you newbies; although you truly do have my sympathy, there are several articles and resources online already for helping guide you into what will hopefully be a reasonably productive work environment. This article, however, is for those of us who were happily working from home prior to the pandemic.
As an entrepreneur and at least half-introvert, I’ve been quite content working from home for over ten years. I jealously guard my work space, which I have to consider sacred – my home is not big enough to have a dedicated office, so instead I do share it with our “guest room”, which is the extent of my graciousness. From time to time others in my household (ahem, husband) try to use the available floor space to pile up various seasonal junk or projects, and I quite emphatically and ruthlessly chuck them back out again.
My husband and I started our first business while I had a small toddler and was pregnant with a second child. Unbelievably to me now, we used to share an office, a fact which today makes me shudder! I started my own business when my youngest was five years old, and my home’s work space and time became even more critical. Working from a home office with two wee ones is definitely part of my history, and honestly I try not to remember those times too clearly – young families with one or more parents trying to work from home today have all of my sympathy.
I certainly am grateful that during this pandemic my children are now 10 and 13 and therefore quite capable of respecting my office space and work time. I am ecstatic that my children are not in grade twelve and facing the loss of their senior year of high school; I am equally grateful that my family is far-spread and the sudden lack of in-person visits is not the shock that it must be for many families and loved ones.
So, this is a short compilation of tips from an experienced work-from-home mum who is also trying to incorporate some self-directed learning for her kids during the pandemic. These tips should work for most people, although the section directed towards self-educating are obviously targeted for those who have children the same as my own.
Tip 1: Routine
We’ve all seen it – memes with the old cardigan, unwashed hair, and Christmas PJ pants. The longer this goes, the more “day drinking” memes are popping up too – which I sincerely hope is just a joke. It’s okay to let it all hang out for the first week or so and treat it like a stay-cation, but after that you’ve got to pull up your big-girl pants. One of the best parts of a daily routine is that it allows you to control some aspects of your life during a time when you can’t control everything. Keeping to a routine can also help deal with emotions such as helplessness, despair, and frustration. With everything else going on and an overall feeling of lack of control, anxiety and stress will soon begin to spiral upwards.
What was your pre-pandemic routine? Write it out, if it helps, and then figure out which parts of it you can keep going now. Be realistic and flexible – if your family is now underfoot, you can’t keep it all exactly as it was, but you can probably identify the important parts that help you feel grounded and functional. If you woke up everyday at 6am pre-pandemic, then continue that now. If you like to exercise before going to work, then keep doing it – within reason and following the recommended safety protocols. If you like to dress up for work, then do that. If on the other hand you go into permanent vacation mode and allow yourself to sleep in every day, skip workouts, not get dressed, not shower, the “stay-cation” loses its novelty real fast and you start to feel, let’s say, out of place.
One of the easiest tips for people facing anxiety or depression can be simple self-grooming – get up, have a shower and shave (or whatever), and you already feel a bit better about yourself. And if you tend to stress eat, try to be mindful of what you’re eating and how frequently – this situation will last for a while, and feeling crappy about yourself due to poor nutrition choices is not going to help.
Bear in mind that us self-employed mums have probably found their work time drastically reduced during this pandemic. With the additional demands of kids and family, the number of hours I can dedicate each day to so-called productive work-time has definitely shifted. So in keeping with my mantra, try to be flexible with what you define as your schedule. For example, right now I find myself waking earlier than usual each day because I’m sleeping less (due to worry, etc). I used to have a good chunk of productive work time after the kids went to school. That doesn’t quite happen now. Rather than stress about sleeping less, I’ve shifted that work block to my new early morning alone time. I’m drinking more coffee and it’s taken me several days to write this article, where pre-pandemic it would’ve been several hours, but hey, it’s done!
Routines For Kids.
With kids, routines are always beneficial, and now keeping some kind of routine is even more critical. Their lives are turned upside down, they’re bored and can’t see their friends in person, and depending on their age they have no in-depth understanding of what the pandemic means. Their parents are likely stressed, cranky and irritable, and not in the frame of mind for constant play.
After week two of being home from school, my own kids were already in permanent vacation mode. My youngest was sleeping in every day and staying up late at night, both wanted nothing more than prolonged video game time, and both were getting pretty bored and sniping at each other more than usual. When our province announced no return to school until at least May 1, the reality of the stay-home impact started to sink in for my daughter, who misses her friends greatly. I already knew they needed a new routine, so this was a good kick in the butt for me to get it started.
I’m a big googler, so I skimmed lots of online resources for kids’ homeschooling, remote schooling, even regular day planning schedules, looking for ideas and trying to find something that I didn’t have to make from scratch. I found some I liked, and lots that made me roll my eyes. I found one that I thought I really liked at kiwico.com, printed it as is and put it on the fridge. We didn’t last one full day. Maybe if I wasn’t also trying to work from home, this would have been fine, but whoa it’s too much scheduling for my family! I’m a pretty spontaneous person so rigid schedules don’t work for me. Turns out my daughter is a bit like me, although my son thrives on schedules and definitely prefers to know exactly what’s coming up when.
This is the kiwico schedule. This sucker is two whole pages long – for one day! For the record, it’s still really great, plus it’s really pretty and user-friendly. And I do absolutely love their activities list, which is at kiwico.com/kids-at-home. It’s just not a good match for my family (find the full schedule here):
And this is the modified schedule that I ended up creating. This is a two-part schedule, one for daily routine and one for a weekly plan for activities and learning. The activities schedule design I stole from somewhere, probably Pinterest, that I can no longer find to reference (apologies to the original designer). The weekly plan is done on a weekly basis for two reasons: 1) I can’t possibly do this up every single day for a daily plan, and 2) my son in particular really benefits from being able to see what’s coming up. It also allows for easy modification if a new activity comes up for a day and bumps something shown on the list.
I put in learning activities (see list of links at end, if you’re interested) in each daily portion. The To-Do’s are chores, Options are reminders of things like YouTube yoga videos or other guided movements, Notes are for miscellaneous reminders, and Other Stuff is because I always need a catch-all spot for things that don’t seem to fit anywhere else!
And this is our daily schedule, which was made in Google Sheets (download link):
I’m not including these here because I think everyone should use them. There probably are parents out there who can put more time into making and managing their kids’ learning schedules than I can, and there are probably others for whom even these are just too much. I’m including these here in case there are other self-employed caregivers who would find them helpful. If you’re lacking the software to modify these files yourself, feel free to reach out – I’m happy to customize them for you if desired 🙂 And by the way, there’s nothing wrong with handwritten schedules – there are lots of those on (of course) Pinterest too if you really need to balance the function and the “pretty”. But for whatever reason, my kids and I prefer more official-looking computer-generated versions.
Tip 2: Boundaries!
This tip is for both newbie work-from-homers and us more experienced ones too. Boundaries are important for work, time, and personal space. If your spouse and/or family is now in your home all day every day with you, chances are you’re feeling a bit pinched for space.
Work and Time Boundaries.
One of the easiest traps to fall into when working from home is to just keep working whenever you’ve got “free time”. If your business is project-dependent like mine, then sometimes a project deadline or urgent situation will require me to spend more time working. But giving up that free time is a choice that I can make on a case-by-case basis. Try to structure your day to include blocks of work time. If you have a spouse who’s also working from home, ideally you can both take turns at the work block so someone is always keeping the kids busy.
For me, a work block needs to be at least one full hour so I can focus in on a project and actually accomplish something – half an hour is just not enough for me to get my creative juices flowing, or even to start hammering through a to-do list. And as a get-it-done person, I need to be able to feel like I’m accomplishing tasks throughout the day, regardless of whether they’re work tasks, house tasks, or whatever category they fall into. But until there’s a routine or if your kids are too small to respect your time, you might need to accept that a half-hour work block is the best you can manage right now. And that’s okay! Be flexible. If it helps, pretend all the breaks in between work are actually intentional movement breaks, and do something with the kids.
Be sure to keep personal time on the schedule for the day! Even if the day feels like it’s spiralling out of control – or especially when – please try to take the time to do at least one thing that’s just for you. One of the criteria for my 2020 mantra is to not be that mum who drops everything to help everyone else: I’m keeping time for me and my own good feeling. This new focus enables me to set aside time each day for a workout, and sometimes a run too, and not feel too guilty about it. Luckily this habit started in January, so I had a couple of months’ practice leading up to the pandemic, which makes it easier to stick to the habit. My kids quickly became accustomed to me saying “no” if they ask me for anything while I’m in the middle of a workout, although we’re still working on the notion that sometimes I can’t respond at all when I’m sweating like a madman and in the middle of something really difficult!
Having said that, I’ve had many, many days over the years where my only personal time during the day was walking my dog. Lots of dog walks with kids in strollers, or the always-dependable nap drive. One of my best discoveries as a mum of toddlers (other than the nap drive) was to plant them in the stroller with books, a snack, and even let them play a video game while I got out for a walk. Even with the best of intentions, sometimes you’ve just got to make do, and the dog always needs to get outside. Be gentle on yourself if you’re struggling to adjust.
Can you separate your workspace from your living space?
Congratulations if you’ve got a whole separate room you can use – and if it’s got a door you can close, even better! If you’ve been working from home for awhile but don’t have a dedicated space, now’s the time. Your family is going to be on top of you all day, every day. You need some boundary to stop work time and downtime from bleeding together. It can also help create mental boundaries: your work space is where you “go to work”. If you only go there to work and no other activity, it will act as a mental trigger to help allow you to focus. It can also really help to mark the space for your family, so your kids know that when you’re in there, they are not to interrupt – or at least interrupt less.
Room dividers can work well for this. If you don’t already have one, you can make your own (like these on spruce.com), or even just hang up a blanket. Make it a nice blanket or sheet you don’t mind looking at, and you’re all set! If you need to video conference, the blanket divider can serve as the background of your video, so it’s less distracting for the other participants.
Choose a good location (aka don’t work at the kitchen table). If you don’t have a whole room dedicated to your work space, you might need to consider whether your space will be used by anyone else during your work hours. Try to find a spot that’s away from the primary living areas. Think about what you’ll need: do you need privacy? Quiet? Electrical outlets?
I sometimes work at the kitchen table pre-pandemic, but only to change things up or if it’s particularly sunny outside and I want to bask while I work. With your whole family at home… all day… the kitchen is probably a high-activity zone, and therefore distracting and probably noisy. Plus, I’m lazy and setting up and removing the work space multiple times during the day would just tick me off. Never mind the problem of ergonomics, as below.
Tip 3: Pay Attention to Ergonomics.
There’s nothing worse than getting set up and cramping up after a little while because your chair’s the wrong height, or your posture is atrocious. It doesn’t have to be complicated, or an expensive solution. Put your laptop on top of a stack of books, if your ergonomic angles are wrong. And don’t forget, your kids are probably spending a lot of time online or working at a table doing schoolwork if it’s available. Try to provide them with a “work area” so they can use the same boundary principles that you use for your own work space.
Tip 4: Let in light!
Many of us will be using spaces in basements or other areas with little to no natural light. I’m a huge fan of natural light, and although my home office is in my basement I have a window that saves my bacon. I know I would lose my mind if I had to work in a space with no windows at all. If you have limited light and need options, use the tips in this Inc.com article and consider investing in “daylight” bulbs that mimic natural lighting. Also, try to use task lights rather than just artificial overhead lighting.
Tip 5: Take Movement breaks.
We call them “go noodles” in our house, after the gonoodle.com website that my kids introduced me to when their elementary school used them during the school day. When my kids are plugged in to whatever screen activity, they’re required to “go noodle” every hour or so. Sometimes they’re in charge of coming up with an activity, and sometimes I’ll make up something silly for them to do, or I’ll do it with them. Having intentional movement breaks throughout the day is so helpful, and it doesn’t have to be jumping jacks – although any movements that don’t involve setting up anything and can be done right beside your workspace are great – there are loads of online resources that you can use for ideas.
Tip 6: Get Organized.
This is a good one, and deserving of more space than I’ll give it in this article. If you’re already a super-organized soul and have your own tools at ready, then good for you and you can either skip this part or check it out anyway cuz you never know. If you’re scrambling to figure out how to organize your time and projects during this new crazy era, then maybe this will be your ultimate relief. Two words: bullet journals.
I learned about bullet journals for the first time from one of my favourite new podcasts, The Perimenopausal Mamas (a client and good friend). As a result, I have signed up for the free bullet journal course myself; some early morning this week I’m even going to complete it. I confess that the idea of highlighters and multiple marker colours gives me the heebie-jeebies, but I suspect it will help. On a recent podcast episode, guest Nicole North of Whiteboard Consulting offers an article explaining bullet journals and how to get started using them.
I really hope you’ll find something useful in this article. If you’re also a work-from-home parent, feel free to share your own tips and resources here. You never know when some little piece of information will help someone else.
List of References:
These are some of my faves. I don’t benefit in any way if you click on these, but if you like them please let me know so I can pat myself on the back 🙂
Kiwico.com – at-home resources for kids and their grownups. Includes printable STEAM activities, Parent Toolkits, and all kinds of cool stuff (free and otherwise).
Scholastic Learn At Home – not Canadian, but I like how they’ve grouped their activities. My kids are currently following the daily schedule here, until our local Department of Education releases their own content.
Curiosity Stream – subscription website offering “thousands” of documentaries. Not free.
Khan Academy – A nonprofit offering “world-class education for anyone”. Free or by donation. Totally awesome learning website. They have recently added a student schedule that is customized by grade and is freely available, and which you might prefer over mine above.
Go Noodle – I can’t say enough about this website, I freaking love it. Movement and mindfulness videos by child development folks.
Perimenopausal Mamas Podcast – this is a new podcast for mums in their 40s offered by two Canadian naturopathic doctors. Since your own self-care is super critical right now, I highly recommend this podcast to help guide your own health.
The Spruce – neat ideas for stuff you can make, including room dividers.
Bullet Journaling – article by Whiteboard Consulting about how to get started with bullet journals. Free tutorials available.
Update: In 2019 we migrated this website over to Teachable to offer a streamlined online learning platform. But the speed testing tips here still apply to your own WordPress site!
Sometimes as a web designer, you set up a website based on certain specs and needs and then whoa! Within a very short time, you realize the business has already evolved way beyond what your initial vision imagined and your specs are suddenly much, much different. And the website that was all shiny and new and fun just a short time ago is laggy, getting laggier, and (as its designer) downright embarrassing.
That’s what happened with the first version of the Current ECG website. Our initial WordPress website launch was reasonably good, with a few hiccups (see my article here about what I’ll never do again!) but otherwise pretty smooth and straightforward. We monitored and analyzed and made tweaks over the next couple of weeks, but all seemed to be going okay.
BUT… within a matter of weeks, the site was laggy. As in, 8 seconds+ on PageSpeed, GTMetrix and Pingdom load reports. Even knowing these reports vary a bit each time they run, try counting out loud to 8. It’s a reeeeeally long time when you’re waiting for a website to load.* Who’s going to wait for 8.53 seconds for a homepage to load? I certainly won’t.
*Full disclosure: this load time is how long it takes for ALL the elements of the web page to load, not just the immediately visible ones – ie., it doesn’t necessarily mean you’d be looking at a totally blank screen – or the (God forbid) spinny wheel of death or worse, some cutesy little icon – for 8.53 seconds.
Below is Pingdom’s initial result. You can use Pingdom yourself for any website, and if you own or design a website it’s a worthwhile tool for your resource belt: https://tools.pingdom.com/
GoDaddy’s so-called premium WordPress hosting (more on that another time, but for now let’s just say we are not amused) couldn’t seem to handle the loads that they’d initially assured us they could do. And when we questioned it, they wanted us to “upgrade” and assured us again that it would do the trick. Combined with a whole ream of new ideas that had evolved after the original launch, I realized we needed to do something drastic.
WordPress Hosting for Speed
WordPress has a reputation as a bit of a resource hog. If you’re on shared hosting, which is generally what a “budget” package will provide, you’ll probably be okay with their standard hosting package until your website gets too much traffic, too many features, too many products, bigger, or otherwise complicated. Although budget hosting can’t address high volumes of traffic or specific e-commerce needs, if those aren’t an issue for you then often the budget hosting can be just fine. The best trick is usually a combination of awareness of the problem and making sure that you use a super-clean, well-written theme and you don’t get carried away with third-party plugins. And continually manage your website!
Unfortunately, the theme that we started with for Current ECG looked pretty, but it was bloated – another common problem with WordPress themes, free or otherwise. Combined with the necessary plugins to run all the features we needed, all of a sudden it had become a whale of a WordPress site. Even though there wasn’t all that much content (photos, videos, etc) on it yet, the back end was getting crowded. At one point we had almost 30 third-party plugins, and that was just to run the theme and the necessary components for the business! If you didn’t already know, LESS IS MORE with WordPress websites and having more than, say 10 plugins, can be problematic.
Despite all the tricks applied, it was impossible to streamline it and get it to below 5 seconds to load the homepage. This is, obviously, no good for a website today, especially for one whose primary audience is accessing the site on their mobile devices.
So, over the course of a few days, I initiated a complete re-do.
speed it up
Despite the popularity of the original theme, it wasn’t intended to function as a forum, or a blog, and even the podcasting series (never mind the video podcasts) were already starting to slow it down. It also didn’t seem to work well with memberships and subscriptions, and managing a membership base that is growing fast. Because we were still stuck with the shared hosting of GoDaddy, I moved several components to subdomains, copied the website theme elements to each so they’d keep a consistent brand, and began the process of paring down each subdomain so it could function as fast as visitors expect.
Note the difference in the load time, down from 5.4 to 3.42 seconds, and the number of requests from 76 to 42! 3.42 is still not my final target, but it’s a big improvement over 8+ with the original theme. Most of these improvements came about simply from changing the theme, which required a whole whack of third-party plugins just to function and then didn’t work well with all the other necessary plugins for podcasting, memberships, and subscription management (among other things). That simple change enabled me to remove a huge number of now-unnecessary plugins, and from there ran a series of changes to further improve the performance of the website.
There are several free pagespeed tools available, so don’t rely on just one to test your site. See below for a list of the best wordpress speed test tools.
There are other ways this streamlining could be done (moving to a new host is an obvious one), and this project is an ongoing one so we’ll continue to target improved speed and performance. My own personal target is always going to be the 1-second WordPress website, but sometimes you have to balance the functions you need with your hosting limitations (looking at you, GoDaddy).
Designing for website accessibility for users with little to no vision, and using Screen Readers
As a user who doesn’t experience any real vision or textile considerations, I find discussions about accessibility within the internet space fascinating.
A few months ago I attended a webinar presented by a near-blind web developer. She offered a chance to experience what surfing the internet is like for someone who uses a screen reader. It was an absolutely mind blowing experience.
As a web designer who has full control of my sensory faculties, it can be hard to keep other users’ experiences at hand when designing or redesigning a website. The good news is that if you take these things into consideration, you actually end up with a better-designed website that is easier for search engines to find, and often cleaner in code too.
There are a few options for internet users who have screen readers to help them surf the web. Note I’m basing pretty much all of this article on this one webinar presented by one user, so some of these assumptions may be biased.
The screen reader provides a really interesting way to looking at your website’s layout. A screen reader uses an “accessibility tree”. This “tree” comes up when the user’s browser recognizes the reader itself.
Your website title is the first thing read by the Reader. Guess what that means? If your website title is “Stephanie Sedgwick”, that doesn’t tell the visitor anything much at all. However, if the title is “Stephanie Sedgwick, web and graphic designer”, that at least tells them what they can expect if they visit my site. But as a visually impaired person, chances are good a “web designer” website is going to be loaded with images they can’t even see.
Even better, maybe you want to have your title be interesting enough to get their attention – such as, “Steph Sedgwick, providing functional, accessible web and graphic design”. That would at least indicate it might be worth their time to click on my website link and actually visit the site.
If you’re visually impaired, you can’t take in a website in “one glance”. It’s just not possible visually, but it’s also an impossible goal with readers. Best you can do is ensure your page is divided into regions or chunks that the screen reader can make sense of. ie., Header, Footer, Nav, Main. This will at least give an experienced visitor a sense of the chunks of the page as well as the layout.
A “list element” will tell screen reader what’s there (ie. “list of 12 items”, ordered or unordered). This can be really helpful if your main menu has a drop-down function. Your visitor can’t see the little notch indicating that there’s a drop-down menu to be found, so they certainly can’t hover their mouse there. And a screen reader needs to be able to recognize that element in order to describe it to the visitor.
One of the biggest takeaways from this webinar was a really small thing that makes a massive difference to overall usability. many of us started removing the label on contact form fields because we felt it interfered with a “minimal” design approach. But if you’re using a screen reader, there is nothing to indicate if they’re on the right section. What if you wanted to send a message to the company whose website you’re on? You may be successful in tabbing your way over to the form, but what if you accidentally hit tab too many times and don’t realize it? If your screen reader can’t tell you that you’re on the last name field rather than the email field, you’re going to have a really hard time entering any information into the form collection.
Another contact form issue is when the post-submission message is not visible, or appears at the wrong time. Imagine how frustrating it would be to get through the data collection form, only to be unsure whether your message was sent or not. If there’s nothing to indicate to the reader that it was successful, or the success message pops up before you’ve hit “submit”, what kind of an experience is that to offer your visitor? Pretty sure they wouldn’t bother to dig up your phone number to call you and sort it out.
Too many H1 tags
If you can’t visually scan a page to see what it’s trying to tell you, you need to rely on the html markup to have your reader interpret it for you. If you have H1 tags all over the place, it makes for a very confusing experience.Where’s the important info? What are the different sections?
Sidebars and footers
How many web designers like to clutter up the sidebar and footer with nifty-looking widgets? Full disclosure, I’ve done it myself. What about a sidebar widget that shows recent blog posts, category links, share links, newsletter signups, graphics that don’t include any alt text, ads in the sidebar, “Quick Summary” which aren’t quick at all when you’re not sighted.
Some websites offer an option to change their theme from light to dark, offering a high-contrast text version of the site for easier legibility. This is a nice function, although not very helpful for non-visual users. One example of this application is tink.uk.
As part of the webinar, the presenter, Leonie, took us on a screen share to test a specific website: mass.gov. This is the government site for the state of Massachusetts, and handles pretty much every information reference an individual or business would need: tax refunds, food stamp programs, your UI benefits, licenses, permits, you name it – if you need to find out how to do something in Massachusetts, that’s the site you need to go to. We listened and watched as she tried to navigate her way to find the Unemployment Insurance application on that website.
Leonie, a self-described “very experienced” web surfer, followed her reader’s interpretation of the website. The main menu didn’t follow the standard for software “menu”. While she was attempting to figure out where to try finding the information she wanted, a pop-up appeared on her screen. Us sighted users watching her screenshot knew it was a sign-up request, but there were no cues to tell the screen reader how to interpret it. So Leonie was left trying various things to try to figure out what as going on. She tried hitting the Esc button, which brought her to a search form, and without any way to interpreting the visual cues that were being given, she had no idea how to proceed. She ended up giving up and exiting from the website – long after most of us would have given up in frustration.
Edge doesn’t support html a11y. But don’t discard it – and Internet Explorer – too quickly; the reality is that there are a lot of screen reader users that are still on older versions of reader technology that rely on IE. Other browsers, however, are pretty good, and many offer extensions that you can try. You can also test a variety of screen readers to really help you understand your web user experience. There are readers available on a few platforms including Windows (open source readers such as NVDA and Firefox), Mac (voiceover only), Android (Talkback), and Apple devices (Rotor).
Best tips for designing accessible websites
Guess what? For sighted developers, testing doesn’t have to be complicated. Try this handy tip: cover your screen. Or just turn it off. You don’t actually need to use screen readers to get a sense of what your site “looks” like! That will help you to “see” what kind of experience your website actually offers for non-visual users.
When in doubt, KISS.
Keep It Simple, Stupid.
Really, we don’t need to say anything else here. But if you’re still reading this, then consider these basics:
Field Labels – If you’re thinking about removing field labels because you think it clutters up your design, think twice – what other functions might those labels serve? Is there another way you can clean up your forms and still keep the labels there?
Media Players – Play/pause buttons can be really tricky for non-visual users to understand. This makes perfect sense to me, because even as a sighted user an automatically playing video can cause instant anxiety while I madly click around trying to find the way to shut it off. If the volume is on, it’s even more anxiety-inducing. It’s awfully similar to my reaction to alarm clocks, actually. Autoplay = OFF!
Handy Tools – There are also some browser screen readers that can be of some help to us sighted developers and designers. At the time of this writing, Chrome offers an extension called ChromeVox. For desktop users, this screen reader is also found in Chromebooks. Although it’s not commonly used by people with vision impairment, it can be a useful pairing for testing purposes. For more info about readers, try www.hollier.info/browserpairing/
Interested in more? Try some of my other articles here, and be sure to check out Smashing Magazine in the link below.
One of my more challenging recent projects involved setting up a website that included a members-only area. Now, normally building a subscription WordPress website is not such a complicated thing of itself. But there’s nothing like compounding the pressure by using a live count-down timer for the new site’s launch.
Part of the beauty of WordPress is the proliferation of third-party plugins. They can help allow your website do almost anything you want. Often – okay, most of the time – those plugins are open source and/or free. With a little elbow grease, you can have far more functionality than what you get with paid-upgrade websites offered by other platforms (ahem, GoDaddy. Squarespace. Shopify.)
Sometimes, though, I can get a little carried away with plugins. It’s okay, I admit it. I’m usually pretty good at reining myself back in, so it all works out. I generally like the idea of countdown timers on a coming soon page – or at least, I did until recently. But it turns out that might be one plugin I’ll ignore next time… When you have a growing audience anxiously awaiting the launch of the new website in anticipation of some pretty cool giveaways, you’d better be darn sure you know exactly what’s going to happen in that first Zero Plus One Minute.
The trick that I found with this particular launch was managing the payment gateways. You can run as many test and sandbox scenarios as you want while the website is still in “coming soon” mode. But once that site goes live, you have to simultaneously take the payment gateways out of “coming soon” mode too. Sound easy? Maybe. But you always need to account for weird little glitches.
All the followers who signed up for a notification of your site launch, and all the followers who knew exactly what time your site was set to go live, were ready to jump in and check it out. That’s a lot of people relying on your website working the way you think it will, and you DO NOT HAVE TIME to mess around.
Even with extensive testing and prep leading up to this launch, I had absolutely set myself up for some launch quirks. Add the pressure of the countdown timer and the fact that hundreds, even thousands of followers had been posting and tweeting about the upcoming launch, I’m lucky I didn’t fall flat on my face.
Happily, the payment gateway issues were resolved within the first 10 minutes or so. (Happily = it wasn’t longer than 10 minutes, but ten minutes online is a very long time!) Over the next couple of days we tweaked some minor details to improve and streamline. Those first 10 minutes were pretty intense and I think I’ll return to recommending a “soft” launch to my clients from here on.
The end result
*This website has since migrated to a Teachable platform.
My client has a subscription WordPress website that (in my opinion) is capable of doing even more than we’d initially hoped for. His marketing campaign is developing and evolving. His new website can handle all of his business as well as a huge potential for growth in his first year. And I have obviously learned to handle the countdown timer with great caution!
Please check it out at https://currentecg.com, and if you’re a paramedic or other emergency medicine practitioner/student, try out his podcasts! To see more details about the website design for Current ECG, click on my portfolio page here.