Web Designer - Defining the internet through beautiful design

Site of the week: Trionn Design

Steve Jenkins — Wed, 19 Jun 2013 14:33:41 +0000

URL: www.trionndesign.com | DESIGNER: www.trionndesign.com

Trionn Design is a creative studio where art enthusiasts and tech freaks connect over innovative ideas. The award-winning site is awash with bright, bold colours and a gorgeous array of fonts that compliment the artwork perfectly.

The white canvas provides the ideal background to build on. The sugary sweet colour combination provides a perfect attention-grabbing element that draws in the viewer. The combination of serif and sans serif fonts and the weighting and colours make for a heady blend that entices the viewer to explore further.

The single page layout is a well-trodden path, but Trionn demonstrate that when the art is done well it is still a great concept. The smooth glide down the page reveals more of the design elements that build the brand, add interests and make the site a truly worthy site of the week.

A neat and tight grid layout with black and white to colour rollover effects to add impact

The contact page is designed to grab a user’s attention and state its purpose

A Beginners guide to PHP – part 1

Steve Jenkins — Tue, 18 Jun 2013 17:01:06 +0000

Ever considered learning a second language? Well, how about five? That’s what will be required of you, if you intend to become a modern web developer. If you’re not careful, you may find yourself getting a little overwhelmed as you stare at confusing blog articles or technical books.

The key, as with anything, is to take one step at a time. Would you fault yourself for not learning a spoken language in a month? Of course not. Then apply that same level of thinking to your programming journey. These things take a while, but as long as you continue pushing forward, you’ll be there in no time.

Step one is HTML. Understand what purpose a

serves. Learn how to structure content using semantic tags. Build a basic, unstyled web page.

Step two, as you might have guessed, is CSS. Learn how to style elements on the page. Appreciate what ‘separation of concerns’ refers to, and how this applies to your HTML and CSS. Complete your first simple website.

Step three is when developers begin branching off into their own specialities. At this point, you could dive into the world of JavaScript, which is booming like never before. Or, you could instead focus your efforts on the backend.

Frontend or backend?

Confused by the difference between ‘frontend’ and ‘backend’? Think of the frontend as the tip of the iceberg that brought down the Titanic. It’s the part of the application that is visible to the user, and can be interacted with. The backend, on the other hand, handles everything else from persistence, to validations, to routing. For the purposes of this article, let’s assume that you’ve chosen the latter option; the server-side, it is!

Unfortunately, once again, you come upon a handful of paths to take. Should you choose the most popular option – PHP? What about Ruby? The cool kids seem to prefer that these days. Then again, what if you have a beard? Is Python the correct choice. Most importantly, though, how could you possibly make a selection, when you have zero experience? In situations such as this – and in this author’s opinion – there is no wrong choice. And, certainly, there isn’t a thing prohibiting you from switching down the road. In fact, all developers are encouraged to learn multiple languages! For now, however, the key is to pick just one and learn it well.

While it’s true that PHP is not the most beautiful of languages, there’s no denying the fact that it dominates the web. In fact, it’s the world’s most popular scripting language. The benefit to this is that you may rest assured that every PHP question has already been asked, solved, and documented. There’s comfort in knowing this. Though you’re at the most fragile stage of your learning, a massive, friendly community is at your doorstep, ready to help. Even better, PHP is experiencing a modern renaissance like never before, thanks to tools like Composer and Laravel.

What is PHP?

PHP, an acronym for ‘PHP: Hypertext Preprocessor’ (yes, developers love their recursive jokes), is a scripting language that was built specifically for the web. Chances are high, though, that this still means nothing to you. Scripting language? Huh? When would you reach for PHP over simple HTML? Well, perhaps an example is in order. Assuming that you’ve successfully installed PHP, create an `index.php` file within a new folder on your desktop, and add:

001 < ?php
002 echo ‘Hello world’;

