Tuesday, April 09, 2013

Standing on the shoulders of giants

Image: 'untitled
http://www.flickr.com/photos/34000660@N08/3347574988
Found on flickrcc.net

This lesson is about rapid prototype development using some of the tools we've explored so far (and a couple of new ones).
Let's say you've been given a brief: 'build a website about x' (x could be anything, today lets say it's the samsung galaxy phone). Where do you start?
The way I see it you need 3 things for a website to work:
  1. A usable site structure
  2. An appealing design
  3. Good content
Let's tackle them one at a time.

Site Structure

I've put this first because it seems to be a stumbling block for many people. What pages will your site need and how will you lay them out? Often a customer will have an idea about what pages they need. If not you might build a site around the activities it supports (e.g. looking for products, reading feedback about them, putting them in a virtual basket, looking at your basket, purchasing, tracking delivery), or it could be layed out along company lines (departments, regions etc).
But what if, like us, you're starting with a blank slate? A great way to lay out a site is to find out what people are interested in and go from there. If you had the money you could hire a marketing firm and do some work with focus groups. But if you're cash strapped Google has a great tool in it's adwords product: the keyword suggestion tool (to use it you may need to sign up for an account). Put in your starting term (in this case: samsung galaxy), tinker around with the settings  and you're away:

Looking at the results you'll see what people have been searching for (and how many searched for those terms). If you're interested in making money from running google ads you'll also see which terms are compeditive (i.e. have advertisers competing to put ads on your pages). When sorted the results for our samsung galaxy query look like this:


From here you could refine your search by clicking on any of the search results, or just look through the list for ideas. Looking at this list I'd say we need top level pages for the Galaxy A, S, S2, S3, Ace and Tab. By clicking on the dropdown next to the results and selecting 'Google Search' you can see what other people are writing about the subject, and also (at the bottom of the results page) see some more suggestions. Here's what comes back from 'samsung galaxy a':


These would make good second level pages (i.e. pages linked to from the top level 'samsung galaxy a' page.

Design

We've already had a bit of a look at fast tracking design using Lavish. We can take this a step further by using one of the bootstrap example templates. To use one of these, open the example then save the page to your local drive.

Content

If you're starting from scratch the quickest way to put in content is to find stuff other people have created and made available. That means content that has no copyright (public domain), or limited copyright (Creative Commons).
All the wikipedia content is released under a Creative Commons Attribution-ShareAlike License so there's a ton of text to begin with (don't forget to add the attribution though).
For media (music, pictures, video, clipart etc.) there's a range of sources. A good place to start looking is on the Creative Commons search page. I used flickrCC.net to find the image at the top of this post.
 Using pre-made content is a good start, but you'll get no credit from Google for recycling stuff they already know about. To get some ranking you need to add your own information, and/or get your visitors to add to it.




Tuesday, March 19, 2013

CSS Layout

Image: 'left arrow
http://www.flickr.com/photos/92709190@N00/787920010
Found on flickrcc.net

Getting sick of everything aligning to the left or the centre of the page?
This week I want to have a look at using CSS to layout you pages in a more appealing manner. I was going to write a post about it, but then came across the excellent Learn CSS layout site. Highly recommended.
After you've worked through some of the examples do yourself a favour by looking at Bootstrap Scaffolding - it takes a lot of the pain out of using CSS to lay out a page.

If you want some more detail than the admittedly sparse documentation on the bootstrap site, there's a nice selection of video tutorials on Bootstrap 101

Tuesday, March 12, 2013

Long content and linking pages

So far we've been working with single short pages of information. But what happens if you've got some big slabs of text to present? How would you present long texts so that people don't get overwhelmed? In this post we'll have a look at a few different solutions...

Setting up a template

Before we start let's create a space and some pages to work with.

We'll be using Twitter Bootstrap to style our pages. So if you haven't already got a copy, head over to the Bootstrap site and download a copy, then go to the template section of the 'Getting Started' tab and copy their page template.

We'll need some text on the page too. So that it's not too distracting, we'll use something nonsensical. Lorem Ipsum is the text of choice for web developers. Go to a lorem ipsum generator, grab 5 paragraphs and paste it into your template just below the 'Hello World' header.

Edit the text you just pasted so that it has <p> </p> tags around each paragraph.

Now you've created a template, save it into your bootstrap directory as page1.html
Now make 4 copies (page2.html, page3.html, page4.html and page5.html); we're set to go...

Linking separate pages

The traditional approach to presenting large amounts of information is to create separate pages of and link them together. You may need to put in several links so that viewers can navigate directly from one page to any other.

Add this code just after the body tag on page1.html:


    <a href="page2.html">Page 2</a>
    <a href="page3.html">Page 3</a>

To get your other pages linking back to the home page and to each other you just need to copy this code and edit it so that it points to the other pages. For example, on page2.html it should look like:


    <a href="page1.html">Page 1</a>
    <a href="page3.html">Page 3</a>

Update and test for page 1, 2 and 3.


Beautifying your links

The bootstrap css allows you to style your links so that they look like buttons. Just add the btn class to your anchor tags:


    <a href="page2.html" class="btn">Page 2</a>
    <a href="page3.html" class="btn">Page 3</a>

Adding some icons

You can add some icons to the buttons using the 'icon-xxx' class. See the Boostrap icon documentation for the various icon names available*.


                <a href="page2.html" class="btn"><i class="icon-book"></i> Page 2</a>
<a href="page3.html" class="btn"><i class="icon-book"></i> Page 3</a>



* If you want more icons, you can change the icon set available. This post tells you how to use the famfamfam icon set instead

Creating one long page 

Instead of creating separate pages, you could make one long scrolling page and linking to headings inside the document.

Open page4.html in your editor, copy and paste your H1 and lorem ipsum text a three of times so that you have a nice long bit of text (you should have 4 headings now, with text after each one of them). Change the heading text in each section so you can tell them apart (I just added a number after each one).

To link within the page we're going to create sets of anchor tags. One acting as a target, and the other linking to it. Just above the first H1 tag add the following code:

     <a name="1"></a>

This is our target.

Go to the bottom of the page and enter this code:

   <a href="#top">Top of page</a>

This link looks for the target with the name '1'. Clicking on it will take you to that anchor tag.

To complete the navigation for the page, we need to add named anchors above each of the H1 tags on the page: <a name="2"></a>, <a name="3"></a> and <a name="4"></a>

Below them we need to create links to the other sections, but instead of the anchor tags we used with our 3 page experiment, we'll use another Bootstrap component: the navbar.

To create a navbar for our page, add this code to the top of the page:



  <div class="navbar">
    <div class="navbar-inner">
      <ul class="nav">
        <li><a href="#1">Hello 1</a></li>
        <li><a href="#2">Hello 2</a></li>
        <li><a href="#3">Hello 3</a></li>
        <li><a href="#4">Hello 4</a></li>
      </ul>
    </div>
  </div>

Here we're using an unordered list of links to the named anchors on the page. We could copy this nav bar onto the page 4 times, so people could navigate from the end of each section, but a better idea would be to fix the navbar to the top of the page so that it remains visible as you scroll up and down through the content. You can do this by adding the class: navbar-fixed-top to the navbar link:

<div class="navbar navbar-fixed-top">



Making a tabbed interface

A solution to the confusion our 'scrolling page of death' might create, is to hide sections of the page until they're needed. You can do this by making a tabbed interface.

The easiest way to start is by copying the code from the Bootstrap site:


<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

You can see that each of the tabs are defined in an unordered list and that they link to an ID on the page (#tab1, #tab2). Each of these are IDs for the divs that contain the content (e.g. <div class="tab-pane active" id="tab1">)

Replace the code: <p>I'm in Section 1.</p> with our H1 and Lorem ipsum text (and the other <p>Howdy, I'm in Section 2.</p> with the second section) and we've got the start of a tabbed interface. Add two more tabs for the remaining sections and we've converted our page altogether:



Something to explore

A different approach than using a tabbed interface is the collapsible or accordion page but I'm tired of typing now so I'll leave this one for you to explore and learn about ;-)

Credits

Image: 'The Long Book
http://www.flickr.com/photos/23224700@N00/2970610049
Found on flickrcc.net