Hello everyone, I’m Adam Roberts – A designer and developer. Today I would like to show you a really simple and effective way of switching style sheets depending on what time it is.

After seeing a new article on Smashing Magazine this morning called, Style Switchers Contest Results, I immediately thought of new way around this. It is especially effective for night and day themes however it is your choice of what you do theme wise.

Ok so let’s begin. What we need is 3 themes, for example, morning.css, day.css and night.css. Before we apply our style switcher, you need to make sure that you have all three of these themes coded and functional.

It is preferred that each theme has it’s own style sheet as well. This way the switcher will function properly. Also please try and make it so you have just 1 index file. As usually, only images will change for a new theme.

We now need to rename your index.html to index.php, as we will be applying a little piece of PHP code for our switcher.

We will be switching the theme depending on the time of day. Which like I said above, it is effective for night and day themes. Here is what we do, and I will try and explain it the best I can.

In your index.php, you should have a piece of code such as,

<link rel=”stylesheet” type=”text/css” href=”” />

Now this is all what we are editing. Notice that I left the href empty. Now for the switcher…

<link rel=”stylesheet” type=”text/css” href=”
<?php
$hour = date(”H”);
if ($hour < 12) echo “morning.css”;
elseif ($hour < 20) echo “day.css”;
else if ($hour < 4) echo “night.css”;
?>”
/>

First we define the hour. The hour of day is determined by the user’s computer.

The rest is simple. If the hour is before 12 noon, then we will use the morning.css stylesheet, however if the hour is before 20:00 (8pm) then we will use the day.css, but if the hour is before 4 (4 am) we will use the night.css stylesheet.

So that says, between 4am and 12 noon we use the morning theme. Between 12 noon and 8pm we use the day theme. And finally between 8pm and 4am we use the night theme.

You can change the hours yourself easily. These figures that I have provided are configured for when the sun rises and falls in the United Kingdom. Other countries might be slightly different, so you change this as you please.

I hope you enjoyed this tutorial, I may eventually make 3 themes and give you a more detailed explanation in the future.

Edit: We need to give full credit to Harry Roberts for this solution!

Hi, I’m Harry Roberts – a 17 year old web developer from the UK. I specialise in standards compliant, accessible and usable front-end development.

This article offers in no particular order the simplest yet often most effective tips for beginning life as an ‘accessible developer’. This list is by no means the be-all-and-end-all of building accessible sites – it is more of a starting point.

1) Web Standards

Probably the most obvious aspect of accessible web development is adherence to web standards. This means using CSS to separate content and style, tableless layouts and semantic markup. All these features provide a solid starting ground for crafting accessible sites.

By using external stylesheets to style a page’s elements users can disable CSS and be left with nothing but the content – arguably the most important part of any site. This coupled with not using tables for layout means a page can be brought down from a heavily styled document, to its bare bones text.

2) Validation and DOCTYPE

There is an age old debate as to whether validation is that important. In my eyes, and in the eyes of many other developers worldwide, it is. Valid markup means pages are rendered in standards mode, invalid markup means browsers try and interpret and render code themselves, in quirks mode. This can lead to undesirable results and simple errors such as an unclosed tag can have a domino effect on subsequent elements.

The correct DOCTYPE will instantly tell a browser how to render a document. It is a good idea to validate your xHTML documents in the 1.0 Strict DOCTYPE, or if that isn’t possible for whatever reason, 1.0 Transitional as a last resort.

3) Images

Images are a fundamental part of web development; however they can and should be used sparingly if a more accessible method can be put into practice. A great example is web text, where the font choices are limited and some developers are required to use an image of custom text, do not insert it as an <img /> element. Instead use image replacement. By far the most accessible means of image replacement is the Gilder-Levin method. This solution remains accessible when styles and images are disabled either independently of each other, or at the same time.

Another thing to look out for when using images for content backgrounds is to ensure that text is still readable when images are turned off. Always try and specify a background colour when applying a background image through CSS.

4) Printed Documents

Some users are required to print web pages for a number of reasons – this may be simply to read content offline, or because they need to through having a handicap or disability. One thing to realise when reading printed web pages is that links are (obviously) useless, and as such users can’t see where they point. A printed page can’t have its links followed out or the hrefs read/seen.

Bearing this in mind, any printed web page is taken out of ‘link context’ as soon as its interactivity is lost. A great CSS trick to alleviate this problem is the nifty :after pseudo-class:

a:link:after, a:visited:after{
content:"(" attr(href) ")";
}

By putting the above in a print specific stylesheet, the href attribute of any links are inserted after the <a> tag of any hyperlink. This means users reading printed sheets can see where links point.

In the same respect, <abbr> elements are useless to users reading printed documents as they actively require a mouse hover to display the abbreviation’s title tag, so by adding the following to your print stylesheet you can show users reading printed pages what abbreviations stand for:

abbr:after{
content:" ("attr(title)") ";
}

I put both of the above into use on my CSS Wizardry links page.

5) target=”_blank-faced”

First off I must admit that I myself have only recently stopped using the target=”_blank” attribute in my markup. This is for two reasons; a) it doesn’t validate under the Strict DTD and b) it is by all accounts an inaccessible practice. The reasoning behind this is that opening new tabs, or heaven forbid, new windows (yes IE6, I’m looking at you) disrupts the users flow, and also creates a ‘fresh’ back button. Less savvy users are suddenly confronted with a new window and no obvious means of returning the where they came from. This can be both confusing and frustrating.

I can understand why developers still advocate the use of target=”_blank”, after all, you don’t want users navigating away from your site when you could just set them up browsing an external link in a new window, leaving their session on your site still active. That is very true, but I look at it like this: if your site is worth them returning to they will hit the back button until they get back, if they don’t think it’s worth returning to – your fault!

6) Tables

Ok, hands up who didn’t see that coming. Those with their hands raised please leave now. Tables are the hottest of hot potatoes when it comes to accessible development. The cardinal rule is never use tables for layout purposes because this is one of the most inaccessible practices to have made it through from the nineties.

First off, tables for layout mean bulky code. Why nest dozens of <td> elements when a little semantic <div> work will work wonders. Properly implemented xHTML and CSS means semantic pages, which generally load quicker, contain less superfluous markup (which in turn reaps SEO benefits), and code which is infinitely easier to understand by both humans and screen readers alike.

Secondly, tables maintain their structural integrity when styles are turned off, so the page isn’t as easy to read when CSS is disabled. In terms of styling, a page created using semantic xHTML and CSS with styles on should generally be regarded as ‘all’, the same page with styles turned off should generally be regarded as ‘nothing’. A page built using tables for layout with styles off occupies the awkward middle ground between all and nothing – which is of extremely little use to anyone.

That said, tables are perfect for tabular data of all things. Who would have thought?! Do not rule out tables for displaying data such as a table of results, or a table of prices. A lot of developers try and create tables for displaying data by using lists and other CSS tricks. This completely defeats the object of CSS and xHTML – a CSS table is not semantic, and when styles are disabled they break shockingly. Buy CSS Mastery and learn how to code semantic, accessible and standards compliant data tables.

7) Flash

Once again, this was a dead cert in this list. Flash is a fantastic tool in the web developers’ arsenal. It is however inherently inaccessible when misused. As a general rule sites should not be made in 100% Flash. If they need to be, a HTML equivalent should be provided (adhering to the rest of this list, naturally).

Flash as a ‘bells and whistles’ addition should also be carefully considered when developing web pages. You need to consider the importance of the Flash in context of the document, and then decide whether or not an alternative should be provided. For example, a Flash banner ad need not have an accessible equivalent provided as it’s often of very little relevance to the content the user is after.

Headings

The heading tags are nothing short of a Godsend for developers wanting to craft accessible, semantic and meaningful documents. If you create an unstyled web page containing all the heading from <h1> through to <h6> in numerical order you will immediately see how a hierarchy is formed. Use the heading tags to apply a visual structure to your pages makes it easier to scan and ultimately more usable.

<h1> headings carry more weight than a <h4> heading, so bear this in mind when applying semantic emphasis to parts of web pages. For example, the <h1> should define the main title of the page and should be used once. <h2> tags obviously carry the next weight and can be used more than once, but not too much, perhaps defining sub categories of articles. Next is the <h3> which can be used more still right through to the <h6> tag. It is unlikely you will ever really get to the <h6> tag, but knowledge of the heading tags uses allows you to know when/where to use it.

9) The em based layout