Yes, it’s the ubiquitous ‘hello world’ example that you’ll become quite familiar with as your skills progress. Every language/framework/tool has one!
In order to run this code, use PHP’s built-in server. Switch to your favourite command line tool (Terminal, for Mac users), ‘cd’ to the project folder, and boot up the server with ‘php -S localhost:8888’. This command translates to, “Run a server, and make it accessible from my browser at localhost, port 8888.” Go ahead and try it out! Open Google Chrome, browse to ‘localhost:8888’, and you’ll see ‘Hello world’ on the page! Nifty! ‘echo’ is a language construct that does nothing more than output a given value.

Admittedly, this isn’t the most exciting thing in the world. In fact, you’re likely thinking to yourself, “Why couldn’t I write ‘Hello world’ directly into the HTML page, and remove the need for PHP all together?” It’s true; for this example, it serves no purpose. However, a scripting language like PHP becomes particularly useful when the output should be dynamic in nature. What if, rather than ‘world’, you want the greeting to reference a value passed through the URL’s querystring (the text in the address bar that comes after the question mark). Here’s an updated example, which you’ll see accomplishes just that!

001 002 echo ‘Hello, ‘ . $_GET[‘person’];

This introduces a few new techniques. Firstly, the single period that separates the ‘Hello’ string and that confusing ‘$_GET’ allows you to concatenate (or group) values. In this case, we wish to print “Hello” and then the value represented by ‘$_GET[‘person’]’. This is what we refer to as a super-global array. For the sake of simplicity, think of this as a way to ‘GET’ a value from the URL’s querystring.

Test this out by loading ‘localhost:8888/?person=Joe’. If configured properly, the web page should now display “Hello, Joe.” Play around with it by replacing ‘Joe’ with your own name. Notice how the output updates each time the page is refreshed? This simply wouldn’t be possible with static HTML.

One of the keys to mature programming is considering every possible path through your code. For example, what if no ‘person’ key is available? Perhaps the query string was omitted entirely. In that case, an error will certainly be thrown, as the ‘person’ key won’t exist. So what’s the solution? While it’s true that this is nothing more than a simple example, it’s still very important to consider all possible outcomes. Let’s provide a default.

001 002 if (isset($_GET[‘person’])) {
003 $person = $_GET[‘person’];
004 } else {
005 $person = ‘Joe’;
006 }
007 echo ‘Hello, ‘ . $person;

Though there are more streamlined ways to allow for this, the example above is an excellent starting point. It’s also your first introduction to conditional statements. Approach your code in the same way that you would handle scenarios in real life. For example, “If we are out of milk, then go to the store. Otherwise, stay home.” This line of thinking could be translated to PHP, using the following logic:

001 $outOfMilk = true;
002 if ($outOfMilk) {
003 echo ‘Going out to the store.’;
004 } else {
005 echo ‘Breakfast is served.’
006 }

Here only a single line of text will be printed to the screen. The value of the variable (a dynamic value), ‘$outOfMilk’, will determine the control flow.
Returning to the previous example, as long as ‘$_GET[‘person’]’ is set (think of this as a pseudo-name for ‘is available’), then create a new ‘$person’ variable equal to its value. Otherwise, apply a default. If you return to the browser, you’ll see that it should now function correctly, regardless of whether the ‘person’ key exists in the querystring.

Security

Unfortunately, we’re still not home free. A key programming best practice is to place security at the forefront of every action. Even with this incredibly basic example, we’ve opened the door to one of the most widespread security issues on the web: XSS (Cross-Site Scripting). A true understanding of this is absolutely beyond the scope of this introductory lesson (entire books have been written on the subject), however, here’s a basic illustration: what if ‘$_GET[‘person’]’ is equal to, not a string, but a script?

001 http://localhost:8888/?person=< script type=”text/javascript”>// < ![CDATA[
// < ![CDATA[
alert( ‘ATTACK!’)
// ]]>< /script>

Because this value has not been sanitised, upon execution, in some browsers, you will see that an alert box is displayed.
Webkit-based browsers (think Chrome and Safari) now provide protection against these sorts of attacks. However, this wasn’t always the case, and still isn’t in the likes of Firefox and Internet Explorer.

Yikes! We can’t have that. While modern society dictates that a man is innocent until proven guilty, the same is not true for the programming world. All user input is guilty until sanitized! Here’s an updated example which does this very thing:

