Category Archives: HTML 5

HTML 5, CSS 3, Responsive Designs, Device portable Designs

10 BENEFITS OF USING WORDPRESS TO POWER YOUR COMPANY’S WEBSITE

word-press-benefitsWordPress has been around since 2003 and is the most popular blogging software on the market. Over the last few years, WordPress has also become the content management software of choice for non-blogging websites. Here are the top 10 reasons why WordPress is so popular and why you might want to consider switching to a WordPress platform for your company’s website.

1. Ease of Use

WordPress is very easy to use and has an intuitive interface. Adding new pages, blog posts, images, etc. on a regular basis is a breeze and can be done quickly. Because the technology is so simple, time spent on formatting is greatly reduced.

2. Manage Your Website from Any Computer

WordPress is browser-based. You can login from any Internet connected computer and manage your site.

3. No HTML Editing or FTP Software Required

WordPress is a self-contained system and does not require HTML editing software (such as Adobe Contribute or Dreamweaver). You can create a new page or blog post, format text, upload images (and edit them), upload documents, video files, image galleries, etc. all without the need for additional HTML or FTP software.

4. Search Engines Love WordPress Sites

The code behind WordPress is very clean and simple, making it easy for search engines to read and index a site’s content. In addition, each page, post, and image can have its own meta tag keywords, description, and title, and be optimized for specific keywords, allowing for very precise search engine optimization. You can also use tags to further enhance your search engine optimization efforts.

5. You Have Control of Your Site

No more waiting for your web designer to make simple updates to your site. With WordPress, you have control of nearly every aspect of your site and can easily make those simple updates yourself.

6. The Design of Your Website is 100% Customizable

WordPress acts as the engine for your website. The look and feel of the site can be 100% customized so your brand can shine through on your site and provide a unique experience to your visitors.

7. A Blog is Built-in and Ready to Go

Since WordPress was originally created as a blogging platform, blogging capabilities are built-in and are easy to integrate, if desired. Setting up RSS / email subscriptions to your blog, commenting capabilities, and automatically adding the most recent blog posts to other pages of the site (your home page, for example) are also very simple to set-up, and help to extend your company’s reach and make your site more dynamic and interactive.

8. Extend the Functionality of Your Site with Plugins

Want to add an event calendar, video gallery, Twitter Feed, Facebook Fan Box, and more to your site? WordPress makes this possible with plugins, most of which are free or very reasonably priced.

9. Your Site Can Grow as Your Business Grows

WordPress sites are very scalable. You can have hundreds of thousands of pages or blog posts on your site and the performance of the site will not be compromised in the least.

10. Have Multiple Users

As an administrator of a WordPress site, you can set-up multiple users for the website and assign access levels and capabilities to each user.

More posts 

100 CSS and JavaScript tutorials to boost your skills

There are so many blogs and sites publishing high quality CSS and JavaScript tutorials these days that it can be hard to keep track – and it’s easy to miss an amazing tutorial completely. And sod’s law dictates that the one you do miss will be the one that could have saved you days of work on your latest project

So to help out we’ve rounded up some of the very best CSS and JavaScript tutorials from around the web, covering web design techniques old and new, how to use the latest tools and frameworks, and a series of projects you can sink your teeth into. They’re all written by leading experts in the field, and many come with downloadable code you can play around with. Finally, we’ve grouped the tutorials into a series of categories to make it easier to find what you’re looking for.

Read the rest of this entry

Top tools for testing your responsive site

Technical leads John Cleveley and Tom Maslen reveal the tools they use to ensure the BBC News site behaves itself.

RWD has far more visual variations than traditional approaches. This can lead to frontend code becoming increasingly fragile.

CSS preprocessors, such as Sass, can help in keeping code DRY and modular. For JavaScript, RequireJS promotes great, decoupled code if used correctly. But even with the best code in the world, testing all the responsive variations is the only way to be confident the site works.

Real devices

You can’t get better than having real devices to test on: feeling the tactile response and quirks can make the difference between a good site and a great site. This is tough for small teams who can’t afford a cupboard full of devices, but even investing in a few of the most popular ones will be money well spent.

Simultaneous device browsing

Once you start to build up your collection, a tool like Remote Preview saves a lot of time. It lets you preview your site on a large number of mobile devices at the same time, so you can quickly scan through your pages across devices and pick up layout and behaviour issues.

Automated behaviour tests

If manual testing sounds too much like hard work, adding a suite of automated tests is well worth the initial upfront cost. We use a combination of:

