I’ve written a few times about the process behind building my wife’s website, and to celebrate its official launch, I wanted to share some problems I encountered and lessons I learned throughout this project. I’ve also included a list of resources that were invaluable during this build.
I started this one-page site with Pattern Lab because I wanted to establish a style guide driven workflow. Pattern Lab helps implement that approach, but I don’t think it was very efficient for such a small project like this.
In fact, I ended up abandoning the framework about 75% in to the project, which added time and effort. This, admittedly, has more to do with my newness with Pattern Lab than any inadequacies with Pattern Lab itself. I still believe it’s a great tool for responsive design, and I will be using it extensively in the redesign of FDGB. In the end, it was still a great introduction to the workflow.
I tried to stick to the SMACSS way of styling components, and one of the things I found I found myself struggling with was separating style from structure. This is a core fundamental of SMACSS, as well as OOCSS, and following it really helps the organization and scalability of a site’s styles. I think finding these difficulties out right now will help me better structure CSS in future projects.
Plan for Performance
As of this writing, Tina’s site doesn’t perform very well in terms of speed. I will be optimizing images and CSS as I get time, but I would’ve definitely save time and effort if I had simply planned a performance budget from the very beginning. I have to admit, I’m not very experienced in this area, and any attempts at setting a budget would’ve been merely guesswork on my part. I definitely look forward to growing in this area.
I knew that no two browsers were quite the same, but I was fascinated by the odd bugs I found in very modern browsers. As of this writing, the latest stable build of Safari has trouble applying a transition to the fill of an SVG anchor element once that link has been visited. The handling of color profiles as well seems to be all over the map, making it a headache to achieve consistent color between browsers. Note the differences in the color between Safari and Chrome:
Comparison of Safari 7 (left) with Chrome 37 (right). There’s a slight difference in the CSS defined background color. It’s much more pronounced on my personal monitor with a custom color profile.
At the end of the day, I realize that it’s not the job of a web developer to achieve total consistency between all browser, but to achieve an acceptable compromise.
I think overall I’m happy with the final results. There are a few tweaks that need to happen, probably the biggest being PNG fallbacks for the SVG elements, as well as a full CSS audit, but I believe the end product is very close to what was designed in the beginning. It’s functional, usable and has a very friendly aesthetic. The lessons learned here have helped me grow as a front end developer and as a designer.
Now, on to the next project!
AJAX on Mozilla Developer Network
Brad Frost on Atomic Design
Responsive Design Workflow by Stephen Hay
Google PageSpeed Insights