Working largely on mobile apps and platforms, it was pretty ridiculous that my portfolio website wasn’t mobile friendly — at all. I finally found a day to get it mobilized, and here’s what I did.
1. Find a Responsive Template that Can work with your design needs
Since I wasn’t particulary tied to the design on my site, I figured the quickest way to get this project done was to find a HTML5 ready theme that had all the responsiveness pre-built. After a quick search, I found a great theme resource HTML5 UP. AJ put together some impressive templates that are all fully responsive, HTML 5 and easily customizable. I went with his “Strongly Typed” theme and went to work.
2. Update your CMS’s HTML templates
I assuming you’re running your portfolio on WordPress, or a similar theme-based CMS. This site runs on a home-grown CodeIgniter CMS, which I haven’t touched in years. Luckily, it’s based on the MVC pattern and theming for views, so it was pretty straight-forward implementing these changes.
There were around 5 distinct templates in my theme I needed to change. I copied the current theme and updated the HTML structure of each major template and several partials like headers, footers and sidebars. The nice feature about the “Strongly Typed” theme, is that it had layouts for multi-column, home and no-columns. This worked perfectly, since I needed side-columns for my blog, no-columns for some archive layouts and a distinctive home page.
3. Wire references to the responsive css and JS libraries
HTML5 UP themes have their own CSS and reference jQuery and responsive JS libraries like SkelJS, so make sure your references don’t 404.
4. Personalize the template’s branding
Once you get your theme files running with the new responsive framework, you’ll also want to bring in your own branding. I changed some CSS colors, modified the menu structure, and added my logo.
5. Test on your devices
Probably should do this early and often.