For responsive sites, you can easily resize the PhantomJS window to check behaviour at your breakpoints. For example, we can test if HTTP requests for ‘Tablet’ components aren’t requested by smaller devices.

Visual regression tests

PhantomJS has another killer feature. You can take fully rendered screen shots of your site. We use this to crawl the site, taking shots of pages on our live site and re-running on our test server. You can process the images with ImageMagick to compare each page at each resolution. Picking out visual regressions becomes a piece of cake.

Performance testing

Performance is probably the easiest area to neglect. But ignoring it can slowly ruin your site. Again, PhantomJS to the rescue! The browser has an API to save an HTTP ARchive (HAR) file, which records all the requests made by the browser.

Uploading HAR data to a tool such as HAR Storage or HTTP Archive helps to visualise HTTP metrics over time and highlights areas to optimise.

http://www.creativebloq.com/web-design/top-tools-testing-your-responsive-site-10134730

Create a sleek custom page with Bootstrap

Mark Otto, creator of Bootstrap, explains how to get started with the frontend toolkit, and how to transition from vanilla starter template to distinctive page.

In this tutorial, Bootstrap creator Mark Otto will walk you through the basics of Bootstrap: what’s included, how to use it in any project, and how to best customise a typical Bootstrap template.

“Using Bootstrap doesn’t have to stop with its default components and styles,” he says. “With a little HTML and CSS, we can do just about anything. So, let’s dive in!

Getting started

While all CSS in Bootstrap is written in LESS, we will only be using the fully compiled CSS (and a sprinkling of JavaScript). To best showcase how to use Bootstrap we’ll be creating a brand new example template to be included in a future release of the project.

We’ve got everything you’ll need for this project wrapped up in a separate zip, which you can download here. Upon opening, you’ll find Bootstrap’s compiled CSS, compiled JavaScript, and our new template in various stages.

Bootstrap tutorial
The Bootstrap docs are another example of how to customise on top of the framework to create a more appealing site, and give it your own distinct flavour

We need to put together the most basic version of our page template: HTML scaffolding to render the page and link to the Bootstrap assets.

<!DOCTYPE html>
<html>
<head>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<h1>Hello, world!</h1>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
<script src=”js/bootstrap.min.js”></script>
</body>
</html>

This is the most basic form of a Bootstrapped web page: simple HTML with just the CSS included. That can work fine in some cases, but what we really want is a page filled with a few Bootstrap components, some custom content and a few design tweaks to top it off.

It’s time to add some Bootstrap components. We’ll swap our ‘hello world’ message for a nav bar and carousel, and we’ll use the grid system to write a three-column section for our marketing copy.

<div>
<div>…</div>
</div>
<div>…</div>
<div>
<div>
<div>…</div>
<div>…</div>
<div>…</div>
</div>
</div>

Bootstrap tutorial
The default Bootstrap carousel before customisation features a few of the more obvious and contrasting styles for usability and readability

Do note that we’re also simplifying the HTML in this post, but the complete code is in the downloads.

Creating columns in Bootstrap is easy with the built-in 12-column grid system. To use it, create a .row to house the columns. For each column of content, specify how many grid units the column should span.

In this case, we want three columns spanning four grid units, so we have three instances of .span4. The grid system enables you to make any layout to house just about any content – just create the columns and add in your content.

Below the columns we’ll add our own new component, .featurette (using some of the coding best practices found in Bootstrap), to house some larger marketing messaging and visuals.

<div>
<img src=”…”>
<h2>…</h2>
<p>…</p>
</div>
<hr>
<div>
<img src=”…”>
<h2>…</h2>
<p>…</p>
</div>

You’ll see we have a base class, .featurette, for the core component. Within that, we’ll use prefixed classes such as .featurette-image and .featurette-heading, to easily target elements within our component. Prefixed classes ensure shorter CSS selectors, fewer lines of code, and smarter categorical naming schemes. With these basics in place for our new component, it’s time to move on.

Customise with CSS

OK, so we’ve Bootstrapped our new HTML page, utilising some of the ready-made components and grid system, as well as writing our own component. Next let’s customise the default carousel and nav bar a bit. We’ll stretch out the carousel and style each slide, then increase the height of the nav bar and layer it on top of the carousel.

There are two basic ways to customise Bootstrap components: modifying HTML and adding additional CSS. The best implementations do both, and this tutorial is no different. If you recall from our HTML, we wrapped the nav bar in its own container (for centring on the page) while the carousel sits on its own.

