pba front-end week 5. search engine optimisation search engine optimisation (seo) – making your...
TRANSCRIPT
![Page 1: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/1.jpg)
PBA Front-End
Week 5
![Page 2: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/2.jpg)
Search Engine Optimisation
• Search Engine Optimisation (SEO)– Making your website visible
to search engines (Google)– Get your website to the top
of the result list!
![Page 3: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/3.jpg)
Search Engine Optimisation
![Page 4: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/4.jpg)
Search Engine Optimisation
• SEO is an obvious way to make users aware of your website– Technical aspect: Making sure the proper words
can be found on your website by search robots– Marketing aspect: Making sure your website
contains the words a typical user will use when searching for a website in your category. Getting other sites to link to your site.
![Page 5: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/5.jpg)
Search Engine Optimisation
• How is a page found by a Search Engine?
• Web Crawlers follow links – so make sure there are links to all your pages
• How is a page ranked by a Search Engine?
• Secret…!
![Page 6: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/6.jpg)
Search Engine Optimisation
• Page rankings– Internal factors – title, headings, body text, alter-
native text, keyword distribution, domain name– External factors – links from other pages. The
higher ranked the linking page is, the more the link will count. How often users click on the page in a search result list
![Page 7: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/7.jpg)
Search Engine Optimisation
• How can I know which keywords a typical user will use when searching for a similar website?
• Ask them!• A job for the Usability Lead• Google Adwords – suggestions
for keywords
![Page 8: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/8.jpg)
Search Engine Optimisation
• A Search Engine cannot see text in– Graphics (logos, banners, etc.)– Flash animations– Video– Audio (oh, really…)– Graphic links– Links depending on dynamic code
![Page 9: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/9.jpg)
Search Engine Optimisation
• A Search Engine may bypass a page if it– Has a very complex structure– Is heavily dynamic (CSS, JavaScript)– Contains many broken links– Contains complex/auto-generated links– Is flooded with keyword repetitions– Is created server-side– Loads very slowly
![Page 10: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/10.jpg)
Search Engine Optimisation
• So, I’m about to write material for my website…
• …what should I actually do…?
![Page 11: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/11.jpg)
Search Engine Optimisation
• Avoid writing consciously for SEO• Write for the readers, not for the engines• External factors are given more importance
than internal by modern search engines (Google)…
• …so the material must be interesting and relevant for actual human readers!
![Page 12: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/12.jpg)
Search Engine Optimisation
• Still, you can often hit two birds with one stone
• Review titles, headers, page bodies, etc – do they actually contain relevant words
• Take the user’s point-of-view – what would the typical user be looking for?
![Page 13: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/13.jpg)
Search Engine Optimisation
The Global Catastrophe
Bla bla bla bla bla…
![Page 14: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/14.jpg)
Search Engine Optimisation
World War II : The Global Catastrophe
Bla bla bla bla bla…
![Page 15: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/15.jpg)
Search Engine Optimisation
• Where to put keyword/phrases:– Page titles– Major headings– First content paragraphs– Text for links to other pages– Alternative text for images– HTML file names and directory names
![Page 16: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/16.jpg)
Search Engine Optimisation
• Grammatical form matters (Tiger <> Tigers)• Case does not matter (Tiger == tiger)• Context does not come automatically!• A Tiger is also a– Carnivore– Large cat– Panthera– Threatened species
![Page 17: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/17.jpg)
Search Engine Optimisation
• Enough is enough!• Delicate balance between
plentiful mentioning of keywords and ”keyword spamming”
• Exact limit unknown…• Rule of thumb, at most 5-8
% of total word count
![Page 18: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/18.jpg)
Search Engine Optimisation
• We can also ”optimise” the use of keywords with regards to humans
• Users do not divide their attention uniformly over a web page (eye-tracking studies)– Golden triangle– F pattern
Cat
![Page 19: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/19.jpg)
Search Engine Optimisation
![Page 20: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/20.jpg)
Search Engine Optimisation
• Most important in page rankings – other pages that link to your page!
• How to achieve that…?
![Page 21: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/21.jpg)
Search Engine Optimisation
• If the site is part of a large company– Request that main (often visited) company
pages link to your pages– Get included in site maps, etc.– Get featured in a ”what’s new” section on the
company home page
![Page 22: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/22.jpg)
Search Engine Optimisation
• If the site is a stand-alone site– Find link partners: You link to the partner, the
partner links to you (link building)– Potential link partner could be a ”complemen-
tary” company, not a competitor– Example: you sell swimsuits, the partner sells
sunglasses– Should be worthwhile for both sides
![Page 23: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/23.jpg)
Search Engine Optimisation
• Create links from other websites yourself– Find popular (and preferably
relevant…) blogs, forums, etc, and leave comments including links to your own website
– Sign up your website to link catalogs
• A delicate balance…
![Page 24: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/24.jpg)
Search Engine Optimisation
![Page 25: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/25.jpg)
Links and navigation
• Most websites cannot be contained within a single web page
• Information Architect should– Decide how to split content
across multiple pages– Decide how to navigate
between the pages
![Page 26: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/26.jpg)
Links and navigation
• Fundamental types of site structure– Linear– Hierarchical (shallow)– Hierarchical (deep)– …and combinations
![Page 27: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/27.jpg)
Links and navigation
• Linear structure – the user is ”forced” to visit the pages in a certain order
• Well suited for – Instructions / Guides– Surveys / Questionnaires– Ordering and Payment– Subscription– …?
Page 1
Page 2
Page 3
Page 4
![Page 28: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/28.jpg)
Links and navigation
• Hierarchical structure (shallow)
• Can navigate to many pages from a given page
• Distance from start page to ”end” pages is low (< 3)
• Well suited for small websites (< 10 pages)
S
A.1
A.2
A.3
A.4
B.2
B.1
![Page 29: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/29.jpg)
Links and navigation
• Hierarchical structure (deep)• No fundamental difference -
navigate to many pages from a given page
• Distance from start page to ”end” pages is can be high
• Breath vs. depth…
![Page 30: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/30.jpg)
Links and navigation
• How to organise a website with 1000+ pages…
• Very ”wide”– Few clicks to end pages– Many links on each page
• Very ”deep”– Many clicks to end pages– Few links on each page
![Page 31: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/31.jpg)
Links and navigation
• …and combinations!• Many sites willl need to
use both types of organi-sation
• Web-shop– Presentation (hierarchical)– Sales (linear)
![Page 32: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/32.jpg)
Links and navigation
• Links in general serve two purposes:– Links to other, external websites– Navigation within the website
![Page 33: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/33.jpg)
Links and navigation
• Why link to other websites?• Unless that is the specific purpose of the
website, limit the number of external links– Users leave your website (will they come back?)– No control over the linked-to website (form,
content,…)• Integrate relevant material into your own
website, if possible
![Page 34: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/34.jpg)
Links and navigation
• How can we ”serve” links to the user…?– Classic, explicit link (www.cnn.com)– Text-anchored link (read about tigers here)– Part of a navigation structure, e.g. menu– As a graphic or using other types of metaphors
![Page 35: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/35.jpg)
Links and navigation
• Advice on text links– Avoid too many text links in bodies of text – move
to the end of section if possible– Make sure links stand out (e.g.like this)– Make sure that visited links are distinguishable
(e.g. like this)– Avoid writing sentences around links:• Bad: Click here for more information• Good: The tiger lives in the jungle
![Page 36: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/36.jpg)
Links and navigation
• Menus is a very common way to organise a set of ”similar” links
• Most users are used to menus from various software products
• Are menus old-school…?
![Page 37: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/37.jpg)
Links and navigation
• Where do we put a menu…?
?
Best for reading…
Normal in software…
![Page 38: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/38.jpg)
Links and navigation
• What is a metaphor?• One explanation: A metaphor is defined as a
figure of speech, or something that we use to replace normal words in order to help others understand or enjoy our message
• In the context of a website: Wrapping a link into e.g. a graphic, to make the function of the link more intuitive
![Page 39: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/39.jpg)
Links and navigation
• Example: What will the below buttons do, on a website with linear structure…?
![Page 40: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/40.jpg)
Links and navigation
• Why use metaphors…?– More intuitive– Usability– Align navigation with
general visual design
![Page 41: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/41.jpg)
Links and navigation
• Find your local weather forecast…
![Page 42: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/42.jpg)
Links and navigation
• What will a 5-year old prefer…?
…or text links?
![Page 43: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/43.jpg)
Links and navigation
• Using metaphors, we assume that the user actually understands the metaphor…– Law of Isomorphism– Culture, bckground, …
• Usability tips– Provide helpful text i mouse-over tooltip– Link should react to mouse-over
![Page 44: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/44.jpg)
Links and navigation
![Page 45: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/45.jpg)
Page composition
• Now we know about– Colors– Fonts, texts and editorial style– Links and navigation– …
• How do we put it all together on a specific web page…?
![Page 46: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/46.jpg)
Page composition
• No single page composition ”style” will fit all purposes…
• …BUT for mainstream web pages, a fairly common page composition ”pattern” has emerged over the years
![Page 47: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/47.jpg)
![Page 48: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/48.jpg)
Page composition
• Isn’t it boring just to use a ”standard” page layout…?
• Maybe, but consider– It is a well-established layout– Not all parts are mandatory– Still many degrees of freedom left
(colors, graphics, text,…)– Can you really ”beat” the standard…?
![Page 49: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/49.jpg)
Page composition
• Page header– Establish site identity– Global navigation (Home, about, contact,…)– Search, shopping cart,…– Home link (easy way home)– Acts like a ”miniature version” of the web site
![Page 50: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/50.jpg)
Page composition
• Header variations
![Page 51: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/51.jpg)
Page composition
• Breadcrumb navigation
![Page 52: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/52.jpg)
Page composition
• Breadcrumb navigation– ”Where am I…?”– Particularly useful with large, deep, websites– Not really necessary on small websites– Enables the user to skip back to levels high up in
the hieratchy tree– ”Doesn’t the Back button do that…?” – yes, but
using the Breadcrump is easier
![Page 53: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/53.jpg)
Page composition
• Search
![Page 54: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/54.jpg)
Page composition
• Scan columns (what’s that…?)• Columns at the edge of the
page where users will ”scan” for useful information– Contact information– Advertisments– ”News of the day”– …
![Page 55: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/55.jpg)
Page composition
• Main content area• Hard to provide general rules, but– Include clear page title– Update breadcrumb navigation– Include go-to-top links on long pages– Use general rules for text formatting– Include dates where relevant
![Page 56: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/56.jpg)
Page composition
![Page 57: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/57.jpg)
Page composition
• Page footers• Usually contains useful,
”static”, information– Author information– Copyright statements– Contact details– Useful general links– …
![Page 58: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/58.jpg)
Page composition
• I have a web site to create, where do I start on page composition…?
• Create page templates to be filled with actual content
• Start with ”internal” page templates!• Work from the inside towards the (unique)
home page (landing page)
![Page 59: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/59.jpg)
Page composition
![Page 60: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/60.jpg)
Page composition
• Why not start with the home page…?• Home page is ”unique”, only one instance• Internal pages will occur in many instances• The internal pages will thus dominate the
users experience of the site• Do not let the design of a single page ”hijack”
the entire site design!
![Page 61: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/61.jpg)
Page composition
• Internal page templates• Created by Information Architect (and
possibly Art Director)• Main purposes– Logical fit to the information architecture– Provide consistency across the website– Establish ”look-and-feel” of the website
![Page 62: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/62.jpg)
Page composition
More than one template might be
necessary…
…but should have consistent ”look
and feel”
![Page 63: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/63.jpg)
Page composition
![Page 64: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/64.jpg)
Page composition
• Secondary page templates• In principle like internal
page templates• Help establish ”a sense of
the vertical dimension in the site”…
• What does that mean!?
![Page 65: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/65.jpg)
Page composition
![Page 66: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/66.jpg)
Page composition
• Secondary page act as sub-section home pages
• They must provide navigation to underlying sub-section, and to main home page
• They should establish some level of identity – could be alternative landing pages
![Page 67: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/67.jpg)
Page composition
• The home page itself…• Four main elements– Identity– Navigation and Tools– Content– Timeliness
![Page 68: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/68.jpg)
Page composition
• Where should your focus be…?– Does CNN need to establish identity…?– Does Google need to worry about timeliness…?– Does Coca-Cola need to worry about content…?
• The exact balance between the element will be completely situation-specific
• General design principles still apply• Consistent with secondary and content pages
![Page 69: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/69.jpg)
![Page 70: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/70.jpg)
Page composition
• And finally…do not put a fancy Flash animation ”in front of” your website
• Users will be annoyed – some will go away, others click ”skip intro”
• Can prevent web crawlers from getting access to the real page – and thus the website!
• Avoid!
![Page 71: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/71.jpg)
Page composition
![Page 72: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/72.jpg)
Gestalt Laws
• The standard page compo-sition ”pattern” seems to be well-established; it works!
• But…why does it work…?• Because it employs many of
the Gestalt Laws
![Page 73: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/73.jpg)
Gestalt Laws
• Gestalt Laws are a part of Cognition Psychology – how we percieve things in the surrounding world
• Gestalt (from German) means ”a whole structure or form, that emerges when a set of smaller, simpler components are combined in a certain way”
• Not a perfect translation…
![Page 74: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/74.jpg)
Gestalt Laws
![Page 75: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/75.jpg)
Gestalt Laws
![Page 76: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/76.jpg)
Gestalt Laws
• The Gestalt Laws are a set of statements about perception of elements in a certain context
• About ten laws – we will discuss some of them in the following
![Page 77: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/77.jpg)
Gestalt Laws
• Law of Proximity• Elements that are close to each other will be
perceived as one single structure
![Page 78: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/78.jpg)
Gestalt Laws
• Is this…• …four vertical columns…• …or…• …seven horizontal rows…• …or…• …28 unrelated dots…?
![Page 79: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/79.jpg)
Gestalt Laws
• Is this…• …four vertical columns…• …or…• …seven horizontal rows…• …or…• …28 unrelated dots…?
![Page 80: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/80.jpg)
Gestalt Laws
• Law of Similarity• Elements that look similar will be perceived as
one single structure
![Page 81: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/81.jpg)
Gestalt Laws
• Is this…• …12 unrelated
columns…• …or…• …six groups of two
columns, alternating between white and yellow?
![Page 82: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/82.jpg)
Gestalt Laws
• Law of Closure• Humans have a tendency to perceive an
incomplete structure as complete (to close or fill the gaps)
![Page 83: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/83.jpg)
Gestalt Laws
• Is this…• …five unrelated
circle fragments…• …or…• …a circle?
![Page 84: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/84.jpg)
Gestalt Laws
• Is this…• …five unrelated
circle fragments…• …or…• …a circle?
![Page 85: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/85.jpg)
Gestalt Laws
• How many triangles do you see in the pictures…?
![Page 86: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/86.jpg)
Gestalt Laws
• Law of Closure (variant)• Elements within a bounding structure will
be perceived as one single structure
![Page 87: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/87.jpg)
Gestalt Laws
• Is this…• …six groups of two
columns, alternating between white and yellow…
• …or…• …three boxes con-
taining a varying number of dots?
![Page 88: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/88.jpg)
Gestalt Laws
• These three laws…– Law of Proximity– Law of Similarity– Law of Closure
• …are used very often in web design!
![Page 89: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/89.jpg)
Gestalt Laws
Law of Proximity:These menu items are related, and are physically close
![Page 90: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/90.jpg)
Gestalt Laws
Law of Similarity:These menu items are related, and they look similar
![Page 91: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/91.jpg)
Gestalt Laws
Law of Similarity:These menu items are related, and they look similar (but different from the other types of menu items)
![Page 92: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/92.jpg)
Gestalt Laws
Law of Closure:Do we have a outline of a box here…?
![Page 93: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/93.jpg)
Gestalt Laws
Law of Closure:Do we have a outline of a box here…?
![Page 94: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/94.jpg)
Gestalt Laws
• Law of Prägnanz (or Good Form)• Humans tend to order a set of elements
into one simple, recognisable form
![Page 95: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/95.jpg)
Gestalt Laws
• Is this…• …a triangle and a
square..• …or…• …three geometric
figures…• …or…• 11 linies…?
![Page 96: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/96.jpg)
Gestalt Laws
• Is this…• …a mysterious face
on the surface of Mars…
• …or…• …just a random
effect caused by light and shadow…?
![Page 97: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/97.jpg)
Gestalt Laws
• Law of Isomorphism (or Past Experience)• Past experience and context has an
influence on how we perceive an element
![Page 98: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/98.jpg)
Gestalt Laws
• Is this…• …the letter ”B”• …or…• …the number 13…?
![Page 99: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/99.jpg)
Gestalt Laws
• You are on a Danish website…• What do you expect to happen, when you
click on these icons…?
![Page 100: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/100.jpg)
Gestalt Laws
• Law of Good Continuation• When there is an intersection between two
or more objects, we tend to perceive each object as a single uninterrupted object
![Page 101: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/101.jpg)
Gestalt Laws
• How did we produce this figure…?
![Page 102: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/102.jpg)
Gestalt Laws
• How did we produce this figure…?
+ =
![Page 103: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/103.jpg)
Gestalt Laws
• How did we produce this figure…?
+ =
![Page 104: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/104.jpg)
Gestalt Laws
• Law of Figure and Ground• We tend to organize our perceptions by
distinguishing a figure from a ground
![Page 105: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/105.jpg)
Gestalt Laws
• Is this…• …a vase...• …or…• …two faces in
silhouette?
![Page 106: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/106.jpg)
Gestalt Laws
http://www.slideshare.net/rogerpitiot/gestalt-theory
![Page 107: PBA Front-End Week 5. Search Engine Optimisation Search Engine Optimisation (SEO) – Making your website visible to search engines (Google) – Get your](https://reader036.vdocument.in/reader036/viewer/2022062518/56649c9c5503460f9495a85c/html5/thumbnails/107.jpg)
Gestalt Laws