A great way of adding to the usability and flexibility of a web page is to style it in a relative size such as ems. The nature of ems and their relative sizing mean that they resize flawlessly. Defining a <div> width in pixels give it a fixed width, styling the same <div> in ems allows the <div> itself to be zoomed.

Typically an em is defined as the width of the letter ‘m’ at any given type size. As most browsers’ default text size is 16px, one em is also 16px, thus 2em is 32px. This is not the simplest number to work with, so to convert one em to 10px instead of 16px apply the following CSS:

html{
font-size:16px; /* To make sure the default font size is 16px */
}

body{
font-size:62.5%; /* 62.5% of 16 = 10 */
}
div#wrapper{
width:90em; /* This equals 900px */
}

However, if you have a <h1> with a font-size of 2em and child element will be twice as big if you specify a new size in em:

h1{
font-size:2em; /* Equals 20px */
}

h1 strong{
font-size:2em; /* This equals 40px because it is 2 times the size of the parent */
}

Holding ctrl and scrolling the mouse wheel will now zoom not just fonts, but anything styled in ems – whether it be a <div>, <ul>, padding, margins and borders!

10) JavaScript

JavaScript is a fantastic way of adding further interactivity to web pages, whether it be flyout/drop-down menus, animated content such as accordions or slideshows/lightboxes.

What you must bear in mind however is whether or not the page/element will function without JavaScript – graceful degradation. The most critical of these are flyout menus or any JavaScript enhanced navigation. Navigation is undeniably the backbone of any website and if your navigation will not work without JavaScript then neither will your site. Make sure that anything reliant on JavaScript for aesthetics will still be usable (even if it is ugly) with JavaScript disabled.

There you have it – The Top Ten Tips for getting your accessible web development under way.

There is no way to crop wordpress medium images to exact size without editing the soure code. If you want to crop wordpress medium images to exact size as specified under Settings -> Miscellaneous -> Medium Size then open wp-includes/media.php in your favourite editor.

Search for line 191:

$newimage = imagecreatetruecolor( $dst_w, $dst_h);

Change $newimage variable to:

$newimage = imagecreatetruecolor( $max_w, $max_h);

Voila, we’re done!

1. Can you tell us a bit about yourself, and what you do?

I’m a college student who just loves the internet and business. I have been using computers since I was ten and running my own businesses since I was just a little older than that.

2. So what type of businesses do you own? What are your passions and skill set?

Naturally my heart is in the web hosting industry. For many years than I can remember I’ve been involved with web hosting. I wrote my own automation script once upon a time for my friend who ran a hosting company; that’s what got me started in this business and now I wouldn’t change that for the world. I don’t do much php coding anymore, however I still know a few bits, and that goes along with css and xhtml.

3. Well, I see you run EarnersHost.com, how’s that going? Is that a full time job for you? Any plans you can share with us?

EarnersHost has pretty much been running slow (but soon is all about to change); and that’s to be expected from having our site down for many months. The main reason for not relaunching any sooner is mainly just because we’re not ready. We have a large service list and we’re looking to recruit some support officers too. Which is just taking forever to get it all done. We don’t want to launch until we’re 110% finished with our website. EarnersHost you could say is my fulltime job, I go to college during the day and work from my iPhone/Laptop to respond to tickets etc. I usually stay up to early hours of the morning working with clients.

4. I see so many hosting sites around, what makes yours different? Why should I host with you over This* or MT?

I do hosting because I enjoy it. While we have a strong customer base; I don’t think there is a unique reason to join EarnersHost. We’re just like anyother hosting company in terms of excellent servers, uptime, connectivity etc. However we are different in support and making sure our customers are happy with their product. I think if you ask anyone about our business I’ve began to notice that good support is a common positive. We’re just a small business providing solid shared solutions, but in the future we hope to have a few unique products of our own to include with hosting; such as freelancer project management tools/invoicing tools to use also. Which I think will make us stand out in the future.

5. Hosting is incredibly tough market to enter. Any suggestions to someone who wants to have their shot at the market?

Stay clear… Nah I’m just kidding. It’s something I enjoy which is why I think I’ve had some success (tiny compared to other companies) but I think if your heart is in what you do, you’ll go a long way, and that goes for anything else than hosting too.

6. So any chance of some sneak peaks of the new site?

7. Well you seam to have got the hosting section mastered. What about new projects? Any other stuff you have, anything your planning?

