ON BEN’S MIND: Before I started building this site in December 2017 I was hoping to avoid Javascript, frameworks, plugins, dependencies or floats – is that even possible? A few years ago I had heard of CSS Grids and knew of its potential but I had no idea when I started on this journey that something as revolutionary and as useful as Grids was ready for prime-time.
If you are not already hip to CSS Grids, let me just say that so far it has been the most enjoyable, logical and structurally sound layout technique that I have ever used for front-end web development. I say that as a person who has been dabbling in front-end code as a hobbyist for more than two decades.
In 1994 when I was in University, I was first introduced to the internet. During my years in school, I remember being excited about animated GIFs, the ability to color code text, create hyperlinks and the mere idea that I could set text and pictures on a page for all the world to see instantly.
I graduated in 1997 with a degree in graphic design – as a designer you expected your Quark, Photoshop, Freehand and or Illustrator file to be reflected in your web page. I have always been baffled by the clumsiness and the ugly of web layouts. HTML in general is easy to grasp but it had never been a forgiving tool for the sake of fluidity, design or aesthetics. I would often dabble in programming just to see how it worked, but never anything serious.
Sometime around 1998 all of these hyper dynamic and spectacular websites started to sprout up, many using Flash and other bloated media plugins. Some of these websites were completely stunning. It was truly an exciting time to develop for the web. I was inspired!
In 1999 I took my first serious attempt at building a personal website. It was an ambitious project and I was using Flash solely as my tool of choice. It took me 4 long grueling months from start to finish to learn the timeline, tools, canvas and action script for my site. At that time many people were making Flash sites but there was limited information on how to make certain actions or functions happen. I spent many all nighters and many days and weeks of deep diving to explore this new tool and its possibilities.
When my site was completed I had an epic animation splash-page outfitted with animated text graphics and music. The site also had colorful flourishes of animated buttons and screen transitions. Having a flashy site was the thing to do back then and everyone was trying to WOW and outdo one another. for me, it was not about just being flashy, it was about differentiating from the bland and showing off my skills. Though my website was “cool”, I was dealing with extraordinary file bloat and ridiculously long load times!
As a front-end creative you learn that though you want to add personality and project a cool factor, you quickly discover that it should not be at the expense of increasing load time and alienating your audience. The whole point of building a web page is to draw people to your site and link them to relevant stuff… End of story!
Some time in the mid 2000s I started to realize that regularly updatable information was more important than cool graphics and flashy stuff; as a result, I ceased using Flash and started to blog instead. By 2005 I started to podcast and syndicate content.
I was learning about content management systems and how people consume content. I was also learning how Google indexed and gave preference to sites with syndicated content and regularly updated pages. Sometime in 2005 or 2006 I migrated to WordPress, which for me has been the ideal platform to craft and manage a website as a front-end creative.
As I started off by saying, I dabble in web programming. I do not create websites as a professional nor intend to; however, I have an intimate understanding of HTML5, CSS3, SVGs, PNGs and self hosteding WordPress on a private server. I am certainly no beginner and possibly a touch above intermediate, with that said, I can not stress or emphasize how monumental and important CSS Grids will be to all people who program for the internet.
Understanding CSS Grids, media queries, SVGs and PNGs and having an overall intimate knowledge of CSS3 and HTML5 will go a long way for all web programmers.
I remember slicing up my Macromedia Fireworks designs before export as a piecemeal solution (which was terrible). I remember using Flash. I remember the iPhone and how it not only killed off Flash but how it also forced all front-end programmers to rethink how we display content on all screen sizes and pixel depths.
I remember using Javascript to make drop down menus and the use of floats and clearfix and 12 column grid structures for WordPress and Flexbox tracks. I am pleased to announce that I did not use any of this in the crafting of this site!!!
I recognize my needs may not be the same as other web creatives needs, I am a hobbiest afterall. What I do know is that the current state of the web needs to be responsive to accommodate all screen sizes. To manage small, large and optimized pixel and vector imagery and know when and when not to swap or scale. Most importantly for the first time in the world wide web history we now have the ability to position and layout exactly what we craft in our design programs like Photoshop, Illustrator and Indesign.
As a creative who craves to have control over the aesthetics and fluidity of content and design, I have been deeply inspired and impressed with the use of CSS Grids for the development of my site. It has been the most fulfilling and effective programming experience in my 20+ years of creating content on the web.
I will post some code examples from this site in the coming weeks. CSS Grids is surprisingly easy to adapt to your layouts once you become familiar. If you want to get started using grids and gain a more comprehensive understanding might I suggest the following CSS Grid experts, all who happen to be my heros: Rachel Andrews, Jen Simmons and Morten Rand-Hendriksen.
Bendrix
