You are viewing posts from the . brightonClick to view all posts
Written by Aaron Charlie – Mon 23 May 2011
CSS3 and HTML5 are changing the way we use the web, and how programmers and web designers build sites. Web browsers are quickly becoming compatible with HTML5 and CSS3's new tags and features, which are opening up a whole new world of possibilities.
One of those possibilities is the use of Responsive Web Design. In a world where mobile web browsing is ubiquitous, Responsive Web Design techniques allow designers to use flexible grids and page layouts in sites that will respond to user behaviour and adjust automatically to the user's browser capabilities and screen resolution of their device (meaning you don't have to make a different version of your site for every mobile phone and tablet out there). We'll be writing more about Responsive Web Design here soon (so watch this space!)
To give you an idea of some of the exciting new things you can do with CSS3 - here's our favourite 5 new features in CSS3, along with links to relevant CSS3 Examples.
The new border-radius feature in CSS3 comes as a great relief for anyone who has had to create rounded corners with corner images and extra DIVs: all you need is a few lines of CSS. It's not yet supported by IE7 and IE8, but you can use a CurvyCorners Script for these browsers.
Written by Aaron Charlie – Thu 05 May 2011
There are many different ways to draw maps - including photographic techniques and of course old fashioned hand drawing. However if have some Adobe Illustrator skills, using its vector drawing tools is a great option, as it means your maps will be fully scalable - you could blow it up to A0 size without losing any quality. Within Illustrator there are many
If you would like to learn more about Illustrator, then come along to our Illustrator Training course in
Brighton, Sussex. If you already know Illustrator quite well, you may want to have your own private Advanced Illustrator Training. We also run regular Photoshop Training and InDesign Training courses.
An Illustrator map will provide artwork which is razor sharp, scalable, supporting industry standard colours such as Pantone for print and HTML for web.
The final format you should export your document in is .EPS for print or GIF for the web. To insert the map into PowerPoint, you might export the map as a JPG at high to maximum quality.
Here is an example of our finished map
As you can see it does not pretend to have any cartographic or scale accuracy but it is very clear to read and can be simplified to clearly show the way to an office or point of interest, etc.
Tracing over a scan
If one wanted to preserve the accuracy of a previously drawn map, one would need to open a photographic version of another map (a screen grab or a scan), define the layer as a template layer, create a new layer for the new artwork and draw over the scan, keeping the curvature of the roads perfectly accurate. This will be the subject of a further lesson.
N.B. Scanning a map requires permission from the copyright holder.
Start a new document
File menu / new or (CTRL+N/ CMD+N)
A5, landscape, no bleed, print or web profile as required by you.
The Roads and Roundabout
Illustrator draws lines in a number of ways: the line tool, the pencil tool and the pen tool.
Use the line tool for separate straight lines
Use the pencil tool for freehand and often wobbly lines
Use the pen tool to give continuous lines of accurate corners (a click), or lines of a precise curvature using industry standard vectors (click drag).
Colours in Illustrator are applied to the Fill (the inside colour of the object) or the stroke (the line going around the edge of the object).
The roads in this map will have a stroke of either black or white, but a fill value of none - the “no entry” colour in the toolbar, the swatches or colour palettes.
It is best to draw the roads with a stroke of one point black.
Draw four or five roads, which intersect at the centre of the map.
Make them extend further than the finished frame of the map.
Notice that when you use the pen tool, a click creates a corner point whereas a drag creates a curvature: drag down for an upward curve and vice versa.
Make a roundabout using the ellipse tool - no 3 in the shape tools. Using the alt key will originate the road from its centre, not from its first clicking point.
Your artwork should look something like this…
Increase the stroke weight to 13 points and make sure your artwork has a fill value of transparent so that the curves in the roads do not fill in with an opaque solid colour.
Group all the roads (select all CTRL+A / CMD+A then group CTRL+G / CMD+G)
Copy (CTRL+C / CMD+C)
Do not paste (CTRL+V / CMD+V) as this will put a duplicate in the middle of the page; paste in front (CTRL+F / CMD+F) which will make a duplicate exactly in front of the previously copied artwork.
Set the stroke of the new roads down to 9 points and colour them white. This will give you 2 point pavements which neatly interconnect with each other!
Text on a Path
Paste in front (CTRL+F / CMD+F) one more time to provide a grid of black roads. When you click on a line with the third Text Tool (text on a path) the fill and stroke values of the roads will disappear and the type will take on the same direction as the roads, however curved or cornered.
Open the Type Character palette (CTRL+T / CMD+T) from the Type menu or the Window/ Type and tables menu.
Set the type size small enough to sit within the road and use baseline shift (bottom left in the character palette to a negative value so that the text sits in the middle of the road and not on top of it. I used a 9 point line with a minus three point baseline shift in the following example.
The first accurate setting of type characteristics will set a precedent for all of the other roads.
If you want text to go in two different directions on the same path at the same time you will have great difficulty. It is correct to duplicate the line itself; use one line for upward text (e.g. my M4/M11) and a separate line for downward text (my M1)
You will find three text I-beams: the start, the centre and the end point. By dragging the centre point around the end of a line, you can invert its direction.
Masking and the Frame of the Map
Group all the roads and the text: Select all CTRL+A / CMD+A then group CTRL+G / CMD+G.
Make a rectangle with the rectangular shape tool which is exactly the same size as the finished map. Please ensure that road ends protrude off each edge.
Give the box a fill value of 20% black and a stroke value of 4 points black.
Copy the box to the clipboard: CTRL+C / CMD+C
Select both the roads and the box.
Go to object menu/ clipping mask/ make to include the map and exclude the overlap. This is what is meant by a “clipping” mask – like scissors.
You will notice that the box no longer has any stroke or fill value rather similar to text on a path.
Now paste a copy of the box behind the map with edit menu/ paste behind CTRL+B / CMD+B.
Set the stroke value to 0 points but keep the fill at 20% black.
Next paste a further copy of the box in front CTRL+F / CMD+F and set the fill value to transparent but keep the stroke value at 4 points black to make a neat frame as in the following example.
File Formats for Export
The .EPS Encapsulated Postscript is the most used file format for the printing industry.
It is best practice to keep the version as the latest version with an 8 bit preview for on-screen visibility.
Most printing programs accept Illustrator’s .EPS file format, encapsulated Postscript. This format supports background transparency and is infinitely scalable to any size up or down.
I tis never pixelated as the file format is composed of mathematical vectors, lines and curves, and not pixels as found in photographs.
To output files for PowerPoint the bitmap .JPEG format is often preferred. You cannot save as to a photographic file format, but instead should go file menu/ export to JPEG, choosing high to maximum quality.
To output files for Web use, go to: file menu/ export for web and devices.
Here you could chose .PNG for web transparency, .GIF for logos or .JPEG.
You can choose optimisation values by choosing a 4-up preview.
Written by Aaron Charlie – Wed 20 Apr 2011
The navigation bar is an important consideration for your website, both in terms of design and usability. Visitors use it constantly to get to the different parts of your site, so if it is poorly designed or difficult to use your visitors may not enjoy using your site and be reluctant to return.
UPDATE: Since we wrote this post, LOADS more tutorials have hit the web! Check out our NEW 10 BEST jQuery Navigation Bar Tutorials post in our Free Resource section.
However a really well designed dynamic menu that's easy to use can make your site stand out from the crowd. One of the most popular ways of creating animated navigation bars used to beFlash - however with the popularity of iPhones and iPads now (which don't support Flash) no-one in their right mind would make their main navigation elements in Flash as it would render their site unusable on any device running iOS!
Read more about designing for mobile devices in our post about Responsive Web Design and the technologies it uses.
So - is this the end for animated navigation bars? Well - NO!
Enter jQuery and CSS! You can now create animated jQuery navigation bars that will display just fine on iOS. In some cases the full animated functionality might not work on mobile devices, but its still better than Flash which won't display at all!
In this post we’ve collected together a range of tutorials that show how to create animated jQuery navigation bars (with our thoughts on each one!)
Written by Aaron Charlie – Wed 06 Apr 2011
Writing or blogging about trending topics can be a great way to generate traffic (and links) to your site, provided that your content is high quality and that you pick the right keywords to optimise on.
The second half of that equation can be the difference between loads of traffic and very little, so identifying what people want to read about (and more importantly, exactly what they are typing in to Google right now) is paramount. If you can be among the first to blog on a trending topic you can get your site on the front page of Google quickly, and bag the traffic (what's more if you're the first, you're more likely to stay on the front page longer).
So - "how can I find trending topics?" At Friday's BrightonSEO conference Malcolm Colesgave a very informative (and highly entertaining) presentation about how he used a variety of tools to discover trending topics when working on the celebrity news site HolyMoly, including some very interesting data on the searching habits of the Great British male!
Here are our video highlights from his presentation, along with a summary of the tools discussed (more information can also be found on Malcolm's site here)....
We've split the video of Malcolm's presentation in to two parts - the first summarises the News Search Tools used to identify Trending Topics. The second, which I couldn't resist adding, is an example of how HolyMoly used these tools to exploit the search term 'Karen Gillan Underwear', which reveals some interesting (and very amusing) trends in men's searching patterns after they've watched Doctor Who!
A summary of the News Search Tools mentioned is provided below, but do watch the video as Malcolm puts them nicely in to context with examples...
News Search Tools Summary:
Which of these tools you use will depend largely on the sort of content you publish...
AOL homepage(look for the green hot searches box) - This tool is more useful for keyword selection as it provides details of exactly the searches users are submitting
AOL hot search blog (ignore the slow-to-update picture box and look for the topic boxes further down) - Scroll down the hot search blog to find most popular searches by category - e.g. if you often write about gadgets you can see which are currently the most popular.
Google News provides a good summary of what's in the news that day - if its in the news it means that people have already written about it - you won't be able to compete with the major news channels (unless you are one), but you may be able to find an angle on one of these stories for a long-tail search.
Google Insights - A very useful tool if you're writing about an annual / regular event. You can use Google Insights to see what people searched for last time and optimise for those terms. Remember for annual events to include the year in your title (although this has been over-used for major celebrity events like Big Brother and is no longer useful for these).
Webmaster Tools & Google Analytics - These are useful once you're up and running to help you to make the most of the traffic you're already getting and refine your keyword optimisation. Silicon Beach run regular Google Analytics Training and Advanced Google Analytics Trainingcourses if you want to learn more!
Experian Hitwise Data Centre - always a week behind - top 10 searches in various categories on a weekly basis - good for establishing general trends but less useful on a day to day basis.
Surchur - Auseful tool that aggregates multiple sources together to provide "The dashboard to Right Now"!
Major Newspapers often provide useful indicators of what is most viewed - e.g. Guardian Most Viewed and Telegraph (has a 'most viewed' box on each category page and also 'hot topics' right at the bottom of the page.
The BBC also has a summary of the most popular seaches hour by hour on the site
So - there are some really useful News Search tools out there to help you identify what's trending - but what do you do with this information to ensure you get as much traffic as possible...
Here's Malcolm's highly entertaining summary of how HolyMoly discovered a pattern of men searching for "Karen Gillan Underwear", and what they did to ensure they used this to their benefit to obtain maximum site traffic when the Dr. Who Christmas Special came around.
Written by Aaron Charlie – Wed 30 Mar 2011
HTML has had many incarnations over the years. All of these are similar, but successive refinements have been added over time to cope with our evolving understanding of the best way to make a website.
HTML5 has been on the radar for a while. As new browsers (including the new Firefox 4) start to support a wider range of HTML5 features, it's use among developers is sharply on the rise. To meet demand we now offer a regular public HTML5 & CSS3 Training course, which builds on the knowledge gained in our existing HTML& CSS Training Course.
We still get asked a lot of questions about the different versions of HTML - especially the differences between HTML4 and HTML5. Throw XHTML in to the mix and it can be a confusing picture for the uninitiated!
So - here's our quick summary of the three main types of HTML in use today...
New Online Courses