Yahoo! launched this FREE website tool a little over 3 years ago in September 2005, enabling webmasters to explore their own website with data they may have never had access to before. Yahoo! Site Explorer provides information about a site’s visibility in the Yahoo! search engine, what pages have been indexed and which websites are linking to yours.

A quick tour

If you’re not yet familiar with Yahoo! Site Explorer, then I would recommend using it on your web site. It’s a good resource for web site owners to gain insight into their site’s presence in Yahoo!. The tool shows which of the site’s pages are indexed and which pages are linking to the site (inbound links). If you go through the process of verifying that you are the site owner (authentication), then additional information is available, including what subdomains of the site are indexed by Yahoo!, when the Yahoo! web crawler last visited the site, and additional site metadata such as language. Detailed information about Site Explorer can be found in the Yahoo! help area. Note that Yahoo! also recently announced that normal queries on their search engine using ‘site:’, ‘link:’, ‘linkdomain:’ will be redirected to the Site Explorer results page.

Moral

Website managers should take every opportunity they can to ensure their site content is well represented in the major search engines. Site Explorer is a useful tool that provides insight into a website’s visibility in Yahoo!. Considering the fact that use of Site Explorer is free, it’s well worth the time spent to authenticate your web site with Yahoo! and put this valuable tool to use.

“Good photographs are not taken by a good camera but by a good photographer”

It is incredible to think that Jeff has been at this hobby for less than a year, the quality and craftmanship he demonstrates belies his limited time at this game. Thankfully he caught the FLICKR bug and uploads his work there for all to follow.

You would be hard pressed to find a more accomplished portfolio on professional HDR, B&W and wide angled photography. Enjoy this small collection from Jeff’s meteoric collection:

Jeff doesn’t give away his secrets on how he captures his shots, but one can make calculated assumptions as to the processes (pre/post capture) he adopts in his workflow. This shot is one of my favourites, see how he has captured the child’s amazement. The stillness is highlighted further by the long exposure Jeff has used, around a second, with the blurred shape of the adult walking behind the boy demonstrating the technique perfectly. A long exposure enabled a lovely bokeh from the lights on the steam engine, the black steam to feather off into the sky as dawn hits. The composition is perfect and you get a real sense of scale from the capture from the small children standing next to the steam engine. Every capture should tell a story, with the title ‘generations’ Jeff has certainly done that.

Picture within a picture

Jeff demonstrates how sometimes a single shot can capture more than one view, and with selective cropping you can see what he means.

Jeff: Sometimes an image can present an alternative view. I don’t remember doing this before but it is always good to try something new. A half frame crop which I thinks adds character to the lighthouse and house below.

Using Light and Filters

Light in photography is arguably the most important element. The Golden Hour is a great time to photograph a scene, below is an example of a simple composition brought to life by the light. Jeff cleverly introduces a Neutral Density Gradient Filter to limit the amount of light captured over a gradient through the picture and to give the sky a deeper shade of blue.

Jeff: A quarryman’s hut in Portland bathed in a dawn glow. One of the first times I used an ND Grad filter coupled with multi exposures. The composition is set at ninety degrees to the rising sun and a halo has been reflected in the sky. Thought about removing it but it is not that obvious that it detracts from the image. Love the horizon and cloud formation here.

Revisiting a scene

Jeff demonstrates how for he has come since first starting out in HDR. He uses a specialist piece of software called Photomatix to combine his multiple exposures of the same scene to generate a full HDR image with Tone Mapping.

Leading lines

Finding leading lines in a composition can help lead the viewers eye to the Point of Focus (POF). See below how Jeff uses three leading lines to guide the viewers eyes to the boat, the POF. You have the edge of the pebbles, the Horizon and the clouds all leading the eye.

Balance

A good technique for achieving balance in photography is to take advantage of water and reflections. A calm, crisp surface will help you achieve a sharpe, bright and balanced composition. Rough surfaces with ripples and waves limit the scope on balance in a shot, but allowing an extended exposure time can soften the surface, giving a successfully balanced shot with a different feel.

Black & White HDR

HDR in B&W photographs can add drama to a shot.

Moral

Today’s moral. Photography combines many techniques, requires years of practice and requires an end objective, a story. HDR is a wonderful technique used in your digital post processing, but don’t forget about the basics and don’t over use it. To make a successful HDR photograph still requires the professional execution as a standard shot does, composition, light, the right equipment and of course the right moment. Good luck.

> HDR Before and After

The process by which a successful website lives looks something like this:

The cycle consists of analysis, updating and promotion. If any component if missing, your business will not achieve all that it could. Website promotion and maintenance are the keys to keeping the cycle moving.

In this post we’ll offer some advice and helpful tips on how to maintain a healthy cycle for your website.

Your Website as a Salesperson

Your website is akin to a living, breathing salesperson. If it receives guidance, achievable goals and the proper information, it will succeed. If it is left alone for months at a time, its productivity will slip.

Don’t let your site get stagnant or out of touch – as your business changes, change your site. Keep your content fresh and visits to your site will stay fresh.

1. Analyze what works and what doesn’t.
2. Brainstorm new ideas.
3. Implement your ideas and changes.
4. Promote your updated site.
5. See how the changes perform.
6. Start all over again.

Maintenance

Imagine your website is your car, if you buy a new site from the start, maintain and service it appropriately you shouldn’t run into any unforeseen problems. The same goes for website, neglect to maintain it and you could come out a cropper.

Promotion

A website doesn’t exist if it can’t be found! Website promotion is an integral factor to all successful websites. The following should be used to their full potential to achieve a successful website:

1. Pay per click (PPC)
2. Organic search (SEO)
3. Affiliate Marketing
4. E-newsletters
5. Blogs
6. Forums

Whether your website is a personal weblog, or an international ecommerce store, the same promotional tactics can be used to maximise your sites success.

Rich typography on the web

sIFR (Scalable Inman Flash Replacement) is a mix of Javascript and Flash that enables a web designer to move away from the restrictions of on being able to use web-safe fonts and pick the one’s they really want to use. sIFR isn’t to everyone’s taste however, mainly down to the fact that it is heavy on server load, with the relevant Flash, Javascript and CSS files taking a meaty chunk out of the browsers performance. My current agency have taken the steps to ban sIFR from all future web builds, mainly due to these inefficiencies.

Those shoes are too big for you son!

This news broke my heart, the first signs of rich typography on the web and it’s taken away from me by technical issues. Whilst I argued day and night with the developers, asking them to look harder at a fix or an alternative my words seemed to be falling on deaf ears, so I, a mere designer whose job it is to merely ‘colour in’ and ‘stay between the lines’ decided to play sherlock and find an alternative.

Search for the Holy Grail

Well I didn’t find the Holy Grail, but I did find
FLIR (pronounced FLEER, Facelift Image Replacement).

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> ) to elements and everything in between!

It looks exactly what I’m after! It claims to automatically find what needs to be replaced and where (presumably through standard markup tags like a H2), with it’s nifty Javascript. I can’t see any flash at all in it’s downloads section so again I presume it isn’t required.

Explore FLIR for yourself >>>

I work in the web design industry and I’m amazed every single day by the lack on knowledge, respect and understanding of the basic design principles that I take for granted. I trained for 4 years in Graphic Design by some of the best, or more accurately traditional, designers in the business where I had these principles drilled into me. Taking these basic design principles and any talent for design and creation, I have forged another 7 successful years in the industry.

My aim with this post is to lightly guide those of lesser experience in the right direction with a series of examples and explanations, gliding over some pretty basic teachings so that we can approach our next job with a real educated grounding in the why’s, how’s and when’s of design.

Proximity

The basic theory of proximity is concerned with the arrangement or categorisation of elements that relate to one another. To understand why, when elements of a similar nature are grouped together the information becomes a visual unit. This provides a viewer with a visual clue as to the concept you are communicating rather than being confronted with a scattering of unrelated graphical elements. When a number of graphic elements are close in proximity a relationship is implied. If elements are logically positioned they connect to form a structure to your design, this is also known as Visual Hierarchy.

Visual Hierarchy

Visual Hierarchy arranges elements to create focal points by positioning their priority within a concept as a whole. To do this you will need to ask yourself what the key elements of your design are, which graphics communicate your concept most strongly? Which graphics support your concept and how could you illustrate them to create a visual structure from most to least important? You may consider displaying your graphics using different sizes and colours to give them visual weight.

Visual weight refers to the relative size and scale of the various elements in a design. This gives meaning to the relationship between objects, or parts, of a whole. Scale is used to create the contrasting relationship of size between elements in a composition.

Study your design concept and take note of what attracts your eye first, where do you look next and how does your eye move around the visual elements of your design? Is a relationship implied in the ordering, grouping and placements of your graphical elements?

Symmetry / Asymmetry

The principle of alignment focuses on the placement of graphical elements and their relationship to each other and as a whole. Following the principle of proximity, alignment allows a visual connection with elements in your design to be formed even if they are not close in proximity. Alignment helps to create unity and balance.

Balance is the concept of visual equilibrium. It is the combination of opposing elements in a composition that results in visual stability. Most successful compositions achieve balance using symmetry or asymmetry.

Symmetry refers to the organisation of elements in which a balanced visual hierarchy is achieved through the alignment of graphics along a horizontal or vertical axis. This means that your design can be reflected precisely over a central axis like a mirrored image.

In contrast, design elements that display an unbalanced visual weighting that are made up of elements differing in size, colour and shape are organized and positioned against one another to create asymmetry.

Repetition

Repetitive elements throughout a design piece can be used to enhance and clarify information. Repetition adds visual interest to your design, and helps to identify elements that belong together. It can be considered a way of adding consistency to your design.

The consistent repetition of graphic elements works to create visual unity. These elements can be as simple as colour, spatial relationships, a shape, a texture or a typeface. Sometimes repetitive elements are not identical in appearance but are in fact so similar that their connection is clear.

Unity

Unity is the underlying principle that sums up all of the principles and elements of design. Unity refers to the combination of all elements successfully working together to achieve a sense of harmony in your design. This can be achieved through the consistent use of graphic elements. Using repetition or patterns is one of the most basic factors in creating a strong sense of unity.

Contrast

An effective use of contrast enables you to add interest to your design by highlighting specific graphic elements. This will result in a more visually striking composition. To achieve this ‘contrast’ is employed as a means of creating a visual hierarchy among different graphic elements. It can be applied to graphic elements, as light, dark, warm, cool, large, small; etc.

Contrast is most effective when it is strong; the focal point of a design is usually a result of contrast where the eyes will naturally be drawn. Here contrast can be used to direct the focus of a composition. When used as a device to emphasize or highlight design elements it is important to remember that an ineffective use of contrast may result in confusion.

Dynamics

Dynamics is the arrangement of visual elements in a composition to suggest the illusion of movement or direction. The effective use of dynamics in a design can add an emotive characteristic to your design making it appear restful and calming or active and energetic.

Dynamics can exist in four basic forms:

Rhythmic: A steady rhythm that creates predictability and order in a composition.

Arrhythmic: Follows an unstructured rhythm to add visual interest to a composition.

Random: Without a structured approach or a defined order that creates spontaneity in a composition.

Directional: The use of graphic elements used in such as way that implies a visual connection to lead the eyes to move in a particular direction.

Creating a dynamic composition involves the use of patterns or the repetition of graphic elements and movement to be effective in its execution. The suggestion of motion by the use of repeated structures creates dynamics.

Emphasis

Emphasis refers to the focal point or centre of interest of a composition. This is an area that is visually dominant and eye-catching that a designer has emphasized through the clever placement of graphic elements.

Used effectively in combination with the principle of visual hierarchy ‘emphasis’ can assist to establish a primary focus and an alternative secondary emphases in another area of the composition.

Emphasis can be achieved by use of repetition to highlight and draw attention to a repetitive element. When used with ‘repetition’ the emphasis is usually a break in the basic structure or visual rhythm of a pattern that causes your eye to pause or focus on a particular element.

Contrast achieves emphasis by accentuating an area to visually separate one element from another. Contrast in color, texture, scale, or shape attracts attention to a definite area, which may consist of strategically positioned graphics to call attention to a single element of your design.

Full credit: Swinburne Multimedia
Images: Wikipedia

Ok so the Credit Crunch will throw the financial sector into turmoil for the next few years but lets look at some positives that have come out of this.

I’ll start things of:

Ignore the negatives for now, what good has this Global Credit Crunch thrown your way?

Budgeting for Christmas

Retailers will be hard hit this year thanks to the Credit Crunch as consumers, you and I, tighten our purses in the lead up to the big man’s big day. I myself have set strict budgets this Christmas so I now how much I’m willing to spend and who’ll get what.

Moneysavingexpert have a very useful free automated budget planner that you can use to organise your finances.

