23 Mar

Web Dev: Skeleton Boilerplate

I decided to experiment with Skeleton, a responsive CSS boilerplate.

It is extremely simple to use, and comes with a 12-column grid making it a perfect fluid layout template.

Skeleton's 12-column grid layout.

Skeleton’s 12-column grid layout.

I was able to quickly put together a starting layout, based on some sketches I mapped out previously. My initial sketches are below (taking the grid layout into consideration) followed by the initial desktop layout and a mobile version created starting with Skeleton.

layoutSketch

ScreenShotDesktop

ScreenShotMobile

I developed a system of blocks, that include a ‘border’ section of colour, and a white section to hold the text. As you can see, it is an extremely quick way to get together a responsive design. I’m going to work on gathering and creating the content with the client before I progress much more with the coding, but I’m happy that this is going to be a viable tool to build on and develop further.

Please follow and like:
04 Mar

Web Dev: CMS vs Hand Coding

Choosing how to create a website demands a fair amount of research and reasoned decision-making. This will ensure that I don’t waste time, energy and money further down the line.

Initially, there are two different ‘paths’ that spring to mind; some sort of Content Management System (CMS) such as WordPress or to hand code the website. There are lots of interesting ideas about how to go about choosing the technology/language/framework on various blogs, but ultimately it varies from project to project.

The best way to decide is to research into some of the advantages and disadvantages of each method, and see how this particular project fits into this. This post on 7Host’s blog highlights some of them, which I based the following table on. It shows the reasons why I have decided hand coding will be better for this project.

CMS Hand coding
Benefits Easy programming, easy user management, templates, great for blogs and larger-scale projects. Complete control, greater understanding, quick, clean and efficient.
Disadvantages Customisation/modifying can be tedious, loading times/bigger websites. More work initially, knowledge required, debugging time.
Project specific notes Only necessary if client wanted to blog. Project is small-scale, not enough to warrant database backing. Made-to-fit code, efficient and a better method for a mainly static site.

Even after deciding on hand coding instead of CMS, there are a few different options I could chose to progress. Either begin coding from scratch, using a simple text editor, or start from a CSS framework such as Bootstrap, Foundation or Skeleton. I created my portfolio site from scratch, so I know roughly what I am  currently capable of coding (obviously, there is always more to learn!).

In comparison, this article on Mashable shows a list of some popular frameworks that I can begin to research, but aside from looking at some examples and reading about them, the best way I can determine what will be most suitable is to try them. Experimenting in this way will only improve my skill set and allow me to build up my own personal web designer’s toolkit.

toolkitThumb

Please follow and like: