Tania Rascia

Skip Navigation
Website Redesign: Version 2.0 (863 Commits Later)

Website Redesign: Version 2.0 (863 Commits Later)

 /  19 responses

From September 24th, 2015 to June 10, 2017, I’ve made 863 commits on my personal website, taniarascia.com. That means there’s technically 863 versions of the site – but most of those commits are small tweaks that added up to slightly different versions through the two years this site has been around.

My aim for this site was always to keep it simple and minimalistic, and let the content speak for itself. However, the site grew from just a simple blog that I used for my own reference, to tutorials that thousands of people land on every day.

As the amount of content I had grew, I wanted to make the site more accessible and easy to navigate. Finally, within the last month I decided to take an entire weekend and change up the whole design, put some thought into the structure, and officially have a version 2.0.0 (though it’s probably somewhere closer to version 2.1.63 by now). I improved the search functionality, cleaned it up, and gave each page a clear purpose.

I’m still trying to improve upon it, but moving forward I plan do a full redesign from the ground up instead of dozens of tiny, minute changes.

I thought you might like to see a few of the design changes the site went through, so I chose 10 random commits and took a screenshot of the front page, a post page, and an example of some embedded code. There are some designs that are missing, but they’re lost to the annuls of history now.

Version 1.0 – September, 2015

The very first design! Simple and clean. Should have just kept it like this. I’m using the default sans-serif font, with Roboto for headings. Blue links with a gray underline border. No navigation or links to anything. I was using Highlight JS for embedded code, and Grunt to compile Sass.

Front page

Post page

Embedded code

November, 2015

I changed the heading font to bold Open Sans, and the body font to a slab serif. Added in GitHub, Twitter, and RSS links to the top, and replaced my name with a picture of my face. (…) Embedded code is vastly improved. Still no navigation. I’m showing a larger preview of the first post on the front page.

Front page

Post page

Embedded code

January, 2016

Added in another link to my nav – New Moon is born! Cleaned up the post page a bit.

Front page

Post page

Embedded code

May, 2016

I skipped forward a couple months here. There’s a navigation now, and I’m using Montserrat for all the fonts. Everything got really colorful and blocky.

Front page

Post page

Embedded code

June, 2016

I started using a serif font for headlines, and simplified the navbar a lot. (Still using my face as a home button.) Front page shows three latest posts. Integrated New Moon into my embedded code syntax, so now it’s a dark theme.

Front page

Post page

Embedded code

August, 2016

Attempted to make the front page a bit more clear on what it’s all about.

Front page

Post page

Embedded code

February, 2017

At some point, I got annoyed by how far away I was getting from minimalism, and basically deleted most of the styles. What was I thinking? That full bleed embedded code was kind of cool, though.

Front page

Post page

Embedded code

April, 2017

Oh god, remember that gif? I also added in a slide out navigation panel, and a search bar to the top right.

Front page

Post page

Embedded code

May, 2017

This is where I was right before the redesign. Pretty clean and simple. Everything is using Roboto font.

Front page

Post page

Embedded code

Version 2.0 – June, 2017

And here we are with the newest version! No more hamburger navigation, either on mobile or desktop. I have the double navigation, with the search bar and name of current article always visible. I added in some colors and icons, and vast improvements to the tutorials/snippets/thoughts pages.

The redesign isn’t drastic in looks, but I rewrote a lot of the code so that the entire layout is based on flex. I still would like to figure out a better way to break up my tutorials (into front end, back end, system administration, design, etc.) but those are thoughts for another redesign.

Front page

Post page

Embedded code

Tutorials Page

Conclusion

What do you think of the newest layout, design, and structure? Is it fast and easy to navigate? What do you wish would be added or taken away?

My takeaway from all this is that I wouldn’t recommend constant website tweaks, but rather a more in-depth redesign, less often, in which you think about your content and the best way to present it. Fortunately, I think everyone else knows this, and I’m the only person who has that problem. I think some of you like checking in every now and then to see what wacky thing I’ve done next, though.

Moving forward, I’m going to spend more time on writing and less time on designing. Since I have no ads and no sponsored posts, I make no money from this site. My biggest task is working on discovering what type of content people need/want and would be willing to contribute money to so that I could pay my server fees as well as make a passive income through the site.

Note

