Tania Rascia

Skip Navigation
Website Redesign: Version 4.0

Website Redesign: Version 4.0

 /  39 responses

Back in July 2017, I posted about all the redesigns of taniarascia.com that happened up to version 2.0. I made many small, incremental changes to the design over the course of two years, because I’m obsessed with tweaking my site’s design and always trying to make it better. After making version 2.0, I decided to stop making tiny tweaks to the site and do full-blown redesigns instead. This way I can focus on writing more, and still have fun designing every now and then.

A few months ago, I created version 3.0, which is where it was at until today. Below are the screenshots of how it used to look.

In version 3.0, I added a sidebar, and made the newsletter signup and donate button more prominent on the website. I tried to simplify and get rid of the big headers which I felt took up a lot of space for no other reason than that it was trendy. I tried to simplify the color scheme and navigation to only have the most important links, and I wanted to organize all my posts into sections: front end, back end, DevOps, etc.

For a while now, that design has been bothering me. I felt that it was too busy with the sidebar, and too confusing with all the sections. I decided to redo the site and now we have version 4.0, seen below.

In this version of the site, I tried to simplify as much as possible and focus more on function than form. I removed the sidebar, and removed the links to social media, newsletter signups, and donations from the single pages. I consolidated all my information to different sections on the front page, and instead of having a bunch of categories and topics in my posts page, I put them all together with a filtering input.

One brand new aspect of this design is night mode, which you can access by clicking on the moon icon in the header.

I’d love any input from those of you who regularly use my site, and new visitors as well. Is the site pleasant to use? Is it easy to find what you’re looking for? Do you like it? If you have an opinion, let me know!

Newsletter

Get updated when I create new content.
Unsubscribe whenever. Never any spam.

Note

I'm Tania. I turn down every ad, affiliate, and sponsor request I get. I write free resources that help thousands of people successfully become devs. If you enjoy my content, please consider supporting what I do.

Support my work

Write a response

Your email address will not be published. Required fields are marked *

All code will be displayed literally.