001 < ?php
002 if (isset($_GET[‘person’])) {
003 $person = $_GET[‘person’];
004 } else {
005 $person = ‘Joe’;
006 }
007 echo ‘Hello, ‘ . htmlspecialchars($person, ENT_QUOTES);

With this modification, should someone attempt an XSS attack, we’ll be ready! ‘htmlspecialchars’ is a native PHP function that translates various symbols to their entity counter-parts. ‘&’ becomes ‘&’, ‘<’ becomes ‘<’, etc. This makes it the perfect tool to provide that extra bit of security. ‘

Aidan explained: “Ideas and visual treatments are only part of the digital experience. We include our creative technologists from the beginning. Coming up with ideas is one thing. Knowing which ideas are achievable during the brainstorming process is the key. Luckily we have a creative technology team who sit next to our design. It’s great to hear them working together. We present our ideas using a combination of storyboards, posters and mood videos. Our clients are included in the creative process. They are full of ideas that inspire us. We help them develop these ideas and execute them to a high standard.”

The approach that Toaster takes to each of the campaigns they work on is all about the idea. The insight into what the business issue is and what the brand wants to communicate or what their big idea is and how it can be visualised and brought to life are the key drivers behind Toaster’s approach to their work. It all depends on the idea and then the different ways of communicating that message. One of the key differences between the approach that Toaster takes and other companies is that they are a creative team, art directors and designers sitting next to the creative technologists and the developers. Toaster always tries to get these groups talking to each other that then inevitably leads to great collaborations. “It’s all about quickly knowing what’s possible so you can rule out different approaches and different directions. You can confidently put something in front of clients and say, ‘we can do this’.” Aidan explained.

The masterful manipulation of the latest technology is a clear trait that runs through all of the work that Toaster has produced to date. Aidan outlined one project that the agency is particularly proud to have created: “Our work with Google exposed us to the latest technologies that Google was developing. They encourage the use of their API’s to produce new and exciting digital experiences. [For] the Toyota project, we put together the new Prius Plug-in Hybrid website. [It] takes viewers on a personalised journey to discover how electric and petrol-hybrid technology can make a real difference to our everyday drive. Using the latest Google Chrome technology, the captivating experience asks visitors to input an everyday journey of their choosing. It then creates a simulation of their route by cleverly stitching Google Streetview and Maps info together while calculating fuel economy, CO2 emissions and range statistics.”

Toyota’s main objective was to relieve the perceived range anxiety associated with all-electric cars. The Prius Plug-in Hybrid model combines the benefits of both electric and petrol-hybrid engines. This website is the first of its kind; it demonstrates these benefits in a rich and immersive way and delivers a personalised experience for each visitor, directly based on their own everyday driving habits. “Google Maps was an obvious tool to demonstrate the range of a car, but what makes this truly engaging is the exciting application of the latest Google Chrome technology to deliver a fresh visual effect” Aidan concluded.

Another project that clearly shows Toaster’s technical prowess is concept for the YouTube Space Lab that was developed by Google and YouTube. Working in partnership, Toaster’s role was to develop a creative wrapper that could be used across the lifespan of the campaign.

The Space Lab competition asked students around the world to suggest experiments to be carried out aboard the ISS (International Space Station). Toaster came up with ideas which used the latest web technologies to create the Space Lab YouTube Channel. The channel houses a simulation that allows visitors to take off in their own rocket from anywhere on the planet. The site featured live NASA tweets and imagery, real-time ISS location tracking and technology from Lenovo who supplies laptops to the ISS.

Toaster’s head of creative technology, Alberto Giorgi explained: “HTML5 and CSS3 encompass a fluid set of technologies, the so-called ‘open web platform.’ It represents Toaster’s current focus – the direction the agency wants to undertake for most of our future projects, as the HTML5 platform itself gets stronger. The main challenges Toaster encounters are browser fragmentation, a strikingly diverse set of computational capabilities, a plethora of screen sizes and bandwidth bottlenecks. Every user presents a unique set of these, hence Toaster tends to create their web applications smart enough to learn where they have been served and mutate accordingly, so the user can still enjoy the content without having to suffer.”

