If you just want to see the new site, go to mikepan.com
It’s been more than 5 years since my portfolio’s last redesign, which looked like this:
Okay, I still like the old design, but there are quite few things that desperately need improvement:
- Design looks diminutive on high DPI screens, even worse on mobiles in portrait view.
- Images are low-resolution, averaging between 900x500.
- High-key design takes away from visual content.
- No sense of time or project. Just a collection of stuff.
- Rigid horizontal layout
With all that in mind, the new sites has the following improvements:Content first. Big projects are featured.
Not only does each project have its own page, all the images are at least 1920x1080. This ensures everything looks great on a retina screen.
The background is now a dim black, further putting the content forward.Should look as good on a 3.5’ screen as a 30’ screen.
Using CSS3, I was able to make the site pretty responsive. Google Chrome’s device emulation feature is a godsend for testing how the site will look on different devices.Hand-crafted HTML5, CSS3, Jekyll backend
Semantic HTML, CSS3 goodies, it’s all there.Trouble-free hosting.
My previous host wasn’t the most reliable nor easiest to use, so I decided to go with something far more established, and free. Github. They can host any static content, and updating the site is as easy as a git push.Things I Learned
- A pixel isnt’ really a pixel
Remember when a pixel is just that, a pixel? Now a design has to target everything from 72 DPI computer screens to a 300 DPI smartphones. Combine that with the idea of viewport, varying aspect ratio, it makes for some pretty interesting layout challenges.
- When blue isn’t really blue
This wasn’t too much of a problem for me, but I had to make sure all the images I uploaded are encoded in the proper colorspace (sRGB).
- Other people are smarter than you
Use css reset, shivs, boilerplates. Because these things are made by people far smarter than you. It will save you time and give you back precious sleep.
- Web development is still a mine field of workarounds, gotchas and vendor-specific hacks.
Sadly, this hasn’t really changed much from 5 years ago. Desktop browsers are getting really good, but mobile browsers has their own performance issues and limitations.