This is important because it enables us to easily position them while enabling more customisation of the carousel slides. Finagle the nav bar into position by targeting its container, .nav bar-wrapper with a bit of CSS:

.nav bar-wrapper {
position: relative;
z-index: 10;
margin-top: 20px;
margin-bottom: −90px;
}

We use position and z-index to render the nav bar on a higher plane than the carousel, and a negative ‘margin-bottom’ to pull up the carousel. We’ll also increase the padding on the nav bar links to make it a bit taller.

.nav bar .brand,
.nav bar .nav > li > a {
padding: 15px 20px;
}

Bootstrap tutorial
At this point we have only skeletal markup and content with basic Bootstrap styles. This lets you apply your own style to the bare bones of the framwork

Now, we have to align the text in each carousel slide with the rest of the page. By default, the carousel includes only an <img> for the background of each slide and a <div> to house the caption.

<div>
<div>
<div>
<img src=”…”> <div>…</div>
</div>
</div>
</div>

The carousel will stretch to fill its parent as we set width: 100%; in the Bootstrap core. To align the custom content within each slide to the rest of the page, add a <div class=“container”> around the caption. Once done, the slide markup should look like this:

<div>
<img src=”…”>
<div>
<div>…</div>
</div>
</div>

Bootstrap tutorial
With the modifications complete, we have the slightly restyled nav bar on top of our full-width, customised carousel – and it’s looking pretty nice already

To make the carousel look like our final example, we’ll change the next and previous controls and customise the captions. The CSS is lightweight, involving some light overrides and modifications.

  text-shadow: 0 1px 1px rgba(0,0,0,.4); /* Higher contrast */  background-color: transparent;
border: 0;
}
.carousel-caption { position: static;
max-width: 50%;
padding: 0;
margin-bottom: 100px;
background-color: transparent;
}

With a few tweaks to the text within the caption, we have our finished carousel. Lightweight HTML changes and around 20 lines of CSS give us a custom look, while maintaining all the awesomeness of Bootstrap’s default component.