Discussion

  • Markki Rivera says:

    Hi! Tania, I'm a new visitor of your site and I love the new look! It's simpler and focuses more on the articles, which are great, and the night mode is a pleasant feature. I look forward to visiting your site more to learn more about front end web dev. All the best!

  • Martin Jham says:

    Hello tania, how many hours do you code in a day?

  • Chris M. says:

    Hi Tania,
    I found your site way back when I had this crazy idea that I was going to develop WP templates. I think I still have Koala on my system because of that tutorial (heheheheh).

    I enjoy your writing and your simple (but direct) explanations of tech. I'm sure you know it's not easy to distill concise but useful parts of complex topics. Your tutorials are very helpful and I like many of your points of view on development.

    As for the site redesign, I have mixed feelings.

    Pros:
    1. It works. This isn't always as easy as it looks.
    2. It's clear. You can find things pretty easily.
    3. It's readable. Every font size and layout choice doesn't get in the way of the information you're searching for.
    4. It's clean. Kind of a repeat of number 3, but it's fair to say there's no extraneous stuff. Even I'm never really sure if I like side bars.

    Cons:
    1. I miss the topic links (e.g. JS, CSS, PHP, …). I don't mind having to search, but I feel like I have to know the blog post I'm looking for rather than going to 'the JavaScript Blog Post Store' or 'the API Blog Post Store'. I know you never named your post topics that, I just couldn't think of a better metaphor.
    2. I wouldn't mind a little flash.

    Of course, the cons here are really just personal preference and, since it's not my site, then it's really no big deal. The site should reflect your personal preferences. It just feels a little 'Bootstrap-y', which is ironic, because I know you are a custom coder. I can do a Ctl+Shift+i in FireFox and see how much of 'you' you put into this. You built this thing from scratch and it shows. Again, to the pros of the site, it says a lot that it functions so well.

    So my (displeasure? petty complaint?) isn't at you, so much of my fear of how the design in web design is really becoming only the stuff of web design and marketing agency portfolios. Sometimes I feel like Helvetica (or Lato, or Raleway if one is being adventurous), cards, and Google's Material are killing the fun for the sake of function.

    In many ways, it makes sense; Who wants a crazy flash screen on Amazon's landing page when you're just trying to find a pair of socks? And if you've ever tried that stuff (e.g. things you see on cssdesignawards), you know it's crazy to put together, crazy to sync with a functioning app and probably impossible (or expensive) to maintain.

    But still, one can dream outside of Helvetica… can't they?

    Anyway, I really appreciate your work/contribution (great big huge 'thank you!') and that you've given us a night mode. I live in night mode.

  • Joshua Pinter says:

    I would love to see a tutorial on your implementation of Night Mode. It is super slick and ridiculously clean. Would love to make this a standard across most, if not all, websites.

    Would be interesting to see if you could pull in whether Night Mode is activated in Mojave and automatically set your website's mode based on that.

    Great job!

  • Tom J says:

    Your website and your work are a massive inspiration for me. As an apprentice in web development, seeing your work and all your articles, is very inspirational for me and gives me loads of little and large tips along the way.

  • comphonia says:

    Your website is a big inspiration, just took mine off from wordpress to design on my own instead of using a bloated template. took a lot of inspiration from you blog to design mine, including the night mode. I also really loved the side bar category in version 3 (loved v3 better btw).
    Please check out the work in progress and give some tips. Thanks.

    https://comphonia.com/playground/blog-dev/_template/article.html

    • comphonia says:

      How did you avoid "ghosting" when swapping css? In hope minifying them for production will fix that. I see an un-styled html for a fraction of a second when switching.

  • David says:

    I like the simplicity and the dark mode (coincides with OS Mojave)!

  • abdullah says:

    Love it , 100% usability compatible.

  • Jaclyn says:

    I actually really liked the sidebar in your previous layout and I'm sad to see it go! I think grouping the articles by categories makes it way easier to navigate the articles rather than the search box. Also I'm not a huge fan of the sticky menu and I feel like the coffee buttons are too intrusive. The list of articles on the homepage is too large and unordered for me to navigate through at a glance as well. I love the simplicity and minimalism of the overall look but I feel like listing the articles needs more structure/categories. The dark mode is awesome though! Thanks for your awesome articles and resources <3

  • Vincent Tang says:

    Not really a fan of the new design, actually I think version 1.0 is still the best. It had lots of personality behind it, but every iteration you made slowly took it away. There's no portfolio section highlighting work you've done previously. There's such a thing as too "minimalistic" and I think you crossed it. Font sizes are a tad small… it should be 16px not 14.4px. Now all your posts have a giant "buy me a coffee" at the end.. it feels like the spammy and the opposite of "bullshit free design". These are just my opinions though. I feel like you went from small time enthusiastic developer to corporate design tech.

    Also the links, you cannot find blog posts articles related to other articles. The search button filter is not very useful, I don't think any blog needs it actually (even if you had a thousand posts, it would not be helpful). This is what google is for, and CTRL+F search is one click away

    • Tania says:

      Just call me Tania "Corporate Big Tech" Rascia. You think my website is spammy?

      • Vincent Tang says:

        Sorry I apologize for the rude remarks, the site design is wonderful and your guides are great. My first impressions were wrong. Sometimes I say things without thinking them through

  • Noah says:

    Great redesign! Really love it!

  • Duncan Skilton says:

    Where do you get your inspiration from? I hear that a person is either pragmatical or artistic, I guess I’m more pragmatic and really struggle with the design side.

  • Kim says:

    I love the redesign! I especially like how clean and organized your website is.
    As someone who is trying to break into the IT/developer industry, I really appreciate your helpful newsletters and tutorials. Great work~

  • Víctor Rico says:

    Totally love it, simple and elegant. Congrats!

  • Ted says:

    I like the simplicity. Keeps the focus on your content. Either way, great work!

  • Uri says:

    I'm a fan of your work, but think the recent redesign was a step in the wrong direction (visually speaking). It took away a lot of the personality in my opinion and made it more "cold" feeling – sort of like Craigslist or Wikipedia.

    I think it's cool/nice that users can choose between light and dark color themes. I wonder though if the moon icon next to the social media icons will be lost/misunderstood.

  • Nathan B says:

    Looks great, but the button for night mode is too small.

    On my phone I pressed the twitter icon twice before finally getting night mode.

  • Oscar says:

    Hey Tania,

    Really like the new look and love the night mode!

    Always enjoy reading your newsletters and tutorials. Keep up the good work 🙂

  • Stejin Stephen says:

    Great!, keep up the good work. Would you please consider writing a tutorial on building a CRUD app based on MEAN stack in 2 or 3 parts?

  • Michael Uloth says:

    Love it! So clean.

    I found the separate post lists in 3.0 a wee bit confusing to scan when I wanted to reread one of your (great) past articles. The 4.0 consolidation + filtering is quick and easy.

    Nice work!

  • Liciof says:

    The night mode: very beautifull. I appreciated the division into sections, but the filtering input is useful too.
    Thanks Tania

  • tris says:

    Great redesign!

    What are the steps you took to apply night-mode on a flip of a switch and having it apply across all pages?

  • Alexander says:

    Hello Tania,
    Everything you do is awesome. Keep up the good work. I can't wait to make enough money to buy you a coffee. You deserve everything. Nice work once again

  • Johan says:

    Thank you for night mode!