Way back in the summer of 2015, I set out a challenge to myself to take a site that I thought was interesting, "cool", and appealing, and try and recreate it myself using the coding abilities I had. I am now migrating it over to this current site from my old one.
This project is a breakdown of a page off of the Fitbit website called Why Fitbit?
Note, since I did my breakdown, the site has changed, so please use the images below as reference.
I took this website on the left below, Why Fitbit, and I recreated it using some of the more recent and prominent technologies of today's development world. What did I use? Well I'll get into that later. But first, let's take a look at the two screenshots below. Two sites, looking almost identical in design (I'll get into the "almost" later on too) with one built in who knows how long and how many tweaks and the other built in less than 24 hours.
Have a bunch of questions? Real curious about what and why? Keep scrolling.
Just want to skip to the video and read the conclusion? Go ahead and scroll to the bottom.
Want to view the two sites side by side? Click on the images below to check them out.
A quick rundown of what happened: For 24 hours on July 23rd, 2015 I sat down in my room and completely recreated Fitbit's Why Fitbit on my own. I downloaded all the assets from their site using a handy chrome extension, and I challenged myself to never look at Fitbit's code using Chrome Devtools or anything similar. What resulted is a site that is faster and quicker than the current site while still keeping it browser friendly and with a responsive design.
What's the proof? I took a timelapse of myself and the screen throughout this whole process. At the very bottom is a youtube video of myself and the progress you see throughout the day/night. So let us move onto the diagnosing, improvements, quirks, and problems that were all a part of this process.
Diagnosis - Pre (mini) Hackathon
What are the tools Fitbit currently uses?
After deciding I was going to embark on this mini-hackathon, I went through the process of "What do I need to know so that I write code in Fitbit's standards?" Again using a handy dandy chrome extension, I came across these main tools:
- Various other tools
Now I absolutely recognize that this is not an exhaustive list of what Fitbit uses. The resources I had available at the time only showed me these tools, and I concluded that this was actually enough to get started.
Like I said before, I had already downloaded the assets using another Chrome extension so now I had to figure out the details behind some of these tools.
jQuery: A full featured JS library
Handlebars: Used this before for handling data, awesome tool and easy to create templates for reuse.
Various other tools: Some of these were analytics, tracking, and stuff that wasn't really required for this mini-hackation
YUI: To tell you the honest truth, I did not know what this was. YUI? How do you even pronounce it? After a quick Google search I realized that YUI is very similar to Bootstrap or Foundation - it gives you the toolsand the framework to build great applications. Great! I haven't used it before so why not learn something new right? Wrong. After 8 years of development, the Yahoo team behind YUI decided to no longer maintain the YUI framework. Julien Lecomte, Director of Engineering at Yahoo stated that "the number of YUI issues and pull requests we’ve received in the past couple of years has slowly reduced to a trickle." which led to the decision to stop all new development. Well that's unfortunate. Looking at all the capabilities and features of YUI, it seemed like a great tool and framework for all developers.
But alas, here I was stuck in a pickle. I could either a) use what Fitbit used to create their site or b) use the current technologies and tools of today.
So I decided on b). It is more useful for you, Fitbit, to have someone that understands the technologies of today than someone who learned an older, more outdated tool.
After making that decision, I decided to look around the rest of the Fitbit site and soon discovered that there is no clear consistency in what is used. Some places Bootstrap is used, others Foundation is the framework of choice. I thought that was a bit strange...but since I have used both and know the tricks of the trade, I picked Bootstrap. Bootstrap is now used on over 50% of sites created today and helps developers every day with those annoying "why can't I get this centered" problems.
What tools should I use?
Decisions, Decisions, Decisions
Why I chose what I chose? Or, what makes my site different
First thing you'll notice is that the font/type-face is different. I was not looking to spend $$$ on getting the same one, so I decided to use a suitable alternate brought to you by Google Webfonts. Let's take a look at some of the differences between my site and Fitbit's. I'm going to break down each section (because they are really sections) into what Fitbit has and what I did with it
Oh what an interesting idea. A full screen video homepage is bold and can be great if done right. However, Fitbit's homepage has some quirks about it. I actually never figured out what the correct formula or settings that need to be met for this to work, but there is a video on the homepage background. However, 9 times out of 10 it would not load for me. I only discovered it was a video after testing and trying things out. So the static image until the video loads is a biggy - not everyone's browsers can handle all of that, which is fine and something that front end developers need to be aware of. Next up is the 'Read the Manifesto' button. This is also interesting as this button only shows up if the video has not loaded. So 9 times out of 10, it is there. On the 10th try however, it is it's own slide right below. So what I decided was to just make this slide its own and have the first slide's background span two slides. That is the reason why my homepage looks a little different than theirs.
I was successfully able to implement the video background and it works on multiple browsers. However, because of the size an uses of phone screens, I decided to take it away and just have the static image on mobile phones. I decided this was a fair trade off and probably one that most users would prefer.
A basic slide with a cool feature - the Fitbit logo slides down between all of these. Creating a fixed element that slides until you reach a different point was a problematic challenge that (may) have a few quirks in it but fun none the less.
This carousel inspired page was also a doozy. I'm going to go back a few steps and remind all that when designing and developing for the web, it is not just laptops and desktops anymore. Tablets and mobile phones make up a big part of the market these days. Thus, that is the biggest problem that I had with this slide- the mobile vs. desktop experience. User's now can hover over each of the circles and move between the slides, or click the arrows to advance. On mobile however, it is only one circle per page and the slideshow advances automatically or through the clicking of the arrows.
I really learned from the creation of this slide how to deal with positioning by percentages and how the elements reveal into the page. When I first saw this I was completely stumped about the blurriness on the different products Fitbit has. "How do they do that in the code??" Well, turns out I did not have to worry about that. The images themselves are blurry - magic! All ways to create depth and fool the eyes of the consumers, ingenious
That isn't actually the name of the slide, but it is the slide with the shoes. Again, I ran into the magic of fooling the users eyes. The shadows beneath the shoes are actually just images the come into view the same time the shoes do. Magic right?
Inventing the future
Now this slide was a pain and a half. Remember talking earlier about how the video doesn't load sometimes? Well this has a similar problem. If it is taking too long, all these products are actually in just one image that you can get. However, if the browser can, all of the products are also individual images that animate in. How would just using an image showcase my skills though? It doesn't, so I went through and animated these products to come in during the scroll. Aka a pain and a half.
Fun with Friends
I loved creating this page. This one was my introduction to animation and getting those phones to spin in there was easier than I expected. The simple interactions makes the site's experience that much more fun. I'm not going to lie, the "Nick cheered you" did result in a little peeking at their code, but if you resize their page with that open and resize mine, you can see that mine stays centered!
This was maybe one of the most problematic slides. See how they all kind of wobble/slide in? Animation at it's best. I actually decided not to copy their animation and went with my own. I personally like mine better but I could be a bit biased. This again has the same "blurriness" effect on the pictures that make the depth more fun and interesting.
This slide was very similar to the 'Why Fitbit' slide! Simple, quick, but looks great.
Nothing special about this slide. Just one large image and some text that encapsulate what the point of this whole page is about - getting users to buy a Fitbit.
The slides from the Shoes to the Achievements on mobile actual create a carousel very similar to the Experience slide. This was another one of those things where as a developer I cannot just code for one screen size specifically - people experience the site in many places and the site needs to be aware of that.
Insights & a Look Back
Now that I have learned more since this mini-hackathon and since I had only 24 hours (a personal limit) to complete this, there are definitely things I could change and optimize. One of the first things would be Page Speed. A tool from Google called PageSpeedInsights has come in hand with developing other sites and one that I have come to look at often. Now I'm not saying mine is great, but if you look at the images, it is technically better. That isn't saying too much. But optimizing images and increasing the speed were not things that were on my list at the time. Next up would then be to look at the developer tools on chrome and view the network activity - what is taking so long (the images and the video) and how can we improve that. I was going for creation and it turned out really well.
Conclusion & a Letter to Fitbit
Well that's a wrap. For 24 hours I sat down and recreated Fitbit's 'Why Fitbit' page - I know it isn't perfect, it has some flaws, but if I can do that in 24 hours imagine what I could do with a 40 hour work week. Fitbit has long been a company that has created products designed for the user and the customer.
Oh I almost forgot, you can actually look at this site on your own! My version of Fitbit can be found here. Please note that I am no way affiliated with Fitbit and do not own the right to any of these. I will probably update the site just to recognize that.
So take a look at the video, it's doesn't have as much as this content but it is proof showing the hard work, dedication, and drive that I have for my degree, my skills, and my desire to work at Fitbit.