Now it’s time to write our own component, the featurette. We already have almost all the HTML written, so let’s just get some basic styles in place. Our inspiration for this component is marketing content like that of Apple: big headings, lightweight text and some large visuals.

 .featurette-divider {
margin: 80px 0; /* <hr> between each */
}
.featurette {
padding-top: 120px;
overflow: hidden; /* Clear floats */
}
.featurette-image {
margin-top: −120px; /* Vertically center image with the text */
}
.featurette-heading {
font-size: 50px;
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
.featurette-image.pull-left {
margin-right: 40px;
}
.featurette-image.pull-right {
margin-left: 40px;
}

Bootstrap tutorial
Thousands of sites using Bootstrap – like those featured above – make the best use of the toolkit by combining default styles with their own flair

And that’s it really. Given Bootstrap’s default styles, the amount of custom CSS we have to write for a new component is quite low. Bootstrap’s default typography styles such as .lead provide us with great looking marketing text while utility classes like .pull-right enable super fast floats. Without these, we’d have to rewrite common CSS for each custom component.

http://www.creativebloq.com/web-design/create-sleek-custom-page-bootstrap-9134283

Create custom tables with WebGrid

ASP.NET MVC has made the task of creating an interactive table straightforward. Michael Schmalz demonstrates a neat technique for styling it any way you wish

If you are building data tables with paging and sorting from scratch when using ASP.NET MVC, you are missing out on one of the easiest-to-use helpers. WebGrid gives you built-in support for clickable headers for sorting and paging in the footer. But there is a lot of misinformation about what you can and cannot do with the WebGrid.

This article covers creating a fully formatted table with a strongly typed view using the WebGrid helper. The full code for this project includes views that show the WebGrid with no formatting, with footer CSS formatting alone, with table formatting, and our main topic – customising the footer with paging and other information.

The data for this project is an enumerable list created in the controller; I would typically use SQL Server and access the data with Entity Framework. I created the data in the controller to keep it short enough for an article. You will be using a data model in this example, like you would with Entity Framework, but you won’t be storing or accessing the data in a database.

If you want to see what is going on with your page while editing, you can press F12 in Internet Explorer and see how the styles are being applied

Understanding the model

The WebGrid helper returns a regular HTML table. You can apply CSS styles to format it as you would any other table. First, you’ll build the grid and see how to format the columns, rows and footer. Next, you’ll see how to customise the paging footer with extra information, via a nice technique I’ve developed. For this example, you will use data in a model called Transaction – it’s simply: public class Transaction

public class Transaction
  { public int TransactionID { get; set; }
    public DateTime TranDate { get; set; }
    public string Description { get; set; }
    public int Units { get; set; }
    public double UnitPrice { get; set; }
    public double Total { get; set; } }

This should be in the Models folder in the supporting download for the tutorial with the name Transaction.cs. In the controller, you will populate this model with the following code (to save space, this is just a sample of three records):

public IEnumerable<Transaction> GetList()
{var tr = new List<Transaction>() {
new Transaction { TransactionID = 1, Description = “Large Latte”,
TranDate = System.DateTime.Parse(“6/1/2012”), Units = 5, UnitPrice = 3.5 },
new Transaction { TransactionID = 2, Description = “Skinny Latte”,
TranDate = System.DateTime.Parse(“6/5/2012”), Units = 7, UnitPrice = 3.25 },
………
new Transaction { TransactionID = 14, Description = “Medium Coffee of the Day”, TranDate = System.DateTime.Parse(“9/13/2012”), Units = 58, UnitPrice = 2.15 }};
  return tr;}

In the full project code, I call this method from all of the views to populate the data to send to the view. Also, you may have noticed that the model has a Total field that is not being populated; I decided not to populate that in the controller so that I can show you how to have a calculated field in a WebGrid. In the full project code I have two where it is calculated in the controller.

The controller code for the view is only a few lines, because the paging and sorting is handled by the WebGrid helper. As the view includes a form to filter the data, there are two ActionResult procedures in the controller for this view.

The HttpPost ActionResult just does a redirect, and includes the parameters for the date range. If you did it this way, the date range would be embedded in the clickable headers automatically by the WebGrid helper; if you just returned the filtered view, when you clicked the header it would remove the filter.

public ActionResult Grid(DateTime? Begin, DateTime? End)
  {var tr = GetList();
    if (Begin != null && End != null)
    { DateTime begindt = Convert.ToDateTime(Begin);
      DateTime enddt = Convert.ToDateTime(End).AddDays(1);
      var tr2 = tr.Where(a => a.TranDate >= begindt && a.TranDate < enddt);
      return View(tr2);}
    return View(tr);}
  [HttpPost]
public ActionResult Grid(FormCollection fc)
  {return RedirectToAction(“Grid”, new { Begin = fc[“begin”], End = fc[“end”] });}

The first ActionResult has two optional parameters (designated by the question mark after the data type) and it works fairly straightforwardly. First, the list is retrieved with the code shown earlier.

If both the Begin and End parameters are not null, they are converted to work with the query. Since the DateTime field can include the time portion, the end date is going to have one day added and the filter is set for less than the End parameter plus one day.

The filtering is being done using lambda expressions, which are very useful when working with data.

Our unformatted WebGrid, showing the default footer style. Over the course of this tutorial, we will set up a custom style for the footer

The next ActionResult takes the FormCollection and the Begin and End parameters are returned to the main action. If you compare this to trying to put all of the paging and sorting in the controller, you will see that this is very compact code. Now you are ready to work on the view. The first line of code on the view sets it up to be a strongly-typed view. That reads:

@model IEnumerable<WebGridExample.Models.Transaction>

This means that the view expects the controller to pass an enumerable collection of the model Transaction to the view. This is the data that is being passed to the WebGrid helper. The next section of code is the style block that includes the CSS classes that you will be using in the WebGrid.

<style type=”text/css”>
.tranlist tr:nth-child(odd) { background-colour: #afc1d9; }
.tranlist tr:nth-child(even) { background-colour: white; }
.tranlist th { background-colour: Black; colour: White; }
.tranlist a { colour: White; }
.smallcolumn {min-width:20px;}
.medcolumn {min-width: 50px;}.bigcolumn{min-width:100px; }
.linkcolumn { min-width: 90px; text-align: center; } .linkcolumn a { colour: Black;
} .linkcolumn a:hover { colour: Blue; }
.footstuff { background-colour: White; colour: Red; }
.footstuff a:visited { colour: Blue; } .footstuff a { colour: Blue;}
.footstuff td { background-colour: White; border-colour: White; }
.headerstyle th {text-transform: capitalize; text-align: center;}
</style>

These styles are doing the following: setting different background colours for alternating rows, setting the table header black with white text, setting minimum widths and styles for certain columns, and setting the style for the footer. The actual styles here aren’t that important; what is important is how you tell the WebGrid how to use those styles, which we’ll look at soon.

Creating a WebGrid

The next section of code creates a WebGrid with the model and sets up page variables to hold the values from the query string if they exist.

@{ var grid = new WebGrid(Model, defaultSort: “TransactionID”, rowsPerPage: 5);
  if (Request.QueryString[grid.SortDirectionFieldName].IsEmpty())
  {grid.SortDirection = SortDirection.Descending;}
  DateTime beg = System.DateTime.Now; DateTime end = System.DateTime.
  Now;
  if (Model.Count() != 0) {beg = Model.Min(a => a.TranDate);
    end = Model.Max(b => b.TranDate);} }

This just creates the grid object, passes in the data from the model, sets the sort field to TransactionID, and sets up the paging for five rows per page. You need to call a different method to return HTML to the browser. The other code sets an initial sort direction of descending to show the newest transactions first, and gets the dates for the newest and oldest transactions. If you have more than one grid on the page, use grid.SortDirectionFieldName instead of the default of sortdir so that the field name can be changed. The next section of code creates the form so that you can implement filtering by date range.

<form id=”daterange”>
Begin <input name=”begin” id=”begin” type=”date” value=”@beg.
ToShortDateString()” />
End <input name=”end” id=”end” type=”date” value=”@end.
ToShortDateString()” />
<input style=”background-colour: #afc1d9; border-radius: 8px; cursor: pointer;”
type=”submit” value=”submit” />
</form>

The date range will show the current date if the data set is empty, and the first and last date in the data set if there are records. There is minimal formatting on the submit button. Next, we are ready for the code that creates the grid:

@grid.GetHtml(mode: WebGridPagerModes.All, tableStyle: “tranlist”,
headerStyle: “headerstyle”, firstText: “First”, lastText: “Last”,
columns: grid.Columns( grid.Column(“TranDate”, header: “Trans Date”, format:
@<text>@item.TranDate.ToShortDateString()</text>),
grid.Column(“Description”, header: “Transaction Description”, style:
“bigcolumn”), grid.Column(“Units”, header: “Units”, style: “smallcolumn”),
grid.Column(“UnitPrice”, header: “Unit Price”, format: @<text>@item.UnitPrice.
ToString(“$0.00”)</text>, style: “medcolumn”),
grid.Column(“Total”, canSort: false, header: “Total Price”, format: @<text>@
{double q = (item.Units * item.UnitPrice);} @q.ToString(“$0.00”)</text>, style:
“medcolumn”),
grid.Column(“TransactionID”, header: “Action”, style: “linkcolumn”, canSort:
false,
format: @<text> @Html.ActionLink(“Edit”, “Edit”, new { id = item.TransactionID })
| @Html.ActionLink(“Delete”, “Delete”, new { id = item.TransactionID })</text>)))

The unformatted WebGrid again, but this time with values for the Total column being calculated in the controller

Creating a custom paging footer

The preceding code will give you the view with normal paging in the footer. Next we’ll customise the paging footer, putting the paging in the last column and the total record count in the second, by editing the HTML produced by the WebGrid helper. If you take this view in the browser and hit View Source, you will see that the paging is inside the tags <tfoot><tr><td>. We can pass the table from the WebGrid helper to a string and use the C# Replace method to edit the footer:

.ToString().Replace(“<tfoot><tr><td”,”<tfoot><tr class=’footstuff’><td></td><td>
Total Record Count ” + grid.TotalRowCount + “</td><td></td><td></td>
<td><td><td”)

This applies the footstuff class to the footer, creates both an empty column and one with the text we wanted to add, then puts in three more blank columns, and ends with the final <td partial tag that will be followed by the paging information. The next problem you have is that if you just return the string it will show as the markup text and won’t be shown as HTML. We fix this by wrapping all of this code in @MvcHtmlString.Create(…code goes here…). This takes the string you are returning and displays it as HTML. If you used grid.Rows.Count, it would show how many rows are on that particular page. You could use all of this data to show something like Records X to Y of XX. Right after the code that sets up the grid, you would write:

@{ int firstRecord = (grid.PageIndex * grid.RowsPerPage) + 1;
  int lastRecord = (grid.PageIndex * grid.RowsPerPage) + grid.Rows.Count();
}

This creates two page variables that hold values for the first and last records shown on the current page. The PageIndex property is a zero-based index of the current page, so you don’t need to subtract one before you multiply by the RowsPerPage to get the last record on the previous page. Then you add one to get the first record and add the number of rows on the current page to get the last record on the page. In the footer, you would use the following code in place of the code where the current code for Total Record Count is:

<td>Records ” + firstRecord + ” to ” + lastRecord + ” of ” + grid.TotalRowCount + “</td>

If you wanted the text for the record count to be in a different colour, you could apply a different class or even just use a style tag like the line below.

<td style=’colour: black;’>Records ” …</td>

Our finished formatted table, showing the custom formatting in the footer. This is used for paging, and to display the calculated values for the Records count
Via: http://www.creativebloq.com/web-design/create-custom-tables-webgrid-9134626

 

4 ways to create CSS that’s modular and scalable

Several methods have emerged to help designers write scalable and modular HTML and CSS. Freelance web designer Steven Bradley presents an overview of four.

Modular and scalable CSS

Modular code is reusable code. It can be combined in a variety of ways, making it flexible and scalable, allowing you to iterate code blocks independently and leading to better performance and more maintainable sites.

Read the rest of this entry

Build a custom HTML5 video player

Media players that are built in to browsers vary in design. Ian Devlin explains how to use HTML5’s media API to build a custom player with a UI that stays consistent no matter what browser you use.

  • Knowledge needed: Intermediate HTML, intermediate JavaScript, intermediate CSS
  • Requires: Text editor, HTML5-enabled browser
  • Project time: 2-3 hours

Download the source files for this HTML5 tutorial

It’s common knowledge that with HTML5 websites you can play audio and video files directly in the browser without the need for third-party plug-ins, via the <audio> and <video> elements. But since the specification doesn’t define how the controls for audio and video files should look, each browser vendor has designed its own interface for its player, which of course provides a different user experience for each browser.

Read the rest of this entry

Adobe Creative Cloud: everything you need to know

2013 has been a big year for Adobe. Rather than jumping from CS6 to CS7, the design software giant instead released new ‘CC’ versions of Photoshop, Illustrator, Dreamweaver, After Effects, InDesign, and more, exclusively through its Creative Cloud subscription service. All new features and products will be released this way from now on – so unless you want to be stuck on CS6 forever, you need to sign up.

Are you going to subscribe? There’s a lot to take in before you make the decision, so here we’ve collected our articles about the Creative Cloud together in one handy post to help you out. See below to discover where you can find the exact details you’re looking for…

Read the rest of this entry

Build a basic responsive site with CSS

Responsive design is much misunderstood. Jason Michael lays to rest some myths, and then walks us through building a simple responsive website

 

Everyone’s talking about responsive web design. But does everyone understand what it’s for? I’m not sure. Many web designers and developers seem to me to have misunderstood the problem it’s trying to solve.

Put simply, it’s not about making sites for mobile devices, it’s about adapting layouts to viewport sizes.

In this tutorial I’ll look at the principles behind responsive web design in detail, so we’re sure to understand the concepts correctly. Once we’ve got that out of the way, I’ll walk you through building a website that scales perfectly on both large and small screens.

Responsive web design has mainly become a hot topic because more and more people are using mobile devices such as iPhones, iPads, and BlackBerrys to access the internet.
Read the rest of this entry

How to design great web forms

Need to make a web form? Unsure where to start? Jessica Enders has a recipe for forms that’ll work for you – and the people filling them in

This article first appeared in issue 240 of .net magazine – the world’s best-selling magazine for web designers and developers.

When it comes to forms, the temptation is to dive straight into the details. Do we need to collect phone numbers or just email addresses? Should this button say ‘Submit’ or ‘Apply’? And so on. But as with any successful design or development project, the best place to start is establishing the overall framework.

As the author of the famous Seven Habits of Highly Effective People, Steven R Covey, said: “Begin with the end in mind.” For forms, it’s important to clearly define what the form must achieve. The ‘six Ws’ of journalism are useful:

  • What information do we need to collect?
  • Why is that information needed?
  • Who is going to use this information?
  • How will the information be used?
  • When do we need the information?
  • Where is the information going to live?

You’ll see that these questions don’t talk about forms at all – their focus is on information. The form is just a tool for gathering this information. Therefore, its design should be determined by the information need. Discussing the above questions with key stakeholders will help elicit constraints, which will also influence the design of the form. These constraints may be about any part of the process, from the development platform (for example, to ensure connectivity with legacy systems) through to the need to collect data in particular formats (to be consistent with relevant standards, for instance).

Read the rest of this entry

%d bloggers like this: