_/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/ _/
______ ______ _______ ______ _______ _ _
| ____ |_____/ |______ | ____ | |_____|
|_____| | \_ |______ |_____| . |_____ | |
THANKS FOR YOUR INTEREST. This is
version 9 of the GREG.CH site - it exists since 1999.
Concepts, code, programs, designs and texts by Gregor Lemmenmeier, all rights reserved.
*
In the past, my web site was shown as a best-case reference in web development courses.
If you use this site in your courses - I would recommend the following teaching points.
Please note that this page was published in January 2010 - several things have changed!
1.)-CRAFTSMANSHIP
All code was
hand-coded without the use of WYSIWYG editors: PHP 5, SQL, XHTML, CSS, JS.
This site validates for each and every web page,
passing 3 tests: W3C XHTML, CSS, WAI.
The only exceptions are very old pages with articles that GREG.CH wrote for newspapers.
2.)-SYSTEMS
Bi-lingual CMS, and template system for this site was self-developed (as I usually do).
Client login area contains self-developed project management and tracking
applications.
Live Search was
programmed using AJAX/AHAH. Search areas are in a few cases restricted.
Security systems, self-developed: Cracktracker, country blocker,
-safest- contact form.
The contact message includes the Google search term used (if any) to reach the website,
do it the same way! The contact message also includes: IP, host, country, region, city.
If hacking attempt: Logs details, email to admin, user gets 403.shtml (don't go there).
The
ClientMap is based on MySQL and XML. You should have a mashup in most modern sites.
3.)-CSS
CSS is generated via PHP and includes special printout styles. Parts of CSS 3 are used.
Advanced CSS techniques are used, e.g.
CSS Sprites (combined graphics!), sliding doors.
It should be emphasized that CSS Sprites bring advantages, are efficient, MUST be done.
Avoided common mistake of having separate CSS files (screen/print): Must be
all in one.
Note the
perfect printout layouts: Without menus, but with contact info and print logo.
The PHP-generated CSS file is GZIP compressed. This reduces download time. Do the same.
4.)-TEXTS
Texts are error-free in all pages -- German and English. Texts contain SEO copywriting.
German text quality and style checked with stilversprechend.de. Result 50% (= perfect).
Typography: Texts in several pages appear justified but in fact, I
tweaked them to fit.
Typography:
Headers generated by self-written PHP. Please avoid sIFR, Font-Face, Cufon.
Best Practice today: This web site uses the UTF-8 character set. Please do it this way.
For the homepage I wrote a few slogans in German and English. These are shown randomly.
About the writing style: Today most websites sound the same: Friendly with a no-problem
attitude, open, some humour / irony. Boring when on MOST sites! I deviated, just a bit.
5.)-SEO (GREG.CH has PageRank 6)
For SEO, all done: Every page MUST have different title and different META description.
For SEO, target META description length is 165 characters. The German homepage
has 165.
For SEO, the target relation of content to source code is 42 percent. The Ge HP
has 36.
For SEO, target count of internal links is 20+, site
has 20. All nofollow-links are OK.
For SEO, all done:
Sitemap, robots, .htaccess. All images: alt tags. All links: titles.
For SEO, all done:
No duplicate content. Cloaking detector test
was OK.
No table in HP.
For SEO, rules: Forget META Keywords, optimize H2 not H1, add SEO for image file names.
For SEO, make the PageRank flow correct (homepage = highest PR and subpages = 1 below!)
For SEO, note that once Google Caffeine is active, major methods and rules will change.
6.)-FINISHING
File sizes are kept small and compressed.
Speed test result 0,73 seconds (for 23.79 KB)
Website download speed was optimized using:
Google Page Speed, a superb Firefox Add-on.
Browser compatibility achieved on all mainstream browsers. Mobile version (autoswitch).
In Firefox, some pages will be
prefetched. In FF and Safari,
CSS 3 text-shadow is used.
Site layout was optimized based on www.clicktale.com, heatmaps, Feng-GUI and F-pattern!
Website participates in worldwide
campaign to tell users: STOP the Internet Explorer 6.
7.)-SCOPE
You can use the above points as a minimum checklist for new websites built in 2010 (+).
Also, the GREG.CH site shows some of the requirements of sites of developers/designers,
notably: Portfolio items must show exactly
WHAT the developer did;
full CV in the site;
testimonials from employers and clients in the site; not one portrait photo but several
(business/personal); newest photo
not older than 1 year; all pages should be hand-coded
and systems such as CMS self-developed (no cheap WP/Joomla solutions!); every page must
pass in XHTML+CSS+WAI tests and use the
UTF-8 character set and be perfectly printable;
all webpage texts must be
error-free and well written (- oddly, this one's too hard for
most web programmers/designers/experts..); and the site must clearly show the number of
years of experience. Finally, this type of website must also contain an auto-activating
mobile version (for iPhone, Android, Boat Browser, Miren Browser, xScope, Dolphin etc.)
8.)-DEVNOTE
When you finish developing a new site, write a (short!) summary of all the work you did
and
put it in the HTML code. I mostly do that. Format text like shown here (justified).
Only use a simple/thin ASCII logo and center the logo (count the letters on each side).
9.)-SUPPORT: If you need any further info or help with these points you can contact me.