I’ve been planning to diversify and open just a VPS business. There is becoming a high demand in VPS hosting and it’s something I’d like to venture into. I also planned to open a business article site offering tips and interviews from business owners on how to start-up your own business; specifically aimed at young people. However, that was a year-ago and still plan to launch it.

8. Young people? Well your pretty young, 18 going on 19. Do you think that in you’re early years being ‘young’ has made things harder for you? How do you think people (12-20) could overcome these boundaries?

I wish I only just got into this now. It has been stressful on my younger years and having so much commitment and responsibility at 12-15 wasn’t right for me. I wouldn’t recommend anyone younger than me to get into hosting; I’m lucky to have a secure financial and experienced (family have worked in networking/IT for years) background to back my business. Younger people starting younger than me, good luck!

9. I would agree with you, I say leave the hosting business to the older people who can dedicate there time to it. What do you think about just the recreational coding, web dev and business management?

Business management has to be the most fun out of those. While I used to enjoy coding and developing things on the web, the way things were a few years ago are a lot different to now and I couldn’t possibly get back into designing or coding again, probably because it doesn’t interest me no longer. But those who do coding and the like good for you! It sure was fun when I did it and wish you the best of luck. Business management is where my heart joins hosting; business means you can do anything you like and get paid for it

Quick Fires (1/2 word answers)

Fav website? (not owned by you)
www.facebook.comTools?

Textmate Final Cut Pro
Inspirations?
Aventurehost
What annoys you? (webdev wise)
People who don’t code a website and use their common sense.
Mac/Windows?
110% Mac
IE/FF/other?
FF3 and Safari
Other hobbies/interests?
Vide Editing/ Music Production / Socialising

I’ve got a final two quick questions; If you could speak to the entire web development community, in one place – what would you say? For the next person we interview whats one question you would like asked – remember this could be a designer, coder or developer?

If I could speak to the community in one place I’d ask them why everyone seems to always give negative comments about designs these days, nothing is ever good, in my eyes every design I see is unique and shows passion from the designer, and it’s really annoying to see people put others down, so I’d ask them to stop, and give better criticism, because most of the time they don’t tell them how to improve it, it’s simply just not good enough apparently. I would also raise the issue on pricing in the marketplace and try to get everyone to settle on a sensible price for things; than selling websites/domains for stupid unreal prices.

The next person I’d like you to ask them how on earth they do what they do, how do they fit it in with everything and do they find their hobby/full-part time job takes over their life.

Well its been a good 2 and a half months that this site has been up now and it’s growing like a wild flame! We’ve had 25 or so quality articles / tutorials and about 7 miscalaneous posts. The site has been maintaining 1k uniques a day and we’ve sold our first ad this week.

We just hit the 200 mark on the RSS count, and well, went a bit above. The count rests at 214 now, an accomplishment I think I can be proud of.

The contest. The contest isn’t really going as well as I thought it would of. With only 2 entries, I thought I’d be upto around 15 now. I’m expecting a few more entries within the week but I’d love if you could all submit an article, or at the least subscribe to RSS by email, you can win some pretty awesome prizes. Things are doing a bit better with the RSS by Email, with 18 entries, but still, it could be a couple of hundred seeing how easy it is. Please check out the contest!

So we’ve got a new theme for the site, it’s alot easier to read off I think. The styles are better, and we’ve now got a user link feed! Try it out Some free promotion for your site. I’ve got 3 more ad banners to fill, I’d prefer some of yours than the ugly default ad by PerformancingAds.

Whats to come?

• More list articles
• A few more dedicated writers
• Free wordpress themes
• Maybe, just maybe a Jobs, Marketplace and forum section.

Some final questions to you readers:

• What types of articles would you like more of?
• Like the theme or hate it?
• Any feature suggestions you have?

A strong portfolio is essential in order to become a success in the web development business. Fact.

Your portfolio is a client/companies first impression of you, your sales pitch. Fact.

Your probably havent thought thoroughly about exactly what makes up your portfolio and the impression it gives an audience…..Fact.

Its a common mistake amongst developers and designers to overlook the impression a website design and its content gives on an audience. On any site, you can often find elements which arent as thought out as they could have been – yet you overlook them; they are insignificant. On a portfolio however, these mistakes could be costing you clients and money.

