5 Lessons I Learned from Building My First Website

Emilia Totzeva

I do not have a web development background. I studied marketing in college, and all of my past jobs and internships revolved around marketing. So, in an attempt to branch out and develop some new skills, I volunteered to work on a website redesign for a client.

It wasn’t easy. It took a lot of Google searches, endless questions to our developers, and lots of reading, but with the help of my team, we were able to put together a site that I was proud of.

The whole project was very much a learning experience, so in this rambling, I’m going to be listing the 5 biggest lessons I learned from building my first website.

1. Use generic CSS styles instead of inline styles.

This was the biggest mistake that I made and probably took up the biggest chunk of my time. Instead of styling all of the fonts, headings, links, and colors in a CSS stylesheet, I applied inline styles to each element on the site. What would have been much easier is if I had gone through the theme settings and set predefined colors, fonts, etc. and/or written custom CSS that would apply throughout the whole website to save me some time and ensure consistency.

2. Think responsive.

In the first version of my site, I realized that I had built it to look great on my 13” Macbook Pro. What I didn’t realize is that the site looked weirdly stretched out on my coworker’s 17” monitor and very squished on my iPhone 5S. This is a very common mistake to make, but luckily is avoidable mostly by planning ahead and thinking about how your site will break down across different screen sizes. And if you don’t think that responsive design is important, some stats to convince you:

• Over 20% of searches in Google are performed on a mobile device.
  
• 25% of Internet users in the U.S. access the Internet only on a mobile device.
  
• If a user lands on your mobile website and doesn’t easily find what they are looking for, there’s a 61% chance they will leave immediately and go to another website (AKA your competitor).
  
• If a user has a positive experience on your mobile website, they are 67% more likely to buy your product or service.

(more stats here)

3. If it’s taking you a long time to build it, there’s probably an easier way.

This is one of our project managers, Nick’s favorite saying. If a relatively simple task is taking you more than an hour to build, there’s probably a much easier way to do it (think shortcodes and plugins). Chances are, what you’re trying to build has already been built, and there’s probably a plugin for it.

Along with this, it’s important to know when to ask for help. Sure, it’s a ton of fun to figure things out on your own, and that’s the best way to learn. Plus, the sense of accomplishment you feel when you figure out how to build out a really cool functionality all on your own is unparalleled. But if there is a point where you’re stuck and can’t make progress, ask for help or do some Googling. There’s nothing wrong with that.

Similarly, it’s important to look for better and more efficient ways to do things. The way to do that is simply by communicating with your team and asking them for ideas. There are usually several ways to reach the same end goal, but one way might save you a few hours. It’s important to talk with your team before you take on a project and get their input.

4. Chrome Developer Tools are awesome.

Prior to building this site, I had never really used Chrome Developer Tools (right click anywhere in Chrome > Inspect Element; F12 on PC; Command + Option + I on Mac) except to try to find out how something was built. But Casey, a member of our development team, showed me two really cool features that proved to be really useful for me.

The first was a great feature that lets you see how your site looks in different devices and on different screen sizes. All you have to do is hit “toggle device mode” in the Developer Tools menu and select the device you want to preview your site on. It’s not always 100% accurate due to differences in how browsers and operating systems render HTML and CSS, but it’s robust enough to be able to point out any glaring issues.

The other useful feature is being able to see how long it takes for your site to load and what elements are causing it to load slowly. When I first built the homepage, it took more than 15 seconds to load! Using the “Network” feature in Developer Tools, I could see what was slowing down the site (mostly large images) and make changes as needed. Just make sure to clear your cache before you run this test if you’ve been working on the site a lot (and voila, Chrome Dev Tools has a button for that too. Hit Settings > General > Disable cache).

There’s a ton more you can do with Developer Tools, but these two proved to be the most useful for me.

5. It’s not going to look exactly how you envisioned it.

When I first put together a strategy for the site (and yes, this is something you have to do for every site, no matter how big or how small), I imagined the site to look completely different than the way it actually turned out. And that’s okay. As we were building the site out, we found better ways to do things, added in some functionality that we hadn’t originally included in the strategy, and took some unnecessary sections out. Your site does not have to be exactly the way you outlined it would be in the strategy. Naturally, you’ll want to expand on some sections and add in cool features that maybe you hadn’t thought of before you started. Just make sure everything you’re changing is consistent with the original website goals.

(114)