The Grid System

 Uncategorized  Comments Off on The Grid System
Feb 202013
 

The Grid

Introduction

Design is relationships. Design is a relationship between form and content.” These are the now famous words of Paul Rand. (Kroeger 2008)

This is as simple as it gets.  The definition of design and the journey through its history shows that establishing and ordering that relationship has been core to the developmental strides taken in the generic field of design.  In the drive for continuous improvement, one of the manifestations of our pre-occupation with order has been the breakthrough and subsequent gradual improvement of the grid system. 

Origin

Grids originated with graphic design and are very popular in print medium.  They have only become widely used online in the past few years.  They have however exploded in popularity and can now be found as a component of many websites.

Website design frameworks producing HTML and CSS had existed for a while before newer frameworks popularised the use of grid-based layouts.  Some examples of grid system frameworks are:

  • 960 grid system
  • Grid system generator
  • Semantic
  • Flexible CSS Grid
  • Modular Grid Pattern

What is a Grid?

“A design grid is a hidden system of guidelines, borders and columns into which elements are placed and to which they are aligned.  It is a simple and surprisingly flexible system for providing a framework for the material being presented within a brochure, booklet, ad (singly or as part of a campaign) or throughout a website.” (Krause, 2004)

The grid is the most vivid manifestation of the will to order in graphic design. (Boulton, 2005)

 

Types of Grids

gridtypes

There are several types of grids from which a designer can choose from.  The simplest of  them is the the rule of thirds. It’s a method used in photograph also. It involves dividing a page into thirds with two equally spaced vertical and/or horizontal lines so that important compositional elements can be placed along these lines or intersections.

Goldern ratio is another popular method used (approximately 1.618)  for proportioning.  The goldern ratio has been used for centuries by architects, artists and book designers for its aesthetically pleasing qualities and has been studied by mathematicians for its presence throughout the universe..

My personal favorite method is to divide a page into several equal sized columns, which is often used in newspapers and magazines.  These types of publications also commonly use a baseline grid, which is a set of horizontal lines on a page that the baseline of all type sits on.

Anatomy of a Grid

Grids act as guides for the placement of elements in a design. No matter how simple or complex, grids share some common parts, each fulfilling a specific function. Not every one of these parts needs to be present in every grid. (Samara, 2007)

When a grid is being discussed especially online, the focus is mostly on columns and to a lesser extent baselines.  The diagram and definition below gives a foundation for the common language of grids and makes it clear that there is more to grids than columns and baselines.

 

anatomy

 

Format in simplest form a format is the browser window even as page is page is format to a book or magazine i.e. the area which design sits. It defines the live area of a design where type, images, and other media are present.

Margins are the white spaces and seen as the negative space between the edge of the format and the outer edge of the content.  In a composition, the overall tension or lack of it is determined by the proportion of the margin.  So the bigger the margin, the lesser the tension created.

Larger margins create more white spaces and help focus attention on the positive space of the design.  Larger margins also help the eye find a place to rest and can be a good area to place subordinate information.

Flowlines could be seen as horizontal lines that break the space into horizontal bands.  They can be used to help guide the eye across the page and can be used to impose starting and stopping points for text and images to be aligned.

Modules are individual units of space created from inserting rows and columns.  They are the basic building blocks of grids.  When repeated, they create columns and rows.

Spatial zones are fields of adjacent modules.  They are groups of modules that cross multiple rows and columns.

Columns are the vertical division of space on a page.  There could be any number of columns in a grid.  More columns lead to more flexibility, but can also make the grid difficult to work with.  Column widths can be equal or can vary across a grid.

Rows are the horizontal equivalent of columns.  Online, itis harder to plan for rows as the height of the format is often inconsistent and dynamic.

Gutters are the spaces that separate rows and columns or two facing pages.  Typically, we think of gutters as the spaces between columns, but they are also the spaces between rows.

 

The Advantages and Disadvantages of Using Grid Systems in Web Design

More and more designers these days are using grids (e.g. 960px) in their web designs.  While grids originated with graphic design and are very popular in print mediums, they have only become widely used online in the past few years.  However, they have exploded in popularity and can now be found as a component of many, many web sites.

Grids are used to structure a page layout.  They function as a framework on which to place all of the site’s different components.  A grid is literally a framework of pixels running horizontally and vertically, just like the horizontal and vertical lines on the grids we all used to plot points along the X and Y axis in high school geometry.