Overcoming these constraints is one the most demanding tasks that the creative technologist has to face, and it requires a broad set of skills and expertise, together with a constant attention to the latest trends in the technology, as Alberto goes on to explain: “We tend not to use jQuery in our projects, as these normally rely upon Google’s own stack and libraries. Our JavaScript library of choice is the Google Closure Library, which is an extensive, well-tested and modular library that Google uses in almost all of their own products. The main advantage of the closure library is that it is made out of a broad amount of reusable components which spans from lower-level utilities for DOM manipulation to server communication, animation, data structures, unit testing and more; all managed by one single source with great consistency. We find this ideal to tackle situations where code reuse is essential and the applications to build are often complex and deeply structured.

“We’re also working closely with Google and do a lot of work exploring Google’s technology, their hang -out technology on Google Plus and video chats where people can collaborate together with applications and games and YouTube videos. In addition we were quite excited about 3.JS Web GL, which was used for the Toyota campaign. We have WebAudio API, Web RTC and CSF. We are also currently working on some prototypes at the moment and we’ve launched some Chrome experiments. [Plus] we’re working with Google for the ability to pair your [mobile] device with your desktop. Adobe Creative Suite, SketchUp, VRAY, Blender and Basecamp are all used on a daily basis,” Alberto concludes.

Of course the almost ubiquitous smartphone and tablet PC means that agencies like Toaster have to pay attention to the needs of responsive design. Aidan outlined Toaster’s approach: “Responsive design is an industry buzzword these days but simply reformatting and scaling a site to work on a smaller screen misses the opportunity to use gestures, the gyroscope or personalise the experience using the user’s location. But the only thing responsive about responsive design seems to be scaling to fit screen sizes. It’s obviously important for editorial, text-heavy sites, but interaction is overlooked. On one type of device we point and click, and on another we can swipe, tap and pinch. We avoid mobile apps unless they add real value. Instead, we’re exploring what is possible on a mobile browser. Prototyping animations, effects and interactions on live projects. We’re learning a lot quickly. And that includes adjusting our own expectations on what’s possible with devices.

“We’re also exploring multi-screen technology, with our Chrome experiments for Google we’ve produced fun projects such as Super Sync Sports, or a Google+ demo where you interact on your mobile, but the experience is on your computer screen. Some of our most exciting mobile explorations aren’t possible with current bandwidth. But we’ve parked these in a safe place and are ready to roll these out when faster 4G networks and devices are more commonplace.

“Also, we’ve moved away from our initial mock-ups. Our initial website design mock-ups are not on desktop. First of all we supplied our design contents and mock-ups on smartphones. Traditionally you might have shown clients a concept using the desktop platform, we’re showing that as mobile, which brings its own design and technical challenges. We’re trying to encourage clients to think about the interaction and on one device you use a mouse or a trackpad to point and click and on the other devices you are using slight gestures to pinch and zoom. We recognise that it’s a totally different device that you’re designing for. Specifically for experience-based websites, if it’s an information-led website obviously it needs to scroll and you’re showing lots of text. For other creative opportunities we think they are quite different things to design for completely. Responsive design doesn’t really apply to something really creative. It applies to text-based information websites.”

In today’s creative environment, social media continues to play an important role. “The key thing is that social media is democratising the web,” stated Aidan. “The ability for anybody across the world to have a say. Or better still – participate.”

The most socially significant project, Toaster has had the privilege to work on was YouTube’s ‘Life in a Day’ cinematic experiment and a collaboration with Ridley Scott and Kevin Macdonald. Toaster’s role was to create a digital campaign calling out to the YouTube community that touched millions with over 4,500 hours of footage submitted from more than 190 countries.

“Social [media] is extremely important but we need to be very aware of it and use it,” explained Aidan. “But, not try and force people into it or bribe people into using it. So it’s the things that are going to be shared. You’re not going to share somebody who’s shouting, you’re going to share somebody who is entertaining you and who is giving you some value, some benefit or something rewarding.”

At the moment Toaster has around 15 staff members, which does include freelancers. Aidan outlined what they are looking for with the designers and developers they want to work with: “We have a lead developer, our head of technology works across all campaigns and manages the technical side of things. I would lead the creative. We have an art director who leads the design and we have digital producers who try to keep an eye on and manage the different teams. But we are essentially one team.”

