The Most Important Thing to Consider When Designing a Website

www.unsplash.com

Recently I wanted to completely re-do my personal website. My old one was too plain and minimalist. I wanted something equally minimal, but I wanted to add my personality to it.

So I made a huge mistake: I opened up my favorite text editor (Atom), created a new file called index.html, and I started coding.

Before even opening up your text editor, you should plan out everything. And the most important thing to consider when designing a website is to keep the following in mind: Design for mobile first. The content of a website is its primary element, and we should build our sites with the purpose of showcasing that content in the best possible way. Put simply, web design is about communication. With colors, typography, shadows, images, etc, we are sharing a message. But why design for mobile first? Well, 60% of online traffic comes from mobile devices.

If you design a website for mobile first, as you scale for tablets and desktops, you will only be adding and reorganizing elements. On the other hand, if you design for desktops first and scale down, you will be shuffling around trying to figure out what to take out and where to put things so that it looks good on the smaller screen. Your CSS will be an absolute mess (I’m talking from first-hand experience here).


Case Study:

I wanted to redo my website. This is what I ended up with after I started coding right away:

I was fairly satisfied with my website. I thought it looked good. But then I realized I hadn’t considered what it would look like on phones or tablets, and I was scared to find out, so I stood up, served myself a bowl of cereal, checked Reddit, Facebook, and Twitter (this is what I always do when I procrastinate), and finally I took a look:

Oh gosh. Now I had to clean up after my mess. That was a couple of days ago. You know what the mobile version looks like now? Exactly the same, I’m really lazy haha. Just kidding, before I fixed it, I wanted to reflect about the importance of designing for mobile first, as you’ll be saving yourself a lot of headaches down the road.

So what’s the most important thing to consider when designing a website? How it will look on mobile.