This allows elements to be aligned horizontally and vertically, which creates columns that keep things organized.  A well-used grid can help a site to feel more orderly and reduce visual chaos.

Using a grid has several advantages, both while designing the site and when looking at the finished product.   A well-used grid can help a designer visualize the proportions that will look best on the site and to achieve a balance with the white space in the margins of each element.  It helps the designer highlight the most important elements without overcrowding the site.

A grid can also provide stability, making it easier to build the site. Since the grid gives a guideline for how things should be aligned and laid out, the site can be pulled together much more quickly than if each individual element had to be placed and aligned by hand. Plus, if elements need to be switched around, this can be done quickly and painlessly due to the structure and organization that a grid provides.

Clean, modern websites can be created using a grid layout; this is a popular trend in web design today. Aesthetically, designing along a grid can be very pleasing, which is why many popular blogs and sites have turned to a gridded look.

One of the biggest benefits of grid-based web design can be seen in its power to direct the user to specific content you want them to interact with.  For example, it can make it so simple such as the site title, logo and even the brand image itself stand out. The grid layout favours this mode making sure the most important content can be seen without scrolling. Combined with the vertical and horizontal axes that come into play, keeping content above the fold allows the grid to deliver the user-friendly experience visitors demand.

Also, many sites incorporate third-party advertisements to generate the money needed for hosting and other purposes. The grid-based system offers a solution to problems that may occur with Google regarding SEO. So when planning in advance, web designers can lay out an architecture that perfectly accommodates the sections and boxes advertisements will be displayed in.  More importantly, this approach can support advertisements in a way that gives them the necessary visibility without overshadowing natural content.  Sites could get in trouble with Google if a site is highlighting sponsored content more than it is organic content.

However, there are some things to keep in mind when working with grids, as they are not ideal for every site. Some people argue that using a grid as a design framework can stifle creativity, as it provides a ready-made organizational structure. For some, particularly those designing sites that need a little more abstraction, a grid can feel too stifled or too contained.

Sites with little content may also want to stay away from grids, as aesthetically speaking a grid framework does require a fair amount of content to work. Without enough content to fill out the grid, it doesn’t make sense to attempt to use one.

While a grid can speed up the design process in many cases, this is not true for all. A grid helps speed up design by providing an organizational framework, but a site which already has an organizational system in place or which has only a small amount of uncomplicated content does not necessarily need a grid to aid in organization. 

 

Responsive Web Design

Grid designs can work wonders for sites that are meant to be viewed on a wide variety of devices. A grid can help produce a site that looks and functions as good on a tablet or smartphone as it does on a desktop or laptop computer. The system these layouts use allows a single set of programming code to be used across a multitude of devices, which makes it an ideal tool for developers as well. Using a single set of code not only makes the site easier to build for designers, but also easier to manage for a webmaster.

responsive

User Experience Implications

Human mind always attempts to find a pattern and system of logic in everything, including visual design.  Consistency is a key factor that helps a designer achieve this with its users. Since a grid is a consistent system for element placements, “sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page (or site), while developers can update the layout in a well thought-out, consistent way.” (Friedman, 2007)

Closely related to this and loosely based on the Gestalt Principle of Closure, the user can better relate with well-planned white spaces since the invisible but definite grid framework is planted in the user’s sub consciousness.  Also, people have a priori understanding of how things work or at least an opinion of how it should work and many times, the best designs take these preconceptions into consideration and a well formed grid system is largely based upon this. With a grid that is well formed and implemented, users will easily perceive importance due to positional contrast and visual hierarchy.

Analyses

The grid creates a systematic and consistent rule for placing objects. It creates a visual rhythm. It makes it easier and more pleasant for the eye to scan the objects on the page. Page designs that do not use a grid often tend to look ‘messy’ or ‘unprofessional’.

www.audi.nl

audi
At the unit level of cells (e.g. 20×20 pixels) with Audi example above where a strict underlying grid is used for all elements on the page, in print design such grids are called ‘modular’ grids.

At the column level (e.g. 4 columns) and the Abn Amro example below where a grid is used for defining the overall layout in terms of columns and margins.  In print design, such grids are called ‘column’ grids.

abn

 

 

In this example with the Abn-Amro shop, it can be seen that different types of grid are being used. Not a strict modular grid, but a grid defining some columns, margins and horizontal evenly spaced guides.

Simple station homepage

simplystation

