I recently decided that my personal blog and portfolio needed a bit of a face lift. The website has had minor fixes added to patch holes, changed quickly in a moment of need, or left to flounder for months at a time. Rather than going in and getting it “just enough”, I decided to fully rethink the usage of david.garden, and design a new layout for it that suits those needs. Additionally, I wanted to make it a bit more accessible, as well as add some responsive layout to the design.

As part of the redesign process, I planned for a short tutorial on building a responsive blog/portfolio site, from deciding on the usage and needs of the site, sketching out wireframes of both the full size and mobile versions of the site, creating a mockup of page layouts, coding the theme and any additional steps that can be incorporated during this process to add value to the site.

Initial Planning

I decided that I wanted to focus more on my writing with the site, and allowing my blog posts, infrequent as they may be, to be the first things that people see when they visit the site. I removed the portfolio items that showed up and instead moved them all to a custom template page that laid them out in a grid. I created a page with a bit about myself, as well as one for services that I offer.

Having settled on this, I began deciding which elements from my old site to keep, as well as where they would be placed in the new design. I compiled a list of elements that would be included, and stripped it down to the essentials. This list in hand, I began the process of wireframing the site.

Wireframe

I sketched up a very simple wireframe on a piece of graph paper. Sure, you can go in-depth with a special program or online tool, several of which I’ve tried over the years, but I find that if you are talking ideas with a client in person (or in my case, talking to myself), then a pen-and-paper wireframe will easily suffice.

As you can see from my drawing on the side, the sketch does not have to look pretty at all. It only needs to convey the layout of the page in a way that is meaningful to you. Plan out how the content will flow, and what you want to direct users towards. While it’s not always feasible for a professional developer working for clients, it is great if you can start with content and design around it, as opposed to coming up with a design that you later find you have to cram content in to look right.

This is also the time to work on responsive layouts. I mainly put my focus on some slight shrinking of the page on devices such as a portrait mode iPad, as well as both landscape and portrait modes of smartphones. There are plenty of debates over why responsive design matters, but suffice it to say, most tech professionals are in agreement that as mobile browsing becomes more prevalent, so too should the experience that those viewers improve.

Conclusion

My site isn’t the most technologically challenging, but I opted to use simple media queries to resize and reform the site based on the width of the browser. If you shrink your browser window on your desktop you can see the changes to the layout. Basically I’ve moved the sidebar to fall underneath the content when the page is shrunk, as well as take the three content areas on the bottom of the page and stack them atop one another.

The next post will be concerned with the actual design of the pages, as well as beginning to code the theme and style it. Do you have any questions on what’s been covered so far or anything that you want to see? Let me know in the comments!

Republish