Responsive Website Design

What Is A Responsive Design Or Website

With the evolution and increased popularity of the humble smart phone, the way we want to access, need to access & expect to access website and data in general has changed massively.

Gone are the days when having a simple 960px fixed width website was enough. We all use mobile devices and as a result expect to see websites with a different, simpler interface that is finger friendly.

When we first started using mobile devices to browse the web, the done thing was to keep the fixed width website and also offer a simplified additional website that was built specifically for viewing on mobile phones. For the website owner, this meant extra expense and having to keep two websites up to date rather than just the original one.

The next generation of mobile devices that have followed on from mobile phones has further complicated the issue. Tablets often have similar screen resolutions to a desktop computer (full HD @ 1080P) which makes life a little trickier. Should tablets see a mobile version, or the desktop site. Fumbling fingers could still struggle on a normal desktop site, so typically they get to see a mobile site, which isn’t always ideal.

Now that we have lived with these devices for a longer period of time, web tech has been able to catch up & help solve this common problem. Responsive design has now come of age & can be seen out in the wild across the internet.

What Is Responsive Design?

As the name suggests, the website design responds – it responds to the size of the screen of the device that is displaying the website. There are several pre-built libraries that will allow you to build websites like this really easily. Possibly the most popular & my personal favorite is Bootstrap.

Bootstrap is an open source, community built set of libraries that have been assembled to make your life as a website coder much, much easier. At its core is a CSS setup that works on a 12 column grid system. This allows you to simultaneously control the website layout for a widescreen desktop PC, regular PC, tablet & mobile phones. You can show hide different areas at different window sizes & set the main menu to change to a mobile friendly touch version at the smallest size.

Bootstrap also provides CSS classes for buttons, responsive images, table display (with striped rows etc) and tons more.

To get it running in your code is also very easy – you just need to include the Bootstrap javascript file & CSS file and away you go…assuming that you already have jQuery running of course!

In short, once you find your way around the toys that are available to you, it becomes incredibly quick and easy to code a page that adjusts to all the different sizes. No more fiddling with floats or margins – it does it all for you.

While this approach is still in the earlier part of its development cycle – it will be the standard approach for years to come. The libraries will become even easier to use and , I expect, even cleverer as well.

I used to be the type of person that didn’t want to use someone elses library as I thought I could do it all myself. I now rejoice at the amount of time I save by using Bootstrap – I can get on with more enjoyable tasks & the rest of my life.

Read More

Office Stretches

The Importance Of The Coding Environment

As coders, we spend longer and longer periods stuck in front of our screens. Because we love the digital realm so much, we often spend much of our spare time in front of a computer as well. There are a few simple things that you can keep an eye on that will help you stay fresh for longer and help prevent yourself from being burnt out.

Are you Sitting Comfortably?

It almost goes without saying that your chair is possibly the most important part of your working environment. A good office chair will be adjustable and be intending for use while typing (not an executive style chair). Ideally you want to have adjustable seat height, arm height, back angle, seat angle and lumber support. If it has all those options, you will be able to get yourself into a good position to work from. This will help prevent back issues and RSI in your wrists or elbows.

You should also have a clear space under you desk so that you can site either with your legs bent and placed naturally as well as being able to stretch them out for comfort without any obstruction.

Desk Layout

How you approach this will partly depend on whether you are using a laptop or a desktop computer. Ideally, the keyboard will sit exactly where your supported arms naturally rest with a mouse to the side. Your screen should be placed at eye level – you shouldn’t be looking up or down as this can cause issues in you neck and upper back. If you are using a laptop, you will have to compromise a little – get the keyboard in the best position that you can and angle the screen so that it points at your face. Also with a laptop, it is advisable to use a mouse rather than the touch pad for extended periods – a mouse is less likely to cause RSI in your wrist.


Getting the ambient lighting right is incredibly important. If you get it wrong, your eyes will become tired much quicker and quite possibly have to continually strain them to focus on your screen. Your programming environment should be well lit, ideally by multiple light sources. The overall lighting level should be a little less bright than your screen – this will help keep your eyes relaxed and focused on your work.

The colour or temperature of your light sources can also effect eye tiredness and energy levels. Softer, warmer colours are more relaxing – but can slow you down. Bright white lights can harsh and tiring. Try to avoid fluorescent tube lights as much as possible – these things are horrible to work under & drain energy levels.

Movement & Blood Flow

We all get tight muscles after long periods of coding – particularly in our shoulders and back. Making sure that you take regular breaks will help keep you joints loose and muscles free. Other than doing a few basic stretches, there are a couple of other things that I have found to help brilliantly with this.

A set of elastic resistance training bands can be used similarly to dumbbells but take up far less room. They can be tucked in your bag or office drawer easily & can really make a huge difference. A few reps of simple dumbbell style exercises with these a couple of times a day will stretch your muscles out and increase the blood flow around your body and to your muscles. You will feel much more relaxed and energized as a result.

Massage balls are another great easy to use option – a set of three that include soft, medium and hard are a great choice. Press them onto your muscles either by hand, or by trapping the ball between a wall/door and your back. Roll them over the muscle to give an incredibly intense and precise massage – this will break down any knotted muscle really quickly and leave you muscles feeling loose and relaxed.

Take Care Of Your Wrists & Eyes

The two things that we need most in order to code are our eyes and our wrists. If you have any issues or niggles with either of these, you should consider what is causing the problem & see if you can adjust the way that you work to improve the situation. Prevention is way better than cure – jump on a problem and get it fixed before it becomes a major issue!


These few simple factors will help you stay fresh and focused for longer – even when you feel tired and drained. Listen to you body as it generally knows what its talking about – don’t ignore anything it tells you as you may life to regret it later!

Read More


How WordPress Has Changed The Internet

Once upon-a-time, not so long ago, a website had to be completely coded by hand. If you wanted to use any kind of content management system, you had to build it yourself. Small hosting packages that included a MySQL database were few and far between, and often prohibitively expensive.

These days, web hosting is incredibly cheap and providers compete against each other to provide a better small website service – basic hosting with a MySQL database now costs less than half the price of a console game for example. This shift is partly due to the increased demand for simple database hosting – thanks almost entirely to WordPress.

For those of you that haven’t heard of WordPress before, put simply, it is an incredibly easy to use and customize platform that you can use to build websites. In its earlier versions, it was better suited to building blogs, but now in its more refined modern form, it is great for building almost any kind of website.

WordPress comes in two flavors:-
1 – a free hosted version that gives you a subdomain on
2 – a free CMS to download and install on your own hosting, available from

Anyone intending to build a ‘proper’ website with their own domain name should opt for the downloadable version and install it on their own hosting.

Where WordPress really excels is in the fact that you can build a complex website without ever actually needing to do any coding…at all.

Because WordPress is open source and essentially built and maintained by a community, there are literally thousands of plugins (mostly free) available for it to modify or extend the functionality in almost any way that you can imagine. On top of this, there are also an unbelievable number of premade templates or themes available to completely change the way that your website looks at the click of a button. There are plenty of free themes out in the wild, but there are also a lot of more advanced paid for ones as well.

WordPress is famed for its 5 minute install – it really does take five minutes (or less) to install it and have blank website running. Some hosting packages will also offer a one click install from the control panel which makes it even quicker and easier.

While we have seen an increase of companies offering cheap websites with a monthly subscription – most individuals and small businesses would be far better off buying their own hosting package and assembling a website using WordPress. If at a later date you decided that you needed to make the website more complex, you would be able to approach any one of a huge number of web companies to work on your website for you as most of them will be able to work with what you already have, rather than throwing it all away and having to start again.

I know that a lot of people used to be cautious of using WordPress, but now it is the most common web platform out their – and with good reason. No longer do we need to build simple websites from scratch by hand coding – WordPress is there to make our lives easier and more efficient.

Read More

A Coders Life

Flat Packed World – A Coders Life – A New Direction.

The internet is a rapidly changing environment that evolves and progresses at an incredible speed. Once being a coder meant living and dreaming code everyday. Now, thanks to the evolution of open source projects and APIs, life as a coder is mostly a much more simple affair.

Because of the changing online environment, Flat Packed World is back with a newly refined direction. While still based loosely around coding, the focus is now on a coders life and ways you can improve or enhance your life as a coder and not the actual code itself.

Coders typically spend countless hours in front of computers putting their health at risk & make sacrifices along the way – particularly regarding the social side of their lives. the new Flat Packed World will help give you information and ideas to help you improve your approach to coding, working environment, work processes & ideas to engage more socially.


Read More