960px grid with ~16px base line height. 3-column header containing brand banner and at the center the slogan “creates a powerful video site”.

Below is a section split into 4 columns of which 3 have content (mini-banners) and the outer 2 columns are empty.

Finally the Design & web engineering, our philosophy and sustainable concept appear logically in the flow of the visual hierarchy created by the grid.

Company menu

simplystation2

Appears to be a 960px grid with 16unit.  This page mainly has 2 columns from the head through to the body. The footer has 4 columns. 

 

Summary

All grids are functional but not all grids will function properly for every project.  Part of the duty of the designer is to determine which grid will work for each project and how best to implement it.

While it is not the ideal choice for all sites, particularly those that are very simple or very abstract, a grid can be a highly useful tool in designing many sites. Its inherent organizational properties and aesthetic guidelines have helped many designers to streamline their sites and simplify their design process. Using a grid system may not be for everyone, but for many people, a grid system may be the way to go.

 

 

References

http://planmysite.com/blog/the-advantages-and-disadvantages-of-using-grid-systems-in-web-design
http://www.smashingmagazine.com/2010/04/29/grid-based-web-design-simplified/
http://www.designer-daily.com/the-use-of-grids-in-website-design-6639
http://webdesignerwall.com/trends/960-grid-system-is-getting-old
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/
http://www.responsivegridsystem.com/
http://www.topdesignmag.com/top-5-benefits-of-grid-based-web-design/
http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/
http://www.tripwiremagazine.com/2012/11/grid-style-in-web-design.html
http://webdesignerwall.com/trends/grid-and-column-designs
http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1
“Making and Breaking the Grid” by Timothy Samara.
John O’Nolan – Fully Understanding Contrast in Design (2010)
Jim Krause – Design Basics Index (2004)  David and Charles
Timothy Samara – Design Elements: A Graphic Style Manual; Understanding the Rules and Knowing When to Break Them (2007) Rockport Publishers, Inc.
Vitaly Friedman – Designing With Grid-Based Approach (2007)
 Posted by at 8:04 am

My Thesis Project Initial Idea

 My Blog  Comments Off on My Thesis Project Initial Idea
Jan 072013
 

Project Title:
Teachers Assistant
Description:
An interactive site that enables educators to find schemes of work, lesson plans and resources for a specific unit and allow them to add more to improve the quality. (137/140 Characters).
Elevator Pitch:
This is a site that through Collaborative sharing and focus on best practice teachers can share and access any exam board unit and resources and documentation needed for class. This site will be designed to allow the generation of lesson plans instantly through the click of a button, which runs a query to access the information from a scheme of work that has been entered on to the system. Members to the site will be able to select from a range of sector areas, members will also be able to create on screen schemes of work and upload resources to specific weeks topics. (103/140 Words).
Target Group:
Educators.
The Problem:
The education sector is one that currently is experiencing dramatic changes throughout all levels, from pre-school to university. These changes continue to keep educators on their toe’s in that they are required to have at their disposal resources and knowledge that in turn will be made available to the learners to allow them to understand themselves and for them to meet unit learning aims and objectives along with other assessment requirements. These materials are becoming harder to find, even when using the Internet and libraries. Which ultimately results in the teachers using planning time to create and manufacture resources to enable this learning.
However as mentioned earlier the changes in education is creating more and more paperwork, meetings, and more importantly taking time away from the educators to create these resources. Additional to these changes created by government policy changes are the “shelf Life” of qualifications, these are determined my OFQUAL (The Office of Qualifications and Examinations Regulation). The standard life of a set qualification is approximately 4 years as an average.
This problem leads the educators to create these materials in their own time, in the evenings and weekends at home. The problem here is people can get protective of these home made resources and are less likely to share them, even amongst colleagues and office friends.
Adding Value:
It is intended by the creation of this site that educators are enabled to create enhanced SOW’s and resources by simply building upon the ones made available on the site, and though doing this the time factor of creating and sourcing material will be reduced allowing for the educators to deliver Outstanding grade lessons based on the OFSTED (The Office for Standards in Education, Children’s Services and Skills) common inspection framework (CIF) Guidelines.
It is intended that this site create a small revenue stream to enable coverage of costs associated to its running and upkeep. The site could look to a free trial subscription that allows access to restricted units and associated resources, and paid subscriptions that offers a user specific sectors, i.e ICT, Health and Social Care or a full access subscription that allows all access pass.
I would like to incorporate anyone that uses the system to be able to create a custom layout of the information stored in the database, this would enable the user to create a theme that is consistent to that of the organisation that they may work for.
Unique Selling Point (USP):
From initial research made there appears to be no site that offers a service like the proposed project stated here. This Site will enable the creation, submission of Schemes of Work (SOW’s) that are detailed and include resources for a specific unit, within a given qualification.
Legal Considerations:
Further research is required around the Intellectual Property (IP) of any works submitted and also the copywriting of any materials that are part of the submissions made.
Non Cognate Websites:
www.tes.co.uk – This is a large scale resource sharing, teacher related site, the site offers information regarding the available jobs in the sector additional to the teacher forums for discussions, however this site doesn’t link to specific qualifications and the resources are general.
http://www.teach-ict.com – This is a site that offers resources for keystage’s 3- 5 specific to ICT. This site offers material that can be used as supplementary material to main resources, again there are no links to specific qualification units.