Dressing your site up with all manner of features, fronting a crazy design and slapping your work in the middle of it all is extremely common. As its been said a thousand times – simplicity is the key. Why not strive for something better, something as good as this from ElectricPulp…

Design:

This is the ulimate first impression. The page loads and your potential clients instantly draw a subconsious conclusion about you. A design loaded with effects, filters and gradients might look fabulous but does it really fit the purpose? Have you just shown a potential employer, that yes you can design – but you cant design to fit a purpose. Suddenly you can see your photoshop magic may well be working against you.

A portfolio should be simple, easy to navigate, let the content speak for itself – whilst maintaining a little “wow” factor, a sparkle of inspiration. If you’ve got tons of effects on your page they often get mixed together and go un-noticed. Restricting yourself to maybe one or two effects will make them stand out against a plainer backdrop. This will show a potential user, yes you can stick to task and yes you can get creative.

However obvious it may seem – keep the navigation simple and extremely visable. These 2 examples use color contrasts to stand out.

So how could you limit yourself? Heres a few ideas…

• Javascript slide bar.
• A lightbox plugin.
• Use colour contrasts to guide the user around the page.
• A few images (that you have taken) – this underlines your creative mind.

Just sit down and think “keep it simple – keep it special“.

To summarise, the motto to design your portfolio from should be “functional first“. It should never leave a user wondering where something is- you should cover all the bases. How do you make it different from every other portfolio? Thats where you drop in a few touches of your creativity, to bring it to life.

Content:

So you’ve nailed a nice, simple yet elegant design for your portolio, in order to let the content shine by its own merit. This is where the problem lies for most developers – organising your content. Just because your doing something more creative with your CV/Portfolio it doesnt mean you should ignore the basic structural guides applied on other mediums.

For me as a prospective employer, a web design portfolio should not re-write traditional practices; it should apply creativity to the guidelines and structures that are commonly used.

In essence what is being said here is – remember to keep a solid structure of content. Keep areas of your portfolio in clearly organised sections, whilst always having a clear navigation to find what content you need. It has been said that you should never click more than 5 times on a website to find the information you want. For a portfolio I think this number should be 2-3. With potentially hundreds of applicants to look through a prospective employer wants information fast – if they can’t find it, your not considered. This should be motivation enough for you to establish a clear heirachy of content.

Contact details – This is so important for a portfolio. I personally like it when contact details are accessible or visable on every page. This gives potential users no reason not to contact you. In the world of business time is money – if your wasting their time, you wont get the work. Obvious contact details, in the header signifies the importance of them (see image below).

Summary:

I’ve highlighted a few ways in which you can improve your portfolio websites, to make them more functional and accessible but not run of the mill. Planning is the greatest prevention. Clearly plan your portfolio, invest time planning and revising everything from the impression you want to give, down to the organisation of work, through to the colours of links. Heavy planning may seem a lot of work, but it’ll ensure you cover as many bases as possible.

To finish, never underestimate your portfolio. Its your most important document as a web developer – so therefore deserves respect enough for good planning and well thought out execution.

If your a web developer looking to add some extra functionality to your clients website and look good while your at it, then than an auto suggest search bar is something you might consider. Ever since ‘Google Suggest‘ rolled out the labs, hundreds of clones have sprung up on a variety of websites, each with a slight twist on the original. This article is going to show you how to make your own ‘auto suggest’ search bar in three easy steps.

This article assumes you have a solid grounding in HTML, CSS, Javascript and PHP. It is showing technique, not teaching you the language.

Step 1 – Good Form

The first step towards making our finished product is to develop the front-end of the site. This is basically going to consist of a HTML form containing an text input dialog, a submit button and a placeholder for our suggestions. With that in mind, lets look at the code:

<html>

<head><title>Auto Suggest</title></head>

<body>

<form action="#" ><input type="text" id="inputtext" />
<input type="submit" name="submit" value="Search" />
<div id="suggestions"> </div>
</form>

</body>

</html>

As you can see we have our text box labeled ‘inputtext‘ <input type=”text” id=”inputtext” /> and our placeholder labeled ’suggestions’ <div id=”suggestions”> </div>. When we come to write the Javascript we can use these id’s to access them. That’s all that’s needed for now, so lets move on to step 2.

Step 2 – Script Me