With regards to the kind of person that Toaster looks to recruit, Aidan describes them as a certain mixture of dedicated, curious and wholly creative: “We look for free thinkers, people who aren’t satisfied with what’s already been done, and people who love technology. And people who don’t take themselves too seriously. Our team is constantly surprising me with their desire to create something new. We encourage hardware hacking, multi-touch interfaces, and experimental UI. Curiosity in gadgets and inventions with a desire to innovate and experiment with consumer experiences and communication is also vital in the people we work with. Because of the projects we work on and the clients that we have, we have quite a huge interest from extremely talented, intelligent people who just want to get on and do things and work quickly. My advice for people wanting to get into the industry is that you can never stop learning. You have to be curious, because something new is always happening somewhere. If you can’t learn to do that, you shouldn’t be in this business.”

And, finally, the future is crucial for any digital agency, so what does the future have in store for Toaster? Aidan concluded: “We’re collaborating motion-graphic artists and some new clients who we’re working with to try and produce something that’s pretty special in terms of the visual and personalised experience for the users. We’re continuing to work for clients pushing the boundaries. We’re continuing to try and find good people to help us out and clients who want to work at the frontier of what is possible. If we can continue to do what we love with them, we will be happy.”

5 WordPress responsive ecommerce themes

Steve Jenkins — Fri, 14 Jun 2013 08:30:49 +0000

Here we reveal five effective e-commerce solutions for those on WordPress. All are responsive in nature and look good as well

Site of the week: Polecat

Steve Jenkins — Thu, 13 Jun 2013 13:35:17 +0000

URL: www.ipolecat.com | DESIGNER: www.ipolecat.com

Polecat are an agency based in the Ukraine and specialise in creating iPhone and iPad apps. There tagline is ‘We take an idea, we prototype, we design, we develop, and we release. Attention to detail is our watchword’

This rings true from the moment you set eyes on the site. The minimalist canvas is populated with beautifully crafted illustration and images that give the site its impact. The combination of colours and the neat touches like the smiley face on the balloon add to the interest. Skipping past the front page and the illustrative theme continues. In fact, if anything it gets better and better the more you view the site. Check out the Developement page to view the gorgeous airliner illustration, and the Crew page to meet Cpt Pole, the agency mascot.

The quality of the illustrations is superb throughout the whole site.

The real-life crew happily surround the agency’s illustrated mascot Captain Pole.

How to create floating toolbars

Steve Jenkins — Wed, 12 Jun 2013 11:53:39 +0000

inspiration: http://shop.fontyou.com/

DOWNLOAD TUTORIAL FILES

Download plug-in

To start, download ScrollToFixed.js. Visit https://github.com/bigspotteddog/ScrollToFixed and click the ZIP button to obtain the whole repository as a .zip archive. Unpack this and identify the jquery-scrolltofixed.js file. Start and save a new, basic HTML document and place the plug-in in your page’s root directory and we’ll add the < script type=”text/javascript”>// < ![CDATA[ tags.

Script tags

Just before the closing body tag of the page, you need to first link to the main jQuery library. You can either point to a local copy of the jquery-1.91.js library or the version hosted by the global jQuery CDN. It won’t work otherwise and both methods are listed below:

001 < script type=”text/ javascript” src=”http:// code.jquery.com/jquery- 1.9.1.min.js”>< /script>
002 < script type=”text/ javascript” src=”jquery- scrolltofixed.js”>< /script>

Bar building

Next add the basic page elements, notably the toolbar. Create a < div> with an id of ‘floatingbar’ and then add a CSS style class within the page head. Here we’ll set the height and width, make it’s position absolute and place it at the foot of the page.

001 < div id=”floatingbar”>< / div>
002 CSS
003 #floatingbar {
004 background: #000;
005 height: 57px;
006 width: 100%;
007 position: absolute;
008 bottom: 0px;
009 }

Long page

It’s also important to set up a dummy page via a body CSS class. Set the page margin to zero and make sure the height is long enough to check the scrolling effect. We’ve made our dummy page FONTYOU red and used a similar Google font coloured grey simply for illustration purposes.

001 body {
002 margin: 0;
003 background: #ff3333;
004 height: 3500px;
005 font-family:’Arbutus Slab’, serif;
006 color: rgb(191,191,191);
007 }

Header logo

Place a new < div> in the page body with the id ‘toplogo’ and then inside it place an image link. We’ve used a dummy .png sized 84x84. Next, add a new CSS class #toplogo where you’ll set the position but also bear in mind that the z-index must be set over 1,000 to stay above the toolbar.

001 HTML
002 < div id=”toplogo”>< a href=”#”>
003 < /a>< /div>
004 CSS
005 #toplogo
006 {
007 position: fixed;
008 top: 0px;
009 left: 50%;
010 margin-left: -42px; /* 011 offset */
012 z-index: 1001;
013 }

Call ScrollToFixed()

Finish up the whole process by adding the crucial code call below your opening < script type="text/javascript">// < ![CDATA[
// < ![CDATA[ tags and right before the closing body tag. By passing in your toolbar < div> id you’ll invoke the plug-in function and the element will float up from footer to header as you scroll, tucking under the logo. A really handy feature and looks great too.

001 < script type=”text/javascript”>
002 $(‘#floatingbar’).
003 scrollToFixed();
004 < /script>< /body>

// ]]>< /script>

Create stylish responsive HTML5 forms

Steve Jenkins — Tue, 11 Jun 2013 14:53:50 +0000

The form is a simple but effective method for feedback and communication. HTML5 introduced a selection of new input types and attributes that make the creation and validation of forms far easier than previous methods. Instead of just input type=text, users can now can add url, date, telephone and email to add instant validation to a field.

Adding an input type such as email means that the user needs to write an email address in the correct format. Adding the ‘required’ element means that a form cannot be submitted until the required field has been populated. Another interesting addition is placeholder, which allows the inclusion of text, until the field comes into focus, which is ideal for search fields. Forms are typically bland, but with some CSS3 effects and a little imagination, we will demonstrate how to make them both attractive and responsive.

DOWNLOAD TUTORIAL FILES

Basic page

The first step is to create the basic HTML needed for the page. We are going to assume that the initial HTML page is already in place with HTML doctype already defined ie, . We are going to build the form as a standalone component that can be dropped into an existing page, pretty much ready to use.

001
002
003
004 HTML5 Forms
005
006
007
008

Include web fonts

The form is going to be placed inside a generic container which can be styled to suit the page. For the purposes of this tutorial, we’ll use a background image and a Google web font. Get the Google Web Font code (eg Open Sans), and place in the head of the page.

Create a container

It is standard practice to create a container for a single column of fields. Create a

tag and name it accordingly ie #newform. Set the width to 470px, height to auto, add 5px padding left and right and set the margins to auto. These can be adjusted to suit.

001 #newform {
002 width:470px;
003 padding: 0px 5px;
004 margin: 0 auto;
005 }

Add input fields

The form is going to include a selection of HTML5-supported fields to demonstrate how they operate. The first step is to add an opening and closing set of form tags. We are going to use five fields and a submit button. Start by adding five fields with input type as text and the sixth as submit.

001

Input type

The first two fields are going to be names, so they remain as text. The third is going to be an email address, so this is changed to email, the fourth a date, so text becomes date and the final field will be a web address, so this needs to be made url.

001

Naming fields

Form fields need a unique name to identify them. For instance, the first two fields are both names but will be called firstname and surname. The email field will simply be email, date will be startdate and url will be webaddress. The names can be modified to whatever you wish to call them.

001

Labels

Currently all the fields do not have an identity, so a label is going to be added to each field. Add a set of opening and closing labels above each field and name accordingly eg, First name, Surname, Email etc. Next add the required attribute to the fields that have to have data to complete the form, eg email.

001 First name
002
003 Surname
004
005 Email
006

Text styling

The basis of the form is now in place, so it is time to start styling. The first step is to style the text. Add the body tag to the CSS and choose a size, weight and colour for global text styling. This will style up the labels, but these can be modified later on if desired.

001 font-family: “Open Sans”, Arial, sans-serif;
002 font-size: 14px;
003 font-weight: 300;
004 color: #000;
005 }

Full width

To make the form more responsive, the input fields are going to be given a percentage width. The obvious choice is 100%, but this could be 95% if needed. Add the input selector in the CSS and set the width to 100%, or your chosen width. This will immediately place the labels above its accompanying field.

001 input {
002 width: 100%;
003 }

Input style

To add more a bit more panache to the input field, the text is going to be styled up and the height fixed. We have set the height to 40px and then added the desired font weight and size. Next it’s a good idea to
save and preview to make sure that the font and height complement each other. Add a background colour, if you like, to emphasise each field.

001 input {
002 width: 100%;
003 height: 40px;
004 width: 100%;
005 font: 300 24px “Open Sans”, Arial, sans-serif;
006 }

Make some space

The labels and fields currently sit right on top of one another. So in order to give the form some space, first add a bottom margin of 10px to the input attribute. To add space between the text and the field, add a top margin of 5px.

001 input {width: 100%;
002 height: 40px;
003 font: 300 24px “Open Sans”, Arial, sans-serif;
004 margin: 5px 0px 10px 0px;}

Placeholder text

The placeholder attribute allows text to be added to a field while the field is empty. When the field comes into focus – ie it is clicked – and the user starts typing then the placeholder text disappears. To add placeholder text to any field in the form, simply add placeholder=”your text here“.

001 First name
002 003 placeholder=”your text here” required>

Date input

The input type date renders differently in different browsers. Chrome users will see an arrow that opens a complete datepicker while other browsers will display nothing or other a simplified date picker. For this reason the placeholder text can be called into action to inform the user the format to input a date.

Value to URL

The url field allows users to add a web address and to ensure that the field works correctly, http:// needs to precede the web address. To ensure there is no ambiguity in how a url is added, http:// prefix is to be included by adding value=”http://” to the input field.

001 Web address 002 003 name=”webaddress”>

Style button

The default submit button displays differently in different browsers. To overcome this issue, and style the button to match the form, a selection of CSS needs to be added. Add the following syntax input[type=submit] { } and add any CSS styling between the brackets. Note that a border is added to a button; to create a flat effect add border: none.

001 input[type=submit] {
002 background-color: #C13A40;
003 height: 50px;
004 width: 100%;
005 border: none;
006 font-weight: 400;
007 font-style: italic;
008 letter-spacing: 2px;
009 color: #FFFFFF;
010 background-color: #FF9900;}

Add a title

To state the purpose of a form a title can be added, or alternatively a logo. To add a title, add a set of

tags (this could be h3), now style up the text. In our example the text has a fixed size, a bottom border, different font to the standard text and a text shadow.

001 h2 {
002 font-size: 90px;
003 color: #FF9900;
004 text-shadow: 2px 2px #222;
005 font-family: “Oleo Script”;
006 border-bottom: 2px solid #FFF;
007 text-align: center;
008 margin: 0px 0px 5px 0px;}

Finish up

To give the form some interest an opaque background has been added to the form containing tag, plus a box shadow and a border-radius to finish. To make the form responsive, simply resize the #newform

tag and the fields will resize automatically. The height of the form is set to auto to compensate.

001 #newform {
002 width: 470px;
003 height: auto;
004 background-image: url(images/sand02.jpg);
005 margin: 0 auto;
006 padding: 0px 1%;
007 box-shadow: 5px 5px 0px #AAA;
008 border-radius: 5px;}

Web Designer wants your portfolio

Steve Jenkins — Mon, 10 Jun 2013 15:08:03 +0000

This could be you. Our Portfolio section provides the perfect opportunity for independent designers to showcase their talent and work in a top quality publication.

Send your portfolio URL to steve.jenkins@imagine-publishing.co.uk and see what happens

Develop an app, win £10,000

Steve Jenkins — Fri, 07 Jun 2013 14:22:44 +0000

The inaugural Developer Challenge, which is to become an annual event, will see applicants compete to design an app which combines data on energy usage with third party information to help consumers reduce their energy use.