My Web Thesis Project

 Uncategorized  Comments Off on My Web Thesis Project
Nov 282012
 

My idea is developing a website for a client  

Florescence Foods Limited (FFL)

FFL is aim at sourcing and providing the various foods that meet the health needs of consumers. FFL have launch of their first nutritious, succulent and unique Pearl Royal Coconut Water. (The site I will be developing will be talking more about Pearl Royal at this stage and its sale) FFL do have a URL holding page of http://www.florescencefoods.com/ but would like an internet presence i.e. full website developed that show case most especially their first product and their Products / Services The Product Pearl Royal Coconut Water has a facebook presence and twitter (Facebook: Pearl Royal Coconut Water UK. Twitter: @PearlRoyalCoco ) I will be developing a site that will have the twitter feeds coming through it and a possibility of blog (if someone they can commit to updating regularly ), otherwise twitter and regular update of the site for promotions will be the only way to make the site dynamic and way to improve its google rating. I am not 100% sure whether the site will be 100% CMS or a mixture of my design and a CMS backend.

The homepage will have Promotions, links such as; About us, Contact Us , Distributors, where to buy and Benefit of healthy living or Coconut water

Note: I have spoken to my contact Dr Ejim about the timeline I will be working with in order to confirm that its okay with them before we start. I am also putting together a contractual agreement between myself and FFL regarding the timeline and provision of contents and information.

Not sure: FFL do have a third party company at the moment (http://aqua-amore.com/) that are selling their product online. I am not as yet 100% clear whether FFL will want an E-commerce website whereby they could sell their product themselves of they are happy with AQUA-AMORE to continue with the provision of that service.

 Posted by at 1:16 am

GuitarSpec

 Everything Else...  Comments Off on GuitarSpec
Sep 192012
 

GuitarSpec is up and running, register now for full access to the site and help build the database by adding guitars and videos.

Ampersand 2012

 Everything Else...  Comments Off on Ampersand 2012
Jun 172012
 

My notes from some of the speakers at last Friday’s Ampersand conference in Brighton.

Yves Peters Detail in Web Typography

Choosing a Font

  • Narrow your search by requirements
  • Consider aesthetic preferences last
  • Consider:
    1. Formal aspects
    2. Historical context
    3. Cultural references

Functional Criteria

The OpenType format provides:

  • Unicode character encoding for support of multiple scripts
  • Cross platform support
  • Advanced placement features (e.g. kerning)
  • Advanced replacement features (e.g. ligatures)

Font dimensions:

  • X height
  • Cap height
  • Ascender
  • Descender
  • Small-cap height

Numeral types:

Typesetting Numbers

© J. Bear

Fake small caps:

  1. Decrease cap size
  2. Increase weight
  3. Increase tracking

Make correct use of spacing entities:

  • non-breaking space  
  • thin space  
  • en space  
  • em space  
  • punctuation space  
  • figure space  

Veronika Burian & Jose Scaglione Typographic Matchmaking

Font Selection

  1. Morphology/funciton
    • Title or text?
    • Continuous or fragmented reading?
  2. Technical Aspects
    • Reproduction method
    • Media
    • Screen optimisation
  3. Aesthetics
    • Appearance vs. content
    • Volume and visibility
    • Relationships between fonts
  4. Economics
    • Price
    • Amount of licenses
    • Efficiency

Typographic Matchmaking

  • Start by choosing one typephase or family
  • You don’t have to use branding fonts in other contexts, find other ways to incorporate branding
  • Compare fonts by setting to the same x-height (optical size)
  • Contrasting sans-serif with serif with similar properties to maintain balance
  • Organic (handwritten, calligraphic) vs. mechanic (restrained, formal)

“Focusing on contrast makes combining fonts easier”

  • Make use of hierarchy and dominant/submissive pairings
  • ‘Super families’ are font sets containing matched versions (sans-serif, serif, mono-space etc.)
  • It’s harder to combine two sans-serif fonts, which need strong contrast to be differentiated

Laurence Penney Hacking the Stack

  • CSS font fallback works at character level, allowing hierarchical sub-setting
  • For example, old style numbers taken from one font and all other characters from a different font
  • Subset files must only contain the characters to be replaced
  • font-family: 'subset 1', 'subset 2', 'default', 'fall-backs';
  • Make custom fonts for special characters/icons e.g. arrows
  • Doesn’t require extra mark-up, maintaining separation of content and presentation

Jake Archibald In Your @font-face

Browser Support

  • IE – .eot
  • Other browsers – .woff
  • Older browsers – .ttf
  • Older IOS – .svg

Optimising Font Files

  • Remove unwanted glyphs (font squirrel)
  • Gzip TrueType fonts
  • Speed up subset loading with ‘unicode-range’ rule

Loading

  • IE loads the content first and then updates the fonts
  • Webkit waits for the font files before displaying the dependent content
  • Firefox allows 3 seconds before loading a fallback font
  • IE8 shows nothing until all files have loaded (move @font-face styles to the top of the head to fix this)
  • WebFont Loader provides control over the loading behavior for all platforms
  • Serve at least .eot and .ttf
  • Avoid downloading unnecessary files
  • Show content first
  • Make files as small as possible

Elliot Jay Stocks Enhancing the Future

Typography plugins by Trent Walton:

  • Lettering.js – automates character level style control
  • FitText.js – scalable text for responsive headlines

Developing CSS Features

Enable/disable ligatures and kerning:

text-rendering: optimizeLegibility | optimizeSpeed | geometricPrecision 
| auto | inherit;

Select subsets/style sets:

/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }

/* convert both upper and lowercase to small caps */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* enable historical forms */
.hist { font-feature-settings: "hist"; }

/* disable common ligatures, usually on by default */
.noligs { font-feature-settings: "liga" 0; }

/* enable tabular (monospaced) figures */
td.tabular { font-feature-settings: "tnum"; }

/* enable automatic fractions */
.fractions { font-feature-settings: "frac"; }

/* use the second available swash character */
.swash { font-feature-settings: "swsh" 2; }

