The Best Way to Good Web Design

  • Brad Gillis
  • |
  • Sunday, August 30, 2015

I must admit that I am getting to be a fairly good web developer, but it’s taken a couple years. Being a web designer is a dream job for me. I really love doing it as there is always something new to learn. I really love cracking the code! My girlfriend just cannot understand how I can spend hours writing gibberish with letters and weird symbols.


I played around with a little coding in the late 1990’s but didn’t really catch the coding bug until I was in my late 50’s. A bit late to the game, but once I got serious with learning Html and CSS things began to fall in place fast. Previously, I used a few WYSIWIG editors and the infamous Dreamweaver. But when I got to be a real dinosaur at 60 I decided it was time to get into hard core coding. Hey, I never said I was normal that is well way too normal.


Since then, I have developed a passion for all manner of web development and playing with technologies I have previously never heard of, like node, npm, grunt, and homebrew. Then there are a few I have heard of but never got around to using. However, as a web designer I suddenly found my head spinning trying to keep it all straight. Occasionally, I find myself intermixing Bootstrap syntax with Foundation 5 especially since they are so similar.


I learned all about how to start a Git repository and merge branches, install homebrew and npm and use them as package managers to install grunt (a task manager) to run node.js to compile my Sass into CSS and all the while running bower to fetch and install all the latest updates of all of them.


So my daily diet of articles, books, videos and browsing for answers has taught me a lot over the last two years. Now I can build web sites using either of the two most popular frameworks: Bootstrap and Foundation 5. I can also code with PHP and design websites in WordPress. I have even learned how to build Bootstrap and Foundation 5 websites and convert them into WordPress Themes.


But one of the most important things I have learned is that not all web developers code the same. Watch how different web designers code differently to achieve the same results. Personally, I’d rather code like Hemingway than Tolstoy. Learn to make your code as fluid as possible to achieve the desired results. It will make it easier to read and if you encounter a problem it will be astronomically easier to fix. I am still learning to code like Hemingway.


Now that I have a good proportion of my research and learning out of the way I hope to have more time to contribute to this blog and start a series entitled "Code like Hemingway". It'll be a great exercise for me and beneficial to many readers that are looking to learn to "code lean". Of course, I am not going to try to reinvent the wheels which means where I find incredibly good articles I'll point you in the right direction. One such article is on Git which is very useful for version control and if you are interested in using it then I suggest you take a look at this article, "An Introduction to Git". When your coding causes unexplained errors it is always useful to be able to go back to the prior working version.


Most of you are well aware of frameworks such as Bootstrap and Foundation. Both frameworks offer all the files, styles and widgets to get a jumpstart on a good web design. However, with all those files it is easy to get code bloat because there is so much code included in a framework that you probably don't need to use. The best way to good web design is to really learn the framework and keep your code as lean as possible especially your CSS.


Many web designers that are using frameworks have gone to Sass to help cut the bloat. Even Bootstrap that traditionally was using Less has started making a Sass version. With Sass you can turn on or off the code used for files, styles and widgets that you don't need then it will compile into CSS. The trick to taking advantage of using Sass is you have to learn to compile it into CSS. 


Of course there are third party software solutions such as Codekit for Mac or Prepos for Windows but these can be almost as tricky as using the command line. One of the subjects that will be covered in the series is how to get started using Sass using both command line with compass and grunt and if you follow along it will also shed some light on how to setup Codekit.


Stay tuned if you are interested in learning some of these techniques and if you would like to contribute then by all means drop a line with your ideas.


Post has no comments.


Captcha Image