npower has launched the competition as part of its commitment to putting its customers at the heart of the business. It recently conducted extensive customer research which found that not only is online the customer channel of choice, but that npower.com is increasingly being viewed through mobile devices. Mobile traffic to the website is up 50% year on year, with one in five customers now viewing the site from their phone.

Paul Massara, Chief Executive Officer of RWE npower, comments: “As a business, every decision we make is driven by our customers. We have identified trends in our customers’ behaviour and are responding to these directly by commissioning ideas around an energy saving app.

“We want to work with the developer community to collate ideas which will improve our customers’ lives by helping them control their energy use and therefore save them money. As customers of energy suppliers themselves, we’re hoping the developer community will help to bring a unique perspective to the project.”

The competition will close on 29 July, after which all entries will be reviewed. The winner will be announced from the 15 August. Applications must be fully functional prototypes and come from teams of no more than three people. For more information, developers should head to www.thedeveloperchallenge.com.

Why bad hosting can ruin your site

Steve Jenkins — Wed, 05 Jun 2013 15:10:06 +0000

The Waiting (Is The Hardest Part)

Had Tom Petty and the Heartbreakers written their snappy hit twenty years later, it would almost certainly have been inspired by a slow-loading website.While clunky, heavy websites can grossly affect the amount of traffic you’ll get, bad hosting is undoubtedly a major factor.

Conservative estimates suggest that if a site takes longer than eight seconds to load, you’ve lost your audience. However, the reality is that we’re becoming increasingly impatient. Research carried out by Aberdeen Group has found that impatient site visitors leave after just five seconds.
Visitors to websites have short attention spans. If a page takes an age to load, you can bet they won’t hang around.

Not only this, a slow-loading site can be catastrophic when it comes to search engine rankings. A site that moves at a snail’s pace and is frequently down can forget being on page one of Google. Google’s algorithm is well known to penalise slow-loading websites.
But it’s not just the host that determines page speed – the architecture and weight of a site do, too.

Don’t be fooled by analytics, either. While Google analytics is a way of measuring key stats about who’s visited your site, it can be misleading.
Your site’s analytics might indicate you’ve had visitors, but what it won’t tell you is how many people bailed out as the page sluggishly tried to load.
So if your site is slow, it’s like shutting up shop early and actively turning customers away. As billionaire investor Warren Buffett once said: “It takes twenty years to build a reputation and five minutes to ruin it.” Slow sites can have that very same effect.

Locked Down

Something else that can damage the brand of your company online could be a breach of security. It might sound obvious, but it’s imperative that your site is both safe and secure, not just for you, but for your clients if you run an online store.

Security is very much the domain (excuse the pun!) of your host. They should offer you features such as firewall technology, anti-virus software and anti-malware applications.

If you don’t have any of these on your site, you risk being hacked, or at the very least, losing all your data. But you can’t take that risk — and a good host would never let you.

A good host will equip you with tools you can use to secure your site. This might include features such as SSL (Secure Sockets Layer) certificates, which provide a secure path between your website and a visitor’s browser, preventing their information from being stolen.

In addition to this, there is also SFTP to consider. SFTP stands for File Transfer Protocol, which enables you to securely upload files to your site. If you don’t want them to be intercepted and modified by hackers, make sure your host has a robust SFTP system in place. Other security issues you need to consider are backups and server maintenance, and what measures your host has in place to remedy any problems that might arise.

This is by no means an exhaustive list of security features you should look into. If you’re not sure of the features your site needs, your host should be the fountain of all knowledge. Ask them!

When it comes to the crunch – how do you select a good web host?

1. Make sure they’re available 24 hours a day, 365 days a year to support you. Accept nothing less – time is money, after all!
2. Find out a host’s SLA (Service Level Agreement). This is a contract detailing exactly what support you can expect and who takes care of what.
3. Ask which packages your host offers and don’t pay over the odds for levels of hosting you simply don’t need.
4. Check that your host has robust measures in place for backing up your data.
5. Ensure that any downtime maintenance is kept to a minimum and ascertain exactly how you’ll be compensated if your site is down

Daniel Foster, director of web hosting company 34SP.com