Right now our page is static and ultimately useless. However, with a little Javascript magic it will start to come alive. Before we right the code, lets take a step back and think about what we need to do. Every time a letter is entered into our form we want to send a HTTP request to the server and check if the string in the form matches any of the results from a preset list. If it does we want to write the results to our web page. So the first thing we need check if a letter has been entered into our text box. To do this we can use the onkeyup attribute to call a Javascript method every time a new letter is entered. So our HTML now looks like this:

<form action="#" >

<input type="text" id="inputtext" onkeyup="suggest(this.value)" />

<input type="submit" name="submit" value="Search" />

<div id="suggestions"> </div>

</form>

So now, every time a letter is entered the Javascript function ‘suggest‘ is called, passing the value in  the text box as a parameter. That’s all well and good, but the suggest function doesn’t exist yet, so lets create it.

var xmlHttp;

function suggest(input) {
        xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null) {
        alert ("Browser does not support HTTP Request");
        return;
    }
var url="suggest.php";
    url=url+"?query="+input;
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
} 

function stateChanged() {
     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
         document.getElementById("suggestions").innerHTML=xmlHttp.responseText ;
    }
 }

function GetXmlHttpObject() {
    var xmlHttp=null;
    try{
        xmlHttp=new XMLHttpRequest();
    }catch (e){
        try {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

Don’t be scared! Although it looks a lot it is in fact very simple. the GetXmlHttpObject() is our standard function to create an XMLHTTPRequest object that works across all browsers and the stateChanged() function simply receives text from the server and places it in our ‘suggestions‘ placeholder. The suggest function itself is also very simple to understand. Basically, it creates a new XMLHttpRequest object and stores in the variable xmlHttp. After some basic error checking, we tell our application to run the stateChanged() function when there is a change of state. The URL is then created from the text inputted in our text box and the HTTP request is opened and sent with this URL. Now we have all the client side code completed and functioning, the last thing we need to do is write our PHP file.

Step 3 – Server Side

All we need the server to do is check to see whether the query sent matches anything stored in a file, database or anything we want. In this example we are going to just fill an array with countries from around the world and then see if the query matches them. We can do this as follows:

<?php

$countries[] = "Afghanistan";
$countries[] = "Albania";
$countries[] = "Algeria";
$countries[] = "Azerbaijan";
$countries[] = "Bahrain";
$countries[] = "Barbados ";
$countries[] = "Belgium";
$countries[] = "Canada ";
$countries[] = "Chile";
$countries[] = "China";
$countries[] = "Egypt";
$countries[] = "Germany";
$countries[] = "India";
$countries[] = "Iraq";
$countries[] = "Ireland";
$countries[] = "Mexico";
$countries[] = "Pakistan";
$countries[] = "Poland";
$countries[] = "Sri Lanka";
$countries[] = "Sudan";
$countries[] = "Thailand";
$countries[] = "United Kingdom";
$countries[] = "United States of America";
$countries[] = "Zimbabwe";

$query=$_GET["query"];

if (strlen($query) > 0) {
    $suggestions="";
    for($i=0; $i<count($countries); $i++) {
            if (strtolower($query)==strtolower(substr($countries[$i],0,strlen($query)))) {
            if ($suggestions=="")
                $suggestions=$countries[$i];
            } else {
                $suggestions=$suggestions.", ".$countries[$i];
            }
        }
    }
}

echo $suggestions;

?>

All this does is populates an array with a variety of countries (of course, in a real world application this would be populated from a database or text file) then gets the query that was passed to it. The code following this simply checks to see whether the query passed matches anything in the array and adds it to the ‘suggestions‘ string. At the end of the script the suggestions are outputted and received by the Javascript.

Finished… nearly

So now we have a fully functioning auto-suggest feature. Right now it looks a little bland but with a little CSS and imagination we can create something that really looks the part. By slight modifying the code and adding some styling I came up with this example. Give it a try yourself and post your results in the comments, we would love to see them!

I am going to show you how to use illustrator and Photoshop to create something similar to the retro paper strips as seen on http://adaptd.com .

I noticed that this site had been popping on few design galleries and was featured on Nick La’s http://www.webdesignerwall.com in the post the trends of 2008 (mine is on there too http://www.ryandownie.com). And I really liked the design so I decided to see if I could make something similar.

Please note that this article is not aimed at beginners but towards intermediate/advanced users as I am not going to baby walk you through step by step.

Here is the final image that we will be creating.

1. So open up Adobe illustrator and open a new document. It can be any size that you like. I was going to do 1100px width but I have been told the images can only be 450px wide on here and i didn’t want to take you a new window.

2. Draw six squares all the same size but in different colours. The colours will be the colours that we want the strips to be. We will use these to create art brushes to use.

3. We are going to create an art brush for the red colour. Select the red square and with the brush panel open click on the drop down on the left side of the palette and select new brush, and then select new art brush.

4. Now we have the art brush grab your pen tool and draw where you want your red line to go. Click on the brush that we have just created and turn off the foreground colour. You might have to change the stroke settings to something smaller depending on how big your square was.

5. Repeat the same methods for all the other colours until you have all of them done. Play around with the pen tool to create the lines and also change the arrangement of the lines so that they overlap on themselves.

6. Now we have them all done we need to add some texture to them as they look a little flat. Luck for us that the great people over at http://bittbox.com have some there for us to use freely. Download the Grungy paper 4 version from http://www.bittbox.com/freebies/free-high-res-grungy-paper-textures.

7. Now we need to head over to Photoshop as illustrator is not the correct tool for this job. Copy your lines over in to a new document in Photoshop by anyway that you feel at home with. Also open up the paper texture and add it to the document. We don’t need to resize it because it wont be staying.

8. Ctrl/Command click on the lines layer so that we get some marching ants up and inverse the selection. Ctrl/Command +shift+I and hit the delete key. This will just leave us the paper with the outline of the lines now.

I hope that you have enjoyed my article and that you learnt something new. Please check out my site and blog for more upcoming tutorials and posts.

In this review, we’re going to be looking at a new screenshot application, called grabUp. Its a new application, having been out for a few months – remaining mac exclusive for the time being (windows version on the way).

In the world of web development, we’re always needing to send previews to clients, fellow developers and to post on community forums. This is where grabUp comes in. You can continue your usual method of screen capture, and select an area of the screen you wish to grab. Then…grabUp automatically uploads this screenshot and provides you with a link, almost instantaneously. Nice – timesaving, easy to use and free!

Features:

In all honesty, there isn’t much lacking in this mac only version of grabUp. The application is based on simplicity and cutting out the annoying features you really don’t need. It does what it says on the tin extremely effectively – collects screenshot, uploads it and provides you with a link.

However there are a couple of things missing. Firstly is the ability to upload to your own web-server (uploads go to the grabUp site). However this is promised in a future version (premium).

Secondly, windows. There isn’t any windows support just yet, but again its promised. Unfortunately at the moment a huge chunk of developers cant use this, a little frustrating.

Features Rating:

Price

Its free. Completely free. We love the little tools that are just so useful, and these are made better by not costing you a penny. However with all products a premium version is just around the corner, with a couple of different options (own server hosting) – but this version is free.

Price Rating:

Design

The design of the whole package is rather exceptional.

The website, the download and even the small task-bar icon feels professional, clean and non-obtrusive. Instructions are easy to follow, everything is highly simplified and a joy to use.

Design Rating:

A simple, free and extremely useful little application. You don’t realise quite how useful it is, until you try it. Go on – download it.

Overall Rating:

Well, I guess I’m going to work backwords. There are three layers to the frontend; behaviour, presentation and markup. We’ve done behaviour so we’re onto presentational now. CSS Frameworks have been all the buzz lately, we’ve had ones that use python ways of code then regenerate it as css, ones that are specifically for forms and an awesome one which is just for styling print!

Personally I find frameworks to much hassle, I have my own little framework but that is only really 20 or so lines. I might share it with all of you in the coming weeks if you would like it. Now here they are!

1. 960 Grid System – The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

2. Blueprint CSS – Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

3. Hartija – The owner of Hartija describes it as a “universal Cascading Style Sheets for web printing”. It’s extremely customizable and very user friendly.

4. Formy CSS – Formy is mini CSS Framework for building web forms.

5. Clever CSS – CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is.

6. SenCSS – SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset.

7. Elements – Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy. Read the Overview for more information.

8. LogicCSS – The Logic CSS framework is a collection of CSS files and PHP utilities to cut development times for web-standards compliant xHTML layouts.

This is just the tip of the iceberg, there are tones more css frameworks out there. I plan on releasing one for this site. Finally, does anyone have any suggestions of what I could produce? I will try send out a reward to the idea I pick.