As someone who moved a lot and likes to travel, I find myself searching for gyms in new places quite often. My first contact with a gym is typically through their website, and thus I’ve already seen a lot of variety in gym website design. Granted, it’s mostly BJJ schools websites, as that is the sport I train (with a few MMA gyms thrown in the mix).
Your school website being the first point of contact with many potential visitors is something we already covered before, when we polled 250+ people on how they found their current gym. And yet, too many gym websites do not do a good job representing their owners.
The vast majority of gym and martial arts websites suck: What we can learn from bad fitness websites
As I was looking for inspiration for our designer when we were working on our gym website feature, I got to see many types of gym websites from different sports.
As someone who’s been in the web development industry for many years now, and has a passion for good design and user experience (even though I’m not an actual designer), it pained me to see so many websites doing their owners a disservice.
As a potential visitor / customer, when I search for a gym I’m looking to find the following information:
- What kind of training do they offer
- Who are the instructors / coaches
- When are the classes (schedule)
- Where is the gym (location)
- How can I get in touch? (Email preferred)
This is the bare minimum of information a gym website should provide. Almost all the websites I examined did present most of this information, though some skimped on some areas (such as details on the instructors, which is very important for experienced students especially).
Beyond just providing the information, how you provide it can make a big difference. Layout, aesthetics, spacing, typography, colors – all the elements that make up the design of a website contribute to visitors’ perception of it, and by extension, of your gym.
In addition, there are technical consideration:
- Does the site work well on tablets and mobile devices? (responsive design)
- Does it work on modern browsers? (you’d be surprised)
- Is the site’s structure conductive to indexing and ranking by search engines? (SEO)
I’m going to highlight a few patterns I noticed and using specific examples explain what are the problems I saw there.
The Site Builder Website
Site builders are tools aimed at non-technical people, allowing them to create websites without professional help. While the idea is a good one, the execution is often lacking, since without understanding the considerations that go into building and designing something as technical as a website, you’re bound to make mistakes even with the best tools, which most site builders are definitely not.
Finding sites built with site builders often takes me back to the Geocities days of the Internet. For the younger audience, and those of you who weren’t online back then, Geocities was a free hosting site with simple site building tools, which created some of the worst designed sites ever seen. You can see a small collection here.
A couple of examples:
This is a common look I saw for sites built with a site builder. Some of the design issues are immediately apparent –
- Low quality images, which look especially bad on retina and other high-PPI displays
- No typographical treatment – inconsistent font sizes and arrangement of text
- Random colors, not belonging into any kind of cohesive palette
- No overall design concept. At the bottom of the site it has a link indicating it was created using GoDaddy’s site builder, and it shows in that no design concept was prepared before hand.
On the technical side of things –
- No mobile support! The site has a fixed width and does not adjust to smaller screen sizes. This is how it looks on mobile:
- Usage of obsolete markup (the site code), such as the “font” element which was deprecated in 1998(!).
- Incredibly nested markup, sometimes going 6 levels deep just to style one piece of text.
What this means is that there is a lot of unneeded structure (HTML), which makes the site harder to maintain and more demanding for search engines to crawl and index, slowing down the rate at which they do so.
- Both of those problems are indicative outdated site builders, such as the one GoDaddy provided for the sites pictured above
- The low quality image on top is in PNG format, which is typically a bad match for photos (you would typically want to use JPG or other lossy format for photos, and PNG for images with fewer color variations), and thus despite being low quality, weighs in at 175kb. You might say – that’s not a lot in today’s standards, however, when your typical site has a dozens of images and scripts loading, those things add up quickly to a few Mbs, which make the site feel sluggish on slower connections).
Aside from all of those issues, the first site also has no information about the instructors at the gym. Even the “Contact us” page doesn’t mention any names of people who might be answering your call.
Overall, this site does not inspire confidence or convey professionalism, or in any feels inviting for prospective students, which is a shame as I’m sure the owners of the gym take their training seriously. Personally, I would never recommend anyone to use an online site builder for a business website (or any website for that matter).
The Corporate Website
The “corporate” design is one step above the “site builder” look, where it’s apparent some design work has been done, however it doesn’t really fit the industry / audience of the site. The overall theme is typically very monotone and sterile, in an effort to create a professional look, which often comes at the expense of personality or friendliness which are qualities a gym website should convey.
This 24-hour fitness gym website is a good example:
While a step above over the sites shown earlier, it looks more like a real-estate website than a gym website, and in no way does it make you want to go out of your way to visit.
This kind of website is not terrible, as it does serve a purpose by providing information in a clear manner, however it falls short of convincing a visitor who has other options in the area that this should be the gym to visit.
The Used Car Salesman Website
A new type of website design emerged about a decade ago, dedicated to selling products and services. Often called the “long-form sales page”, those pages include all the information on the same page, along with a very aggressive sales pitch about the product / service they are offering. You have probably seen such sites, selling products such as “innovative” abs machines, and various gizmos that people buy and never use. The same format that was so pervasive on sales channels on TV once has made its way online.
Every once in a while, I run into a website that tries the same route for promoting a gym. Instead of a clean and friendly site providing the information you need, you get a very long sales pitch that rings hollow if you know anything about the sport it’s selling you on.
I’m not saying such sites can’t be effective, in a way. They are a huge turnoff, however, to the more discerning visitors. Personally, I would not feel comfortable having such a site represent my business, which in the case of martial arts, is based to a large part about respect and discipline.
Sites that get the job done: Examples of the best gym & martial arts website design
After covering types of sites I consider to be less effective at engaging potential visitors, let’s take a look at some I feel do a good job, and examine why.
Heroes Martial Arts
Heroes Martial Arts is a gym I trained at for 3.5 years. When I initially moved to the Bay area, their website immediately caught my eye, as the first thing you see is a high-quality photo of their awesome looking facilities, with plenty of natural light. I wanted to visit and see what it’s like training at such facilities.
This is exactly the reaction you want visitors to have to your website, and why having high-quality photos front-and-center is so important.
Aside from that, you get a sense for the personality of the gym from the comic-book style header. The training environment is very casual and relaxed, and you get that same feeling from the header design. (Though in general, I’d advise to use real text and not put it in images, as it’s not great for usability and SEO).
In addition, it has all the important information you expect to find, well written and organized – instructors’ information, schedule, location, class descriptions and special pages for unique programs they run (Youth and women-only classes).
On technical merits, the Heroes website also does pretty well, though it’s not perfect. The large images – both the background and the homepage image – are well optimized, weighing a combined 260kb despite their size and quality. On the other hand, the amount of scripts loaded on the page is very large for mostly static content, with over 20 requests and 0.5Mb of scripts being loaded.
The site takes around 6-7 seconds to load, which is rather long for a content site. At those load times, page abandonment is significantly increased. This is not surprising as the site runs on WordPress, which takes some work to run at a decent speed (this blog, for example, runs on WordPress and performs well, but has been heavily optimized).
The site is responsive and supports mobile devices well enough, though it offers a slightly degraded experience by hiding the articles at the bottom of the homepage for mobile visitors.
University of Jiu-Jitsu
The University of Jiu-Jitsu website is an interesting case since they just updated their website design recently. The previous design wasn’t bad, but the new design is a marked improvement. They went from a mostly dark theme, which wasn’t as inviting, to a much brighter and warmer color palette which is a good fit for this kind of site.
The recurring theme of having a high-quality background photo is presented here as well, and does a great job of conveying what it’s like to train there. Right below it there is a video with an actual training session (though a not very indicative one, more of a special occasion – but a good idea nevertheless).
The information is also presented much better in this version of the site. As a part of a larger network of services offered by the owners of the school – such as online training and San Diego accommodations for visitors, the new design does a great job of presenting those other options without taking anything from the main focus of the site.
On the technical side of things, there’s room for improvement. The main background image at the top of the page weighs in at a hefty 825kb, despite being a similar quality and size to the one used on the Heroes website (which weighs around 160kb). This is mostly to it being the wrong format for this kind of image (PNG), as discussed earlier in the article.
The site overall weighs at 2.5Mb, which is a lot for a content site (50% more than the Heroes website), but loads reasonably fast on a good connection (around 4 seconds). Mobile visitors will experience a degraded experience as far as loading times however, due to the amount and size of assets that need to be downloaded.
Same as the Heroes website, the University website is responsive and adjusts to mobile devices pretty well, with a few small exceptions. Especially the Tint social plugin further down the page does not look good on mobile devices, and also has its own vertical scroll, which makes it hard to continue scrolling down the page once you reach it on mobile devices.
Studio 540 has one of the best looking martial arts gym websites I’ve seen yet. Very modern design (using the recently very popular flat design style), very high-quality photos in the background which were obviously taken by a professional photographer, great typography and spacing and overall very tight design concept for the entire site.
This is a one-page website, but unlike the previously mentioned “long-form sales page”, it doesn’t do a hard sell of their services, instead providing the relevant information in a clear and concise manner, and letting the high-quality photos do the talking for them. You get a very strong sense of their high-end, modern facilities and diverse staff from visiting this website, which is exactly the effect they were going for. When used like this, the single-page site can work really well.
On the technical side, this site is an interesting case. Due to the single-page format, and usage of multiple large, high-quality images on the same page, the site is quite heavy, weighing at 9.1Mb of downloaded assets for a page load (more than 3 times as much as the University website, and almost 5 times the Heroes website). However, it loads faster than the other sites at around 2.7 seconds, thanks to well done optimizations and a fast server (you can solve a lot of speed issues by just putting more power behind it).
However, on a slower mobile connection, that 9.1Mb will take its toll, resulting in a slower browsing experience. It’s an interesting compromise between visual fidelity and site performance.
Martial Arts on Rails Gym Website Template
As mentioned at the beginning, the inspiration for this article was the research we did when designing the template for the gym website feature we offer to users of our gym management platform. We tried to combine all the elements we felt worked best to make the gym attractive to prospective visitors, while providing all the relevant information in a clear and accessible manner. (You can see an example website here).
Hence, you will definitely find some similarities to the websites I mentioned above as they inspired our design to some degree. The basic layout is a single page site, showing all the important information in a concise manner on the homepage (introduction, instructors, schedule, location, contact information). Each section then links to a separate page with additional information.
The homepage is highlighted by a high-quality photo (we used a competition photo, as we don’t have a real gym to highlight in the background), and overall uses a bright palette with a lot of spacing.
Doing a similar technical analysis as with the previous sites, the example site linked to above weighs just a little over 400Kb and loads in 1.2 seconds on a good connection. We are able to achieve such speeds by adhering to best practices with regards to on-page optimizations, as well as running on a speedy server provided by Linode.
Like the rest of the sites mentioned above, our template is also responsive, adjusting to various screen sizes and mobile devices –
First impressions are important. Make it count
Your gym website is the first point of contact with many of your prospective visitors and members, and it is only likely to increase in importance in the future. Make sure you don’t neglect it as it can make a big difference on your bottom line!
Know of any noteworthy gym websites (Good or bad) you would like to share? let us know in the comments below!