Yep the good old CSS box model, explained once more. The CSS box model is a fundamental element of modern web design that all web designers need to master. This CSS box model controls and details the behaviour of many HTML elements, such as DIV, P, ul, so understanding this is a firm step forwards to better web design.

3D CSS Box Model

Jon Hicks, who’s a leading figure in web standards and userbility, has created this brilliant 3D CSS Box Model diagram and kindly supplied the original Illustrator file for me to modify and put on the site for you to look at, so a big thanks goes out to him.

Learning CSS from the beginning

CSS is an abbreviation for Cascading Style Sheets. Web designers use a CSS file to control the visual layout of a web page, grouping all styling declarations into one reference document while removing them from the HTML code that lies beneath the website.

If you’re an absolute newcomer to the scary world of web design and wish to start learning things from scratch then this is the place to be. Over the next few weeks I’ll be posting walk-through slideshows that explain CSS and XHTML visually, in an easy to digest format. This week it’s…

CSS help for absolute beginners

Shaping up with CSS

Credit: All copyright and materials Slideshare.net.

Think you’re a CSS Guru?

Well I guess your too good for this, it’s like child’s play, right? Well have a look at this, 10 CSS shorthand techniques you’ll use everyday, it will be more up your street.

This fantastic list of digital photography tips and tricks was collated by our friends over at DPS. To help these articles reach a wider audience we have decided to post them here for your reference, so if your into photography, why not bookmark this page so you can reference it in the future. Also, why not Digg this page so others can get the same great tips and tricks to help assist them in their photography, simply click on the Digg link at the top of this page, enjoy!

The Basics of Exposure

• Learning about Exposure – The Exposure Triangle
• Introduction to ISO in Digital Photography
• Introduction to Shutter Speed in Digital Photography
• Introduction to Aperture in Digital Photography
• Understanding Exposure – Book Review

Learning to Use Digital Camera Settings and Features

• How to Control Aperture and Shutter Speed on an Entry Level Point and Shoot Digital Camera
• Aperture and Shutter Priority Modes
• Introduction to White Balance
• Introduction to Digital Camera Modes
• Understanding Histograms
• Prefocus to Combat Shutter Lag
• Introduction to EXIF Data
• Automatic Exposure Bracketing (AEB)

Handling and Caring for a Digital Camera

• How to Hold a Digital Camera
• Shutter Release Technique
• How to Avoid a Dirty DSLR Image Sensor
• How to Clean a DSLR Lens
• 7 Digital Camera Predators and How to Keep them at Bay

Other Beginner Photography Tutorials and Tips

• 100 Things I’ve Learned About Photography
• 10 Questions to Ask When Taking a Digital Photo
• 11 Tips for Beginner Photographers
• Using Fill Flash
• How to Get Better Photos in Low Light Without Using a Flash
• How to Take Sharp Digital Images
• How to Use Focal Lock
• Shooting with an In Camera Flash
• 13 Lessons to Teach Your Child about Photography

Common Digital Photography Problems and Questions Answered

• 7 Strategies for Avoiding Flash Blow Out
• Macro Photography Tips for Point and Shoot Compact Digital Cameras
• How to Get Shallow Depth of Field in Your Digital Photos
• Crop Factor Explained
• Complete Digital Photography – Book Review
• The Digital Photography Book – Book Review

Composition Tips

• The Rule of Thirds
• Working the Lines in Your Photography (how to use horizontal, vertical and diagonal lines)
• Finding Fresh Angles to Shoot From
• Photographing Children – Composition
• Getting Horizons Horizontal
• Getting Images Straight
• Fill Your Frame
• The Importance of Focal Points
• Creating Active Space – Photographing Moving Subjects
• Getting Backgrounds Right
• Framing Your Shots
• How to Use Converging Lines to Enhance Your Photography
• 4 Rules of Composition for Landscape Photography
• How to Break the ‘Rules’ of Photography

Make Money From Your Images

• ShutterStock
• Dreamstime
• Crestock
• fotolia
• 123rf
• Stockxpert

CSS shortland is a technique of writing mulitple declarations and values in a single line of CSS code. The advantages of using shorthand is to primarily reduce the CSS file size, but there are other benefits. A bloated and disorganised stylesheet can be hard to debug if you encounter problems, especially if you wrote it and another unfortunate colleage has to fix it while your away sunning it in some hot climate.

To make it easy we’ll look at the most commonly used CSS declarations, write them in longhand, then sprinkle our magic, resulting in a neat, short line of code.

