There are many reasons as to why you want to redesign your site. Maybe your visitors aren’t converting or the bounce rates are too high. Or maybe your website just doesn’t reflect your business goals and vision any more .. or even worse, it’s not responsive.
Your (company) website is an essential element that users base their first impression on. And – if done right – it could be your 24/7 salesperson. The trick isn’t just to have a website, it’s to develop the right website that will improve the user experience enough to increase your conversion rate.
These last 2 months, in between jobs and during the Xmas holiday, I redesigned this site. In this article I want to share the reasons why I redesigned this site and what I changed along the way ..
Why I redesigned my online portfolio
There are a lot of reasons why a website redesign may be needed, more than just applying a new look and feel. Reasons for my redesign were not as much a visual revamp, but more a technical overhaul of my site!
Visual Appeal
I wanted the website to highlight my products and services more and for the layout to look more harmonious and consistent. Besides a new (fixed) header image I also included some micro-animations to enhance and enrich my visual content and to spice things up a bit more.
I also added more images per Project, instead of just showing a picture of e.g. the website, I decided to show what the website looks like on different devices.
Typography and Buttons
I was already using system-fonts in this website, mainly because of a better performance (load time) instead of using custom webfonts via @font-face. I chose bold headings and changed the styling of my.entry-title.
/* System Fonts Rule */ font-family: "Segoe UI", "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Lucida Grande", sans-serif;
I was neither satisfied with the font-weight: 800; of some of the system-fonts, especially the.banner-title in the <header> wasn’t bold enough for me. So that’s the only custom-font (Open Sans, extra bold) I’m using in this website now.
I also restyled my buttons to have rounded corners to create a slightly more modern look, so the buttons look more consistent with e.g. my .entry-title, avatar and pagination.
Content Management
I really wanted to add more flow to the website, so I re-arranged some of the content. The Portfolio part isn’t longer a separate page, but I decided to add my Portfolio to the homepage after the services I provide. It seemed logical to me to show the end result of my design services immediately below them.
I also rewrote the text on all my pages, including my service pages and changed the order of the tabs in my contactform, placing the ‘Hire Me’ tab first.
Technical Overhaul
Times change, industries change, but most importantly, technology changes. Staying on top of current trends and utilizing current technology will imho ensure you stay on top of your competition.
Let me first say that I don’t have nothing against JS, jQuery or whatever new shining, must-have JS library! But I think it’s bad for performance to use JS when you can code the same effect in plain (Vanilla) CSS!
That’s why I deleted both Masonry and the FlexSlider (savings: 350kB)! In my case I could suffice using CSS Flexbox to create a responsive grid for my projects. I also used CSS to create a Project Filter in my Portfolio part instead of the built-in Filter that masonry provides, as you can see in my pen below:
There are tons of opinions on the interwebz about the fact if you should use a slider or carousel on your website .. or not, personally I now think that ‘Sliders suck and should be banned from your website‘.
For the sub-navigation on the Project Pages and Blog Posts I added an Ajax script to request the next or previous Page/Post Title when you hover the next or previous link.
Performance
Web performance or website optimization simply means optimizing the speed of web elements (pages, images, other file formats etc.) which are downloaded or displayed on the user’s web browser.
In today’s technological world, customers expect fast and reliable online user experiences from every website. That was one of the reasons to delete some of the JS libraries as mentioned above and hence to improve the pagespeed of my site.
I also installed a Lazy Load plugin for images and videos used in my site. I’m using the A3 Lazy Load Plugin, the most fully featured, incredibly easy to set up lazy load plugin for WordPress.
Miscellaneous
Other website improvements are including Hotjar (a powerful tool that reveals the online behavior and voice of your users), instead of Google Analytics. With Hotjar I can measure the statistics of my website and it gives me a better insight in how to improve my site’s user experience and performance/conversion rates.
Last but not least, I also made my Custom Post Type (Project pages) ready for the new WordPress block editor, Gutenberg. If you need to redesign your (WordPress) website, but you don’t have the time or knowledge to do so, I’d love to help!