Responsive design is like any other good design example. You can go about your day and never pay attention to it, but it’s glaringly obvious when it’s missing.
We all know plenty of websites that won’t show properly on our mobile devices, so much so that we get frustrated and simply tap on the back button.
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones) (Source)
So that’s why it’s a good thing that most platforms and websites understand that the forecasted number of global mobile users in 2021 will pass the seven billion mark. In fact, there’s a huge probability that your learners access your courses through a responsive learning platform and they don’t have to download an app for that.
Some or maybe most of your learners don’t use a big screen device to take your courses and this trend will only become significantly more noticeable in the future.
Moreover, your main website is also a big part of your marketing strategy because that’s where people learn more about you and your products. In many ways, it’s your online business card, and each first impression you make counts.
So, when building your website, you need to consider that it has to look good on tiny screens and large ones. Otherwise, if you don’t have a programming background, knowledge or simply don’t have the time for this, you may want to delegate this job to a professional.
Read more: Why you should consider outsourcing parts of your course creation
7 Ways to tell if your website looks great on all devices
In any case, knowing a few basic things about responsive design can help you figure out whether your website is optimized for all kinds of devices, so no learner feels left out. This information also helps you simply know what to ask a web designer who is helping you out with this.
Here are three things that any course entrepreneur should know about responsive design:
-
Optimize for speed
In a nutshell, slow loading times equals a high bounce rate. In fact, 47% of users expect an average website to load within two seconds. Users don’t want to wait for a page to load and they’re much more likely to simply quit than wait more than five seconds, so you need a fast loading time.
To do that, you have to plan for it, meaning that you should start from the beginning and discuss this with a designer. The main culprits for slow loading times are web hosting, widgets/plugins, website ads, and many images, among other things.
Read more: 7 Tips on how to set up your own e-learning website with WordPress
Therefore, a minimalist design with fewer images (or optimized images, see number 7.) that packs a punch is way better than an image-heavy and bloated website. If a web designer recommends different ways to speed up your load times, I suggest you take this advice or keep this in mind when choosing a theme for your website.
You can also run tests to see where you’re at if you have a website right now.
-
Mobile-first principle
Mobile-first means designing for the smallest screen and then working your way up so that everything looks great in the end.
Sure, this idea is replaced by “mobile agnostic”. It has to look great on all screens, from the smartwatch to the 24” iMac, so mobile isn’t the priority. However, it’s still a good mindset to adopt from a design point of view when creating a website.
To get ready for all screens, make sure that users can easily navigate and find what’s truly important for them. For example, prioritize your tagline, your CTA, your landing pages.
Plus, figure out what users can or cannot do on their different devices and plan for that. Maybe they’ll first want to sign up for courses using a laptop, but they plan to take courses on a smaller device.
-
It needs to work!
To make it work on all screens, prioritize function over form. Users shouldn’t spend too much time figuring out how to go from your homepage to your “About page,” for example.
Plus, take into consideration that while you may like how certain things look on a large screen, mobile users should be able to get around quickly by simply tapping on items. Menus can be pretty awkward to navigate on a smaller device.
So, it’s a good idea to plan for responsive dropdown menus, an example of mobile-first thinking. Also, you can remove unnecessary features and save people a lot of time, in which case you can also hide content on smaller screens.
-
Responsive images
Responsive images are just images that adjust to different devices. In this way, your website’s general look and feel will stay the same, and people won’t have to resize their screens or squint to see the images.
There are different ways to achieve this, such as the art direction and resolution switching methods, but prioritize loading speed (see number 1.) and choose the method that looks best.
For example, on your average desktop, you may see a 1200px image and it looks great. However, waiting for your phone to shrink to a smaller resolution could hurt your loading speed. However, your website could also show a different version of the original 1200px image, which would be around 400px.
-
Pop-ups for mobile
Pop-ups on a small screen can be annoying. However, if you want to implement them because they work (e.g. that’s how you get people to subscribe to your newsletter) make sure that they’re mobile-friendly from the start so they don’t ruin the whole experience.
Read more: Making the most of newsletters when promoting your online courses
For example, DreamHost recommends creating smaller pop-ups that don’t take the entire real estate of a small screen.
Users should also be able to close them easily and not have to scroll up and down in search of the “X” button (seriously, tiny close buttons are the wooorst!). Having a “No, thank you” button is a much more user-friendly way to deal with pop-ups, but it’s up to you to decide.
-
A Visible CTA
Sure, you want people to buy your online courses or book a consultation if that’s your main gig. So, people who access your website on their phones or tablets have to see your call-to-action (CTA) button.
Forgetting about this step and leaving out smaller screens can actually cost you money...
There are many ways to do this. For example, this button can be part of a series of slides, a separate button in the main menu, or both!
Read more: Revisiting your CTAs as a knowledge entrepreneur
-
Optimized forms
Forms are a pretty big deal for marketing, right? So much so, that if people want to become email subscribers, but the mobile form is too hard to navigate, they’re most likely to give up (and won’t switch to a desktop just to do this).
Ensuring your CTA is visible and optimizing your landing pages are two things you should never compromise on!
Clunky forms can ruin the experience. Instead, responsive forms are intelligible and easy to fill, so the simplest and cleanest looking forms are best. The same goes for e-commerce checkout experiences!
Conclusion
Optimizing websites for all devices is something that even larger companies don’t get right 100% of the time.
Knowing what to look for and what to ask a professional web designer is the key to a good collaboration. Plus, it can significantly improve your bottom line since people are more likely to visit your website and buy from all kinds of devices, not just large-screen ones.