There are many permutations you can use with each declaration and using them all in an example would be a headache, so we’ll pick one, then simplify that, hopefully giving you a flavor of CSS shorthand.

0 values

The golden rule is if the value is 0 you don’t have to specify the unit (px/em/%). You may write:

01|  padding: 10px 5px 0px 0px;

try

01|  padding: 10px 5px 0 0;

Remove Selectors

A selector is basically the element you’re applying the styling to, for instance h1, h2, h2, div, strong, pre, ul, ol etc.. If your using a class (.classname) or an ID (#idname) you don’t need to include the selector within your declaration.

01|  div#logowrap

let’s lose the selector from within this CSS declaration

01|  #logowrap

So the selector in this case was div

* is the joker in the pack

Use * wisely in CSS as it’s a firey little monkey. * is a wildcard declaration, you can use it to set a group of declarations to all or parts of your design, for example:

01|  * {
02|  margin: 0;
03|  }

This declaration would set the margin to zero on every element on your page. Alternatively, set this wildcard with an element, such as:

01|  #menu * {
02|  margin: 0;
03|  }

This declaration would set the margin to zero on every element within #menu.

Backgrounds

Background properties include the ability to set a colour, an image, image position and image repetition. You could write:

01|  background-image: url("logo.png");
02|  background-position: top center;
03|  background-repeat: no-repeat;

Becomes

01|  background: url(logo.png) no-repeat top center;

Colours

The most common way of specifying a colour in CSS is to use hexadecimal notation: a (#) followed by six digits. One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#000000 becomes #000, #336699 becomes #369

This technique only works if you have three pairs, here are some examples where you can’t omit any values:

#010101, #223345, #FFF000

Margin

Apply margin to all four sides of an element like this:

01|  margin-top:0px;
02|  margin-right:10px;
03|  margin-bottom:0px;
04|  margin-left:10px;

Let’s simplify this even more by removing zero value prefixes and merging it into one declaration:

01|  margin:0 10px 0 10px;

When applying padding, margin and border (and possibly a few others) you set these four values in a clockwise direction. Compare this to the hours on a clock, start with 12, 3, 6, 9, all in a clockwise direction. With this in mind there is another trick to slim this declaration down. Look out for two pairs, if the top and bottom match, and the left and right match then your a winner! Omit the 3rd and 4th values. The first value represents the top and bottom value, the second represents the left and right.

So let’s simplify this declaration down again with the pairing technique that’s just been explained:

01|  margin:0 10px;

The result is the element would attain margin of 10px to the left and right sides, and zero to the top and bottom. Here are a few declarations where the pairing technique can’t be applied:

Padding

Same principles in padding as explained in margin above.

01|  padding-top:0px;
02|  padding-right:10px;
03|  padding-bottom:0px;
04|  padding-left:10px;

Becomes

01|  padding: 0 10px;

Borders

Borders are a bit more complicated since they can also have a style and a colour. To give an element a one pixel solid black border on all sides, you could write:

01| border-width:1px;
02| border-style:solid;
03| border-color:#000;

Becomes

01| border:1px solid #000;

I typically write in order of width style color.

We can also set different widths on all four sides of the box element by writing:

01| border-top-width:1px;
02| border-right-width:2px;
03| border-bottom-width:3px;
04| border-left-width:4px;

The CSS shorthand for this would be:

01| border-width:1px 2px 3px 4px;

Finally we could style just the left and right like this

01| border-right:1px solid #000;
02| border-bottom:1px solid #000;

This would be

01| border:1px solid #000;
02| border-width:0 1px 1px 0;

Set a default style for all four sides then overwrite the widths below.

Fonts

There are many properties for font, just like the background properties. In a complex string you may write:

01| font-style:italic;
02| font-variant:small-caps;
03| font-weight:bold;
04| font-size:1em;
05| line-height:150%;
06| font-family:Verdana, Arial, sans-serif;

You could write

01| font:italic small-caps bold 1em/150% Verdana, Arial, sans-serif;

Lists

01| list-style-type:square;
02| list-style-position:inside;
03| list-style-image:url(filename.gif);

And finally

01| list-style:square inside url(filename.gif);

Credit to 456bereastreet for the inspiration to write this useful 10 shorthand CSS tips.

If you want to download a quick reference guide in PDF you can by clicking this link.