Hi, my name is Tania Rascia. I've turned down every offer for advertisements or sponsored posts on this website. I write free resources that have helped thousands of people successfully transition into a web development career.

My committment is to no bullshit, no sponsored posts, no ads, and no paywalls. If you enjoy my content, please consider supporting what I do.

Support my work

Newsletter

New articles on web development every two weeks.

Write a response

Your email address will not be published.

All code will be displayed literally.

Discussion

  • TGC says:

    I have been your follower since 2016 may be you are unaware of it. I really appreciate your work. Keep doing. ๐Ÿ™‚

  • Rafi says:

    This is an amazingly detailed writeup and what I’d consider to be required reading for those working on their first ‘real’ website. I’ve been in that place where you get stuck in a cycle of constant visual changes because you saw something cool on another website which you wanted to implement right away. It really diverts your focus away from writing good, valuable content for your site. Reading this, with all of its details really drove home the fact that changes should happen organically and it’s OK if your initial design isn’t perfect.

  • Djaber says:

    You Did a great job

  • Curtis says:

    I like new layout alot; I love the purple pixel hero on the front page and in the email signup at the bottom. I do mis the slightly rounded corners on your embedded code.

    The only thing that really gets me is the double nav bar. It’s breaking my brain… i keep scrolling up to find the nav menu for some reason, then realize it’s right there ๐Ÿ™

    • Tania says:

      I liked the rounded corners, too. I’m having a bit of an identity crisis about rounded vs. straight corners right now. I can’t decide and it’s causing some clashing. The double nav bar is a bit confusing as well…when I do version 3, I’ll have to put more thought into it.

  • Adam Saleh says:

    Nice website design, Tania! I think you should make all external links to open new tab/window for better U/X. You don’t want to lose your visitors. It’s just my thought.

  • Josep says:

    Very cool and way to document. Definitely a great skill.

  • Andreas says:

    hey there!

    i know what you’re talking about.. i have a new idea/plan for my personal website like every month but i usually scrap the ideas after working it out half way.. don’t asl my why.. but at least i learned a lot by experimenting with different ideas.

    the current state of this site is pretty good imo. it’s clear, simple and minimalistic. it focuses around the content but the designelements used are fitting nicely. especially the hero-thingy is an awesome eyecatcher on your startpage. i’d maybe wsh for the navigation to be accessible in the sticky topbar aswell. i scrolled up like 5 times to have a look at other pages while writing this comment. ๐Ÿ˜€
    besides that i really like that the title of the page is display right next to the branding because even half way through the article you still know where you are. that’s nice. (:

    the only thing i don’t like is the donate button. urgh.. glossy web 2.0 style! never looked good imo!

    • Tania says:

      I agree, I changed the buttons to regular…I just figured people would be more familiar with the awful buttons.

      I also agree about the top nav, but I feel like it takes up too much of the screen as you go through a tutorial…

      • Andreas says:

        Maybe it would work when the navigation is shown as soon as the user scrolls upwards but hides again when he scrolls down? I saw this behavior on a lot of sites recently and i think it’s an elegant solution. (:

  • Alan Vรกzquez says:

    Congratulations on the new layout! Though I must say my favorite was April’s one, I think it was cool. Hope you keep posting more tutorials this year!

  • Precious Opusunju says:

    Love the new layout! ๐Ÿ™‚

  • Darshan says:

    Hi Tania,
    Insightful content as always. Your writing style makes the whole difference! It’s engaging and keeps the readers interested till the end.

    Can you please write an article explaining your thought process as a designers (UI and UX) when you receive a website development requirement? It would be very helpful for beginner to intermediate designers. Please also share your journey right from the wire-frame/prototype to final website design. This might be your next master piece like What is Bootstrap and How to create WordPress theme.

  • Amy Kotas says:

    I have the opposite problem. Work like crazy on my site, then proceed to ignore it for a year or more (the design at least).

    I think the current iteration of your site meets the goals – minimalist, well organized. I think I kind of miss the full-bleed embedded code. (Maybe visually, to me, I feel like I’m glancing at my own code editor or something when I see it presented that way.) Do you know if there’s a way to wrap embedded code so there’s no sideways scroll?

  • Mike says:

    I’m loving the new layout ๐Ÿ™‚ It looks great with your amazing content. I am definitely looking forward to learning more from your next article.