Graphic Design Notes

 Uncategorized  Comments Off on Graphic Design Notes
Mar 202013
 

Notes on Sprite

A:
display:block
Width (exacly to size of first image)
Height (exacly to size of first image)
background-position: 0 -180px; (x, y)
text-indent:-9999px;

A:hover
background-poisiont 0 -360px; (x, y)

Read Stephanie Rewis article on BG images.

box-sizing: border-box (if you add padding then it’s not calculalted as part of the total width
Padding

Negative margins – sometimes absoloute positioning might be better.

ul text-align:center

li display:inline

a display:inlin-block

 

http://bradfrostweb.com/

 Posted by at 2:32 pm

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

Notes on Typography from somewhere!

 Uncategorized  Comments Off on Notes on Typography from somewhere!
Jan 032013
 

H1 30% larger
H2 25% larger

P{ margin-left 1.5em
X height – distance between baselines & mean line
Parings:
• Badani & Futura
• Perpetua & Gill Sans
• Metan San & Meta Serif
• Baskervill & Futurea

 Posted by at 12:16 pm

Design Insights # 1 notes – Responsive Design

 Uncategorized  Comments Off on Design Insights # 1 notes – Responsive Design
Jan 032013
 

Adaptive -> Changes

Fluid -> Stretches
Resolution & Pixel density need to be considered.

Before starting think about content.

Different devices = different content needs

 

Tablet users mostly in browsing mode

Designing for multiple screens

  • Desktop
  • Mobile
  • Tablet
  • Internet ready TV
  • Home entertainment system
  • Handhelod games consoles
  •  Adaptive design is very labout intensive and a bit less future prrof
  • Fluid is cheaper and more future proof

Which one to use can depend on the content.

 

When designing for mobile first design for the smallest and weakest – Javascript & CSs

Progressive enhancement

Check out the trainline.com mobile first website

 

Fluid design

Desktop version  – search on top rights

Small version – no search on top rights

 

LukeW | RESS: Responsive Design + Server Side Components

http://www.lukew.com/ff/entry.asp?1392

 

Project flow:

Agile development, scrum style using 2 week bursts works best for responsive design

  • Design part by part
  • Split into user stories/product backlog

Prince2 – waterfall method

 

Prototyping saves time & effort, mockup mobile early, real content. Design in the browser/

 

 

SASS & Compass

Baselinesscss.com – toolset to generate CSS

JavaScript components – may vary depending on device.

  • Interactions- no hover on touch screen
  • Programme for touch start and touch end events

 

Responsive images

  • Max-width technique
  • Stretch BG images
  • No script technique

 

Asset production

  • Fonts & be careful of @font-face rendering
  • Look @ fonts on all devices before starting

WikiMobile – nav menu

Equal height columns are a bad idea

 

No pagination on mobile if possible. Load more buttons.

2% have javascript turned off

 

MANYMINDS

 

Chrome & Firefox portable

Blog posts on head London website

 

GRIDS

Start with girds and Nav first

Grids in frameworks can be rigid

 

Bootswatch – customise bootstrap

Skeletion CSS framwork

http://susy.oddbird.net/

SASS>COMPASS>SUSY

Mark Pilgrim

 

Ruby Installed on .???

Whencaniuse.com

HTML5 rocks resource list

Create your own boilerplate

No HTML5 on websites at present is safest

WebSockets – continuous connections

Ethan Marcotte

Luke Wrob

 Posted by at 11:44 am

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

Open Street Maps – What are they and why use them?

 Uncategorized  Comments Off on Open Street Maps – What are they and why use them?
Nov 062012
 

Open Street Map

Below I’ll try to explain Open Street Map and why it’s important to have various open sources for data such as maps! This post is mainly made of up excerpts from

On the Open Street Map Wiki page OSM is defined as “the project that creates and provides free geographic data and mapping to anyone who wants it. Most maps you think of as free actually have legal or technical restrictions on their use.”

Essentially this means that OSM is Wikipedia for maps where any user can add and edit maps plus the data is freely available for anyone to use (commercial or non-commercial).

 How it works for mappers:

A mapper creates an account with www.openstreetmap.org. The using the Edit button then gets presented with two options:

  • Edit with Potlatch 2 –an in browser flash based editor (easiest to use for new users)
  • Edit with Remote control – a java based desktop editor (bigger learning curve and slightly more technical)

Screenshot of Potlatch 2: Flash based Map Editor. You literally trace the Arial imagery onto the map.

 

There are a variety of forms of gathering data for OSM(more details here):

  1. GPS – This is currently the most common way of gathering data for OSM, and often preferred or even essential for collecting the initial geometry of roads, paths and other ways.
  2. Local knowledge – Perhaps the best source of data is when you simply happen to know the area very well, and thus for example the names of the roads, shops etc. If the basic road layout is already present, you often don’t need any technical devices and can start straight away.
  3. Tracing maps using Aerial imagery (imagery mainly provided by Bing Maps under agreement)
  4. Photography or drawings
  5. Data may already be collected that requires people to convert it into a map. See local and global mapping projects.
  6. Seeing mistakes in a map and fixing them. There are a number of Quality Assurance tools which can be used to find problem areas.

Who cares?

An abridged version of the FAQ page on the OSM Wiki is below.

Why don’t you just use Google Maps/whoever for your data?

Because that data is copyrighted and owned by multiple organisations like the Ordnance Survey. Google/whoever just licenses it. If we were to use it, we’d have to pay for it. There’s also the potential that Google could introduce adverts etc in exchange for using their maps.

Who owns OpenStreetMap?

You do. The data and software is owned by you, the contributors.

Compare OSM and Google Maps side by side.

Who Uses OSM?

The growing list of names now includes Foursquare, Wikipedia and Apple (though there’s some debate over just how much OpenStreetMap data Apple uses in its glitchy maps, as it also lists TomTom as a provider). Craigslist also chose to use OSM for its own new built-in maps views, but never used Google to begin with.

In summary

As a user of maps, I hadn’t really given it much thought before now but now that I have been learning about the differences in the technologies I think it’s important and great to have an open source map data alternative which is freely available to people and  commercial programmes alike.

 Posted by at 10:36 am

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

29th February – ‘Social Media and Communities’

 Uncategorized  Comments Off on 29th February – ‘Social Media and Communities’
Apr 252012
 

Today the subject was ‘Social Media & Communities’. Pricilla began with her presentation about ‘Communities and Forums’; this was followed by Aimee, who talked about ‘Facebook for Business’. James then presented further information about these subjects.

I found the presentations today very amusing and I learnt a lot of information from them.

Later we were taught about what you can achieve on Twitter and that it is very similar to Facebook. We were also told about the search widget for Twitter, which would show tweets for all different subjects.

Then we talked about YouTube and its benefits, such as that the videos come up at the top of Google searches. Because of this it can be a very good way to advertise your business. It is also ok to embed other people’s videos in your site (if they are available to do so), but one down-side to this is that it may not communicate your name as well.

It is becoming popular to include links to social media pages, so that people can sign up and then post things on there and share it with others. Addthis.com and sharethis.com are two good websites that can also help with this. They add the extras of being able to email or share parts of the site with other people.

Also having a link back to your site from Tumbler, Flicker, or more especially Facebook and Twitter can bring more people to your site.