Fifteen Ten

Supersized background image using CSS only

So everyone has seen Sam Dunn's amazingly versatile supersized jquery plugin here. It really was groundbreaking, and my hat truly goes off to the man for opening the doors for some seriously impactive website backgrounds.

But have you ever wondered how to achieve the supersized effect in CSS only?

I know that some of my sites can become a bit jQuery happy, and for those which involve a lot of dynamic database interaction anyway, the more achieved through CSS the better!

Check out this demo, or use the download link below to play with the code and files yourself!



View Demo →


Download →



Follow me on Twitter for the latest updates - or just to say hi!




CSS Styling

img.bkd { 


/* Cover Background */ 


min-height: 100%; 
min-width: 1024px; 




/* Scaling */ 


height: auto; 
width: 100%; 


/* Fixed Positioning */ 


position: fixed; 
top: 0; 
left: 0; 
z-index:-1; 



/* Set max width to equal your image */ 


@media screen and (max-width: 1024px) 

/* Centre the image */
img.bkd { 


left: 50%; 
margin-left: -512px; /* Half your original image width */ 


} }

HTML

<img src="images/supersize-bkd.jpg" class="bkd" />

Trends in Web Design 2011

2011 was a great year for digital design. The industry has expanded across all mediums, and with the increasing encouragement of HTML5, CSS3 and mobile browsing, the floodgates really are open for designers to explore their creativity.

Here are some trends that have emerged over the recent year.

1. Texture

The use of texture has become such a trend that it is now subject to overuse by insecure designers.

Subtle inclusion in a design can add depth and visual interest to a page, and properly used can have a great effect on the overall visual of a page.







2. HTML5 & CSS3

With the possibilities emerging from the introduction of HTML5 and CSS3, the future looks bright for digital design.

While browsers keep on catching up and though compatibility is still an issue - one hopes that these new strands of internet technology will fast move into the mainstream.






3. One-Pagers

A cost effective and often visually impactive means to introduce your business to a viewer.

The one-page solution also helps SEO, and encourages a positive user experience in the provision of important information quickly.






4. Parallax

Brought to the global stage mostly by the Nike Better World site, and now with tutorials and different examples cropping up all over.

This visual effect and reactive technology instantly engages the viewer's attention, and used subtly can really make a page stand out.




5. Responsive Design

With the HUGE variety of display devices on offer, from mobile to 27" mac, from iPad to Android, the new requirement is for websites to respond to the viewer's portal.

Try and stretch the screen for the 'Captain Dash' website below and watch the effect on the images and navigation - very clever!






6. Typography

With the increasing prominence of font squirrel, font face, cufon and Google webfonts - people are starting to play with their typography options.

A great tool for marketing and impactive headlines, some websites are even chopping and changing their typographic styles for the body text content to give their site the extra punch.







QR Codes and Recruitment

You must have seen them by now, but not everyone knows what they are...


They're called QR codes for those who are unaware, and there are a number of ways they can assist your business - particularly relating to recruitment.

What is it?



'QR' stands for Quick Response code, to be read using a smart phone or enabled mobile device - many of which now include the relevant software at purchase, whereas some older devices may require program or app installation to begin.

How does it work?



Once you have the correct software installed, all you do is take a quick picture of the QR code and the program will take the relevant action - usually open a mobile web browser with a specific page open.

QR codes offer a means to quickly direct a viewer to a purpose-built landing page within your website.

Why is this useful?



Just a few examples of ways this can be useful:

  • Print Adverts - allow the newspaper reader an instant link to the relevant job description that they are reading about in the paper.
  • Business Cards - point the relevant party to your contact details online, your biography or business background.
  • Flyer or Company Brochure Design - a direct link from a static print document to an interactive online experience will encourage the viewer to interact with your business.
Of course the best thing about this highly efficient manner to direct targeted traffic to relevant pages of your website - they are free to generate!

How to generate your own QR Code

  • Visit Google's URL shortening service 'http://goo.gl'
  • enter your URL
  • shorten it
  • copy the shortened URL to your address bar and  add '.qr' to the end
  • hey presto there's your QR code!


Imagine the effect if your website is mobile optimised? The mobile-savvy viewer will enjoy an enriched experience throughout.


A few signs that your website is out of date

As everybody knows, your website is crucially important when marketing your business, for most it is the first point of contact for almost all potential customers, and where your business is introduced in brief and in detail to the world.

In many cases individuals would rather make an assumption about your business based on a few seconds on your site than picking up a phone, meaning your business is introduced to a potentially vast variety of individuals on a daily basis, the only issue is whether that introduction leaves a positive or negative impression.

In this series of articles I will be discussing the manner in which you are able to build a successful site that fulfills the ultimate task of any commercial website that should be for relevant visitors to enjoy a positive experience that boosts your businesses profile, contact base or sales as a result.

I will begin by addressing the issue of your existing site and some tell tale signs it may be time for an update. Looking at one's own site objectively can be tricky, and assessing its effectiveness likewise. However if any of the following conditions are met, it is likely your business could gain a great amount from an update.



1. Site visitors are decreasing.




Clearly this is not limited to solely the design of your site - it could just as easily be caused by a substandard service offering or unfocused marketing.

If alternative influences are ruled out however, decreasing visitor attraction/retention can be the result of your site not offering the experience a visitor requires from your site.

One solution to this issue is a clearly structured user workflow definition, to anticipate and design for the intended actions a user would take on visiting the site, and make sure your site is planned and intuitively structured to suit that activity.

Alternatively, interrogate your visitor traffic information, from which page do visitors most commonly leave your site? do people most commonly leave from the home page or another page?

Assuming your web designer has installed Analytics reporting on your site - this can be investigated with relative ease. This will tell you which areas need your greatest attention, and ensure the greatest commercial benefit is derived from your website.


2. Have you checked your site on a mobile?





As you may (or may not) have seen in previous articles, mobile internet traffic accounts for 15-45% of all UK internet traffic according to the BBC and National Office of Statistics, that's a huge portion of your website visitors!

Mobile visitors require a different set of features and styles to those required by a desktop or laptop visitor. A site that appears broken for a mobile visitor will only cause frustration and leave a negative impression of your business for that viewer. Similarly, a tailored mobile site would instantly demonstrate your business as a contemporary organisation, and guarantee your mobile visitors leave your site feeling satisfied and impressed - thats 15-45% of all your website visitors!

Ignore mobile internet at your peril!


3. Your site simply looks dated





A tricky one to establish objectively as I mentioned earlier. Check out your competitors' sites, have a look at other websites for businesses you interact with. How do they compare with yours?

Imagine you were looking to work with a business describing themselves as 'established', 'market-leading', 'cutting-edge' or other similar terms, but they clearly have not invested in their website? As your website can often supply potential clients with their first impression of your business, it is vital that it creates an immediate positive impression.


4. It's been two or three years since you last updated your site





I don't have to tell you that the digital sector moves at a serious rate of knots, and keeping on top of it can be a daunting task. The unfortunate truth of the matter is that if you do not keep your website up to date you can be left behind by your competitors and appear out of touch to any visitors.

Areas such as Search Engine Optimisation, Pay Per Click advertising, social media integration and other online marketing can have a huge impact on your business' success online, and they are all fast-paced and constantly evolving sectors.

Two or three years is only intended as a guide, and several factors come into play such as the lasting effectiveness of your design and the market sector in which you operate.





If you would like a free consultation or a chat about your business website - simply enter your contact details in the form in the right column and I will get back to you asap - I will never spam you. Ever.

→ Email Me