/* enable stylistic set 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}

Summary

  • Consider the typephase – does it contain the features?
  • Consider the file – is it OpenType?
  • Consider the browser – which features are supported?
  • Consider the user – will it break?
  • Test OpenType in the browser with Type Cast

Spritepad

 Uncategorized  Comments Off on Spritepad
Jun 152012
 

If like me you find “sprites” a bit of mystery then you need to check out the free online sprite creation tool at www.spritepad.wearekiss.com, simply drag and drop the images onto the SpritePad and you can see the CSS being dynamically generated as you move the images around.

When you’re happy with the result it includes a download option to download a zip version of the sprite and resultant CSS, then it’s up to you modify the sprite and CSS to suit whatever you want.

This is an example I played with earlier, it really did take the 5 mins they suggest to generate the sprites etc – easy peasy (and I’m really crap with sprites and images in general).

Now if you want hover style sprites, say for navigation etc, then the only real constraint is that they should all be similar dimensions because you’re controlling the image by repositioning it. Now again using spritepad this is easy to achieve because you can use the inbuilt grid lines to map your images to the same dimensions – there is also an auto align option but you need the premium account for that (and thats not free!).

Finally, if you’re asking yourself why this is useful think about:

– load delays on mouseover image replacement (initial unwanted flash/delay as new image is loaded)
– image sizes (a single combined sprite is generally smaller than the sum of its parts*)

* in the example the insect image (individual) weight was 92kb, or 70kb as a single sprite not a massive saving but every little helps

 Posted by at 11:20 am

Kirby

 Uncategorized  Comments Off on Kirby
Jun 102012
 

Kirby “a text based CMS”

I’ve been playing with Kirby over the last couple of weeks, and am really quite impressed so far. The whole idea is based around a flat directory structure within the Kirby folder structure with no database (just text files).

This offers advantages in terms of weight of CMS (much lighter than wordpress) and ease of backups etc – backing up the site means you have everything, so no need for a db backup as well and it has the added advantage that you don’t need to know how to administer a database.

DOCUMENTATION
At Kirby home page getkirby.com along with some sample themes and various extensions etc

INSTALL
Installation is dead easy, simply copy the whole of kirby into your target folder and then run the “index.php” file which tells you what else to do (this is basically just edit the site/config.php file to tell kirby where your site is and whether rewriting is on or not, again all this is described by the install page – I just copied and pasted the stuff from the web page into my config file).

Running from a sub folder is slightly different as you will need to change the .htaccess file to point to the subfolder via the RewriteBase entry; because mine was in a root subfolder I edited the line to be:

RewriteBase /customers/kirby-cms-diakonia

And made sure that the config.php file had rewrite set to true (I believe this is a kirby default, but I had to change it on my local version to get it to work in IIS). This all then gets the URL rewriting to work so you get nice friendly URLs.

CONTENT
The content all lives under A folder called content and is split into sub directories all named NN-text, so for instance an About Us folder might have in it:

  • 01-about-us
    • 01-who-we-are
    • 02-what-we-do
    • 03-staff
    • about.txt
    • etc

The sub folders prefixed with digits then become sub-pages to the About Us page; the “about.txt” file is the content of the about us page (written in “kirby text” which is a mixture of flat text and HTML etc – still learning that).

Folders that aren’t prefixed with digits become hidden folders, and can be used for other assets etc. These would need to then be defined in your templates.

ASSETS
An assets folder contains your own site written assets, like css, javascript and any generic images like logos etc (or whatever you want). In the example I’ve been developing my assets folder looks like this:

  • assets
    • css # css used throughout site, linked via “header.php” snippet
    • js # javascript (includes colorbox lightbox plugin; and some other stuff I use including some simple “show/hide” stuff)
    • images # images like site logo, stuff that goes on the header/footer etc

SNIPPETS
Snippets are pieces of PHP that you use for whatever, the default kirby theme ships with a couple of snippets for the header & footer of each page (header.php, footer.php) these are then used in whatever page theme (template) you wish to develop. Snippets live in a folder called snippets under the site folder site/snippets

For the stuff I’ve been playing with I rewrote the header & footer snippets and then added some additional ones of my own namely:

footer.php # amended version of page footer snippet
header.php # amended version of page header snippet

I scrapped their menu & submenu snippets, because I wanted to have a drop down style menu and their versions didn’t do that so I wrote my own and called it:

dropdown-menu.php

I then also wrote some library routines to do things like read all the image files in a folder etc (using the kirby classes etc) and put that in a snippet called:

mylib.php

I also included the standard kirby breadcrumb snippet although I haven’t used it yet.

TEMPLATES
This is where you put all the snippets together to create a web page. This is probably where the flexibility of kirby comes in, for any site you can easily define multiple templates (in fact each page could easily have a different template).

The default template is called “default.php” and is used whenever there is no specific template for that page, the other templates can be named whatever you want and any page that you want to use that template needs to have a text file called:

[template name].txt

So for instance I wanted a profile style template (basically it had text on the left and 250px images on the right picked up automatically from the folder) so I created a profile template for that, and then in the folder the web page content was in a file called profile.txt

I wanted my own gallery, so wrote a gallery template (called gallery.php) and in any folder where I want a gallery I just have a text file called gallery.txt – it all makes sense once you start using it. The templates that I’ve currently got are:

default.php # default page layout
home.php # my home page template (pick up first visible page)
profile.php
clients.php
background.php
gallery.php

Like snippets, the templates folder lives under the site folder site/templates

EXAMPLE SITES
On the Kirby website you can view (and download) a few demos including a couple of blog themes, the “Slacky” theme is a good one to download as you can look at the code used in their templates to get a good idea of how the thing works.

The site documentation is pretty good and there is a really helpful cheat sheet for kirby functionality (again available from the kirby site) etc. There is also an extensions library which includes stuff like RSS feeds, twitter etc – but haven’t used any of these yet.

MY OWN VERSION/DEMO SITE
I have written a demo live website using kirby, the URL is www.cybernet-computing.com/customers/kirby-cms-diakonia www.diakonialtd.co.uk so if you want to see it in action have a look there.

If anyone wants a copy of the site, including the code that I’ve tailored, simply comment on this post with an email address and I will send you a link to a ZIP version and then you can pull it apart for yourself.

* I have added quite a lot of comments to my code and templates so hopefully it will make sense *

CMS PANEL
Finally kirby also offers a CMS admin/maintenance panel which allows users to edit content, upload images etc and the download to that plus install instructions are also available from the kirby site. I’ve only just started to use this but it seems to work ok.

Have a play its a simple, very flexible, CMS and as more people use it, it will only get better; download the demos and just try it (free to try, £30 €30 to buy).
🙂

 Posted by at 11:11 pm

Subdomains vs Subdirectories

 Uncategorized  Comments Off on Subdomains vs Subdirectories
May 302012
 

A decision to use either subdomains or subdirectories may arise when a company is looking to implement and integrate a live blog to their site. They would toss over blog.mycompany.com or mycompany.com/blog. Both are very different and treated very different. The first option, blog.mycompany.com is a subdomain and is seen as a separate domain independent of the root domain, mycompany.com. On the other hand a subdirectory like mycompany.com/blog is basically a folder that is on the same root domain. It is treated the same as the root domain but just a categorizing folder. It is like a label to say everything with this subdirectory is similar in a certain way. In the above example if we decided to use a mycompany.com/blog everything in that directory would be a blog post.

From a SEO perspective subdirectories are much better as they are seen as folders within a root directory and will share the hard earned page rank and link juice. The page rank and link juice diminishes as you go deeper into sub directories so it is best not to create too many directories within directories. At most I would recommend going no further than 2 subdirectories deep. Subdomains are treated separately to their root domains and is considered a different site altogether.

Recommended times to use subdomains

  • Completely different information or product – You may choose to use a subdomain when you have a website that has multiple different themes, ideas or distinct product lines. This is a good way to separate content and organize information in a logically and clear manner for users to interpret. An example of a use of a subdomain for this purpose is news.google.com. Their news search is a completely different product that they offer so they have decided to host it on it’s very own subdomain.
  • Multiple listings in SERPs – With subdomains it is possible to have your site rank multiple times for a single query. Google will display a maximum of two URLs from the same domain for any given query. With subdomains you are able to rank more than twice and potentially saturate the SERPs.Remember search engines treat subdomains as being separate so it is possible to rank more than twice for keywords, especially brand related searches. SEObook does an excellent job with this for the keyword “SEObook”. They use subdomains such as tools.seobook.com and training.seobook.com.
  • Target Particular Keyword – You may want to use a subdomain if you are looking to aggressively target a particular keyword. For example if you run a pet store and you want to try to rank for the keyword “dalmatians” you may set up a subdomain – dalmatians.petstore.com. You will need build quality links to this new sub domain preferably with the keyword, dalmatians as the anchor text. With the appropriate resources you are able to become more competitive for keywords that you target with multiple subdomains.

Recommended times to use subdirectories

  • For smaller sites – Subdirectories are more appropriate for smaller sites as it keeps all content in one place and just categorises them by basically putting them  into folders.
  • Keep all page rank and link juice – Probably one of the strongest arguments to using subdirectories is all content shares the same page rank and link juice from the root domain. In the short term it gives the content in subdirectories a much better chance of ranking. Any link building to the content within subdirectories benefit the site as a whole. Subdirectories allow site to grow in authority much faster
  • Site Organization – Subdirectories are a good way to organise content on a website. Subdirectories allow you to group similar pieces of content or information. It is similar to a folder structure on a computer and can be treated/used in a similar way.

As you can see both subdomains and subdirectories are treated very different by search engines and have completely different effects on SEO. In most cases subdirectories will be most beneficial as you are building authority and strength to the single domain with all your efforts however there are times when subdomains just make more sense.

Resourse: http://www.seomistry.com/2011/03/02/subdomains-vs-subdirectories-what-is-best-for-seo/

 Posted by at 10:09 pm

How much you can make on SEO

 SEO  Comments Off on How much you can make on SEO
May 052012
 

Well you know you need to make a living from webdesign. I am mixing web design and SEO and it is working well. I start with improving sites that are live and new work just falls off it without networking hard or spending any money on advertising. Current fees are about £600+ a month from SEO stuff. I will put more tit bits up. Worse bit s you have to hack other designers work and that is time consuming and everything breaks !! Best bit you learn from others mistakes!!!!!

 Posted by at 12:06 pm