Wow, it’s been a while…

First off let me say sorry it’s been such a long time in updating this site. It’s not really something that holds my interest for long and I tend to run out of things to say but will pop on every so often when I feel I have something interesting to share. Unless something happens and this site for some reason rockets with users. Ha-Ha.

Anyway back to the point I came on here for in the first place. My new site! Version I’ve lost count it’s been so many. But who’s counting anyway, right? Over the last few weeks I have given myself a task to get my current portfolio/business website back up and running. I took it down ages ago as I was in the process of updating it, got about half way, got bored and couldn’t be arsed to do any more. So I took the site offline and replaced it with a contact form, in case someone wanted a quote for a website or just wanted to get in touch. That was almost a year ago now…. It has been in the back of my mind but until now I haven’t really had the time to do what I wanted to it, and there are so many other things keeping me busy, gaming, going to the gym, work and getting married.

I’ve decided to go simplistic but with it being the digital age of tablets, smart phones / phablets etc I wanted to make something as responsive as I could with maximum usability and readability. So colours to a minimum, something I did a long time ago on another version, way back before CSS could do gradients and you would have to hack and slice images up (wasn’t that fun!?).

So my first challenge was to get myself a responsive layout that would make it easier for me now and in any other future websites I build. There are so many options out there now with Bootstrap, boilerplate and all the numerous grid systems. After much research I decided to go for a custom 960 grid which I would base on the original 960 Grid system. But I didn’t want to just download it, where’s the fun in that? So I went for the fun option and set about creating 1,2,3,4 and 5 columns in a layout and then CSSing them to look nice, always making sure that readability was the key. A few days later I know have what I call Boxy960, a 12 column 960 grid system. I can’t for the life of me wonder why I didn’t do this before. The difficult bit for me was making the grid system responsive and took many hours to get right, I’m not sure I’ve even fully cracked it yet but it’s getting there. Knowing me I will probably be tweaking it for another few days at least before I’m completely happy with it.

Now making columns is so simple, want a 2 column section? Boom, 2 mins and you’re done. It really is that simple, this will be something I will cover in more detail in a future post.

For now I’ll leave you with a little screenshot of my testing page. Keep an eye out for an update very soon.

boxy960

Advertisements

CSS3 and validation – The headache edition

So for the very small numbers of people that read this, you will know I have recently been updating my personal buisness website in HTML5 and CSS3. As with all sites designed these have to pass through strick validation according to W3C guidelines. However the problem arises when using CSS3 as it’s still in the experiemental phases and therefore will not pass through validation properly.

There is two ways around this, you could either: Hold off from using it, or you could just move all of the CSS3 code to a serperate file, call it something obvious like css3.css.

As long as your normal code is valid (without hacks or errors) then it will pass CSS3 validation. Your css3.css file though will not, and this will continue to be the case until such a time as it is officially supported and released out of experimental phase by the W3c.

Always make sure when using CSS3 that you use fallbacks for unsupported browsers. For example if you have a background gradient, just make sure there is a normal background colour associated with it. For example:

header {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #cecece));
background: -webkit-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: -o-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #cecece 100%);
background: linear-gradient(top, #ffffff 0%, #cecece 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cecece', GradientType=0 );
}

Hopefully this will help when you are trying to get your CSS3 to validate at it just won’t play ball.

Website Refresh

Apple Gate Studios screenshot of homepage

Fairly recently I began to update my business website with a new look and feel, using HTML5 and CSS3. This was/is a bit of a challenge to get use to the new tags and all of the new powers that this updated coding language will bring.

I am still updating the site, so there will be a few things that might look odd, esspecially if you are using a non-complient browser like IE, but otherwise you should see something similar to the image in this post.

Let me know your thoughts about the design and if you have any questions, please feel free to ask.

How to collapse/expand all Photoshop layer groups (folders)

I’ve been working on a new homepage design for a website in work, it’s a fairly large PSD file of around 20MB with a few hundred layers and about 12 parent groups with as many as 10 child groups. I came across the problem of wanting to open all of the groups to make it easier for me to adjust serveral layers (images) that I wanted to re-link together.

Doing this normally would mean having to go through a tonne of folders to find the correct layers, so I was sat there thinking there must be a way of opening and closing all of the groups together. After doing a big of digging I came across this shortcut.

PC Users: Hold Ctrl + Alt and left click the group arrow

Mac Users: Hold Ctrl + Opt and left click the group arrow

This automatically opens all of the groups (folders) within it! To close all the groups again simply use the same command on the parent level folder and bingo all folders will close again. If you want to open all the group folders within a group, just use the same command on the child level. Easy!

Hopefully this will be useful for some people.

Trying to get around CSS Hacks

Recently I have been playing around with a monster CSS file at my new job. The CSS file has been there for a few years and as had a few junior designers working on it from time to time. The problem is that when they come to edit it seems that no-one decided to check if there was previous tag, they just added in a new one, this then turns in to a monster 1600 + lines of CSS for one site. Granted it’s only 45k in size but when you also have to load the JavaScript and the jQuery and the images, etc, etc, it gets a bit ridiculous.

When I was going through the file I came across endless hacks mixed in with the invalid CSS, the vast majority of the hacks were the good old star hack. Things like *margin-left:20px; for example. Don’t get me wrong these work great for IE6+ if there is a display issue, however this isn’t valid code. W3C will not validate your CSS if you are using hacks.

Not only was there star hacks but there was the older and not much used underscore hack something like: _margin-left:20px; which again targets only anything older than MSIE 5, which is pretty much pointless. Not only is it invalid according to W3C, but it’s also outdated.

First job, strip out all of the invalid code and move to a new CSS file. Fix all 39 other validation errors first and get it valid according to W3C, then recheck to see if the hacks are needed.

If you are at all interested in Web Standards then valid code should be one of your top priorities, this might mean spending several hours going though the code line by line to fix some errors left behind by junior members of the team, but in the end it might save some time in downloading the content and be more readable for editing later on. Once your CSS validates, then look to see what needs hacking further to look good in IE, but what you must do is put the IE specific CSS in its own stylesheet.

Why use conditional stylesheets?

  • You got problems, they need fixing’
  • Keeps your code hack-free and valid
  • Keeps your main stylesheet clean
  • Perfectly acceptable technique, sanctioned by Microsoft

So if you want to add in some IE only stylesheets just add this simple bit of code below into the of your document next to your other CSS call.

Target ALL VERSIONS of IE

<!--[if IE]>         <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]-->

Remember kids, Hacks are dirty and should not be used unless you really have to, otherwise just use a separate CSS stylesheet and you will create valid CSS every time. Providing you code it properly and always validate your code.

@Web-fonts

In my previous post I mentioned that I was going to post about @Web-fonts and why I love them. This is that post.

Bored with the standard fonts used for web development? Then look no further! @web-fonts is here to help. Kind of makes it sounds like a superhero…

Anyway, why should you be using @web-fonts when you can just use images? Well, for a start these fonts are readable by the search engines, so they are SEO friendly, plus CSS is able to adjust the fonts to your liking without having to go back to Photoshop (other editors are available) to change the image and re-upload it, those days are now gone!

To start using these new fancy fonts on your designs I would check out Google Web Fonts Here you will find a huge list of font that are available to use, FREE of charge.

First thing is to pick a font, once selected simply click the “use this font” tab and copy the <link href=’http://fonts.googleapis.com/css?family=Redressed&v1&#8242; rel=’stylesheet’ type=’text/css’> line into your <head>

Then all you need to do is call font-family: ‘Redressed’, arial, serif; on any section of your CSS you want to display the font.

Job done.

For a working example I made this site a little while ago, while it’s a work in progress and I’m not fully sure I am happy with the font selection, this page will give you an idea of how it works and displays. Feel free to take a look at the code if you fancy, just don’t nick it, ok?

http://applegatestudios.co.uk/html5/

It’s been a while…

It’s been quite a while since my last post, of which I apologise.

I have recently started working, on a contract basis, for Intel Corporation (UK) Ltd. As a Web Operations Project Manager, this role as you might expect is keeping me busy during the day and most of my evening is spent in the gym.

To be honest most of the time I forget that I even have this blog, and probably no-one really (apart from Neil) reads this drivel that I write anyway.

Anyway, my next post is going to be on Web Fonts, how to use them and why I think they are awesome.