Related Information
Search this site:
Lemon Digital Design:
Resources:
March 02, 2005
EU Enlargement Futures
ICTs Final Report
The Information and Communication Technologies (ICT) Panel report is organised in 3 parts with a conclusion summarising the most important challenges and threats on the way towards an Information Society (IS) in the candidate countries (CC13). The first part focuses on the communication infrastructure available in CC13. Particular attention has been paid to the digital divide in the CC13 and the ability of local industry to implement advanced technologies and supply state-of-the-art equipment and services. The second part outlines the recent development towards provision of new services and content through communication networks. An important aspect is the availability of public access points and the involvement of all stakeholders in the process of building info-structures and provision of high-quality services and content to the general public. The third part addresses the critical issue of the competency of the population and workforce. It highlights the challenges for CC13 of introduction ICTs in education, realising the life-long learning concept and meeting the requirements for skilled workers and managers of the knowledge-based economy. The fourth part summarises the most important challenges for
EU and national policy with regard to the building up of a competitive (ICT) economy, the outlook for employment and skills, their potential impact on governance and the complex nature of the digital divide in the candidate countries.
Electronic Payment Systems
Strategic and Technical Issues
The first Background Paper of the Electronic Payment Systems Observatory (ePSO) identifies the strategic and technical issues that will be discussed in the ePSO Forum - an online discussion group consisting of payment systems experts and a broad range of market players. The discussion will concentrate on electronic retail payment systems - focussing on the needs of the consumers, merchants and SMEs. While in principle all electronic retail payment systems will be analysed, special emphasis will be given to payment methods in the context of electronic commerce on the Internet and the development of cross-border payment systems. The issues that have been identified are grouped around eight broad categories: e-money, enhanced access products, micro-payment solutions, payment systems infrastructure, regulation and innovation, standardisation and interoperability, consumer protection, anonymity, privacy and security and integration of payments into online transactions.
You can download the full report in .pdf format here
The Digital Divide
A Research Perspective
This report addresses issues related to the definition of the term "Digital Divide". It proposes a more structured approach to the problems and examines the current state of the art of research in this field. From this analysis it derives a number of conclusions, recommendations with regard to the main elements of digital divide discussions and highlights areas which are in need of further research.
You can download the full report in .pdf format here
Creating Web Content
I have written an article which is the first of a series for Codefixer. I will try to lead the html beginner from learning about the World Wide Web and appreciating its pecularities to buidling quality websites.
The first article focuses on "Web Content". A quick historical perspective on where the internet came from and how the World Wide Web developed leads to a discussion on the pecularities of creating content for the World Wide Web as opposed to other media.
March 01, 2005
Professional Web Design
This paper serves as a guide to what Lemon Digital Design considers as the foundation for quality web products. It contains the basic rules we apply to all of our designs. Although some of the views and opinions can be discussed, most of them are generally accepted as best practice by those who create the internet as we see it today and by those who envision of how it will operate in the future. Choosing to apply these standards and common practices is a fundamental step towards creating a web presence which stands head and shoulders above the rest. And this entails a number of immediate benefits to the client.
In summary, Lemon Digital Design chooses to:
- Use Valid HTML and Cascading Style Sheets (CSS)
- Pure CSS layouts as opposed to traditional and outdated table layouts
Validating and pure CSS designs have some immediate benefits in usability, flexibility and financial terms. These include:
- Faster loading pages
- Cost reduction
- Reduction in workload and labour cost
- Visual consistency
- Better search engine results
- Improved accessibility
- A competitive edge
The solid foundation of a professional design needs to be carried throughout the whole structure and he design of all building blocks that make up the website. Including some basic techniques and patterns in the workflow make web designs more effective. These include:
- The correct use of media and tools
- Understanding fixed width design vs. liquid design
- Understanding fixed size fonts
- Text links usage
- The click through page
- Frames pages
- Opening Links
- Semantic mark-up
- Gadgets and toys
A general lack of documentation and poor efforts by web designers with regard to promoting standard compliant, accessible designs result in a lack of awareness of the real world benefits a modern and professional design offers. Much of what makes a good and professional design is not immediately visible on the surface. A web page can look amazing, but perform poorly. It is properly structured markup language under the hood and a thoughtfully structured and optimised layout of the web site as a whole which makes a good design. Giving meaning to the markup and giving a purpose to all visible elements on screen make a web page useable. Providing valuable content and presenting it clearly make a web page worthwhile. Attention to detail and a combination of all of the above make it a professional product.
We hope that informative literature like this paper and international efforts like MACCAWS ( http://www.maccaws.org/ ) help explain how the respect of web standards and validating designs not only contribute to a more functional, flexible and accessible web, but also make sense in terms of financial investment, marketing strategies and sales.
Valid HTML and CSS
Validating markup, obeying the rules. What does this mean?
The web is littered with misbehaving web pages which cause all kinds of havoc from browser errors to abrupt termination, complete system lockup or just pages not looking right and falling apart. This is mainly due to their HMTL containing non-valid, non-standard or browser specific syntax. Like any language, HTML has a fundamental set of rules which misbehaving web pages do not follow. All too often the most important rule is:If it works in my browser, it's OK" and "If it doesn't work in your browser, switch to mine", or "If it works in Internet Explorer, that's good enough for me". This is a very limited and unprofessional, however widespread view of web design. Considering that any browser configuration is just one of thousands and that there are far more performant and standards supporting browsers out there than IE (Mozilla for instance) it is not representative whatsoever if a page works on any one system or not. Validating code ensures that it will work on most, if not all systems and configurations.
Valid code as the backbone for a design also guarantees a page is future proof and will withstand the browser updates we frequently experience. This is a serious concern in a world where technologies change at a pace which make any investment volatile. While historically browsers tended to be lenient with incorrect markup and displayed pages which should have fallen apart (i.e. the browser wars between Netscape and Internet Explorer) the trend is now clearly towards less forgiving and a more strictly standards respecting rendering of the HTML. Therefore an investment into a standards respecting design is also an investment into the longevity of said design.
Validating HTML and CSS ensures portability, compatibility and interoperability. It is free and everyone can validate their code through the validators at www.w3.org. It is the sensible and professional way to design, and it is the foundation upon which all web designs should be built. It shows that the web designer has taken care to provide the best service possible.
Basic Page Layout - Tables vs. CSS
Tables vs. Cascading Style Sheet (CSS) is the struggle, not because tables actually are an option, but because we have all had to put up with tables as the most common layout tool in web design for years. Tables in HTML naturally have a well defined task: To display tabular data. The internet was mostly text and pure information until some smart designers found a way to declare table border size "0" and use tables to form an invisible grid upon which to lay out and place images. Table based layouts are still the most dominant form of presenting graphics rich websites. However we have for some time now reached a point where they have actually become an obstacle in achieving a more functional, flexible and accessible web.
Now the industry is starting to see the potential benefits of this and provides the tools for the creation as well as the viewing of standards based designs. This provides designers with the resources to create standard compliant designs without having to resort to lowest common denominator markup. There is no more need for table grids, neither is there any need for a CSS design to look any less professional than a table layout, on the contrary.
The benefits of pure CSS designs are clear and important:
1) Pages load faster:
Using CSS means separating content from presentational mark-up. In practice this means that the content is laid out on a plate for everyone (and every search engine) to read and that all presentational mark-up is either stored in an external file or another part of the page. Users will not have to weed through the presentational and structural mark-up of endless tables to get to the content which is hidden away inside them. In terms of numbers this means that on average a CSS page will only be a fraction of the size of an identical or similar looking table layout.
Furthermore the formatting code of your style sheet remains stored inside your browsers cache. The user only has to download this information once and from then on with every new page he clicks on your site he only has to load the text content and optional images, meaning lightning fast page load times even on the slowest modem connections.
Example:
http://www.abanicosevilla.com/
or
http://energylinx.co.uk/energy/ecodyfi/
2) Cost Reduction
Faster loading pages, smaller sized pages and style sheets which remain stored in your browser cache mean substantially decreased bandwidth use. Bandwidth costs money. A modern CSS design will save substantial amounts of money on any hosting bill, in particular for high traffic sites.
Example:
High volume site MAMEWorld.net. Page size in traditional table design 120kb:
Converted to valid CSS, page size 25kb
http://www.mameworld.net/css.html
The difference of almost 100kb multiplied over 12000 page views per day saves a substantial amount of hosting costs every month.
3) Updates and re-designs will be cheaper
Separating content from presentation means that updates and re-designs are much less labour intensive and therefore cheaper. This also counts for the maintenance of the website. To change layout and styles, structure and look the designer only has to edit the style sheets without ever having to touch the pages themselves. No need to weed through endless lines of presentational code and structural mark-up to change the look and presentation of any element on every page or to have to start from scratch or for an update of the design.
Examples: http://www.csszengarden.com/ or http://www.meyerweb.com/
4) Visual Consistency remains over the entire domain
Every page on your website/domain will (can) be linked to the same style sheet. Therefore just one change to font size, structure, background colour or any other presentational element will change it across the entire domain. This assures the visual consistency of all pages and carries branding and company colours throughout the entire web presence at the click of a button.
Example: http://www.lemon-digital.com
5) Better search engine results
Because content is presented clearly and mark-up ordered structurally and semantically and because the page is not cluttered with presentational code and table structures, search engines will rate it better. They will find the content easier and read and classify more of it. Reducing the ratio of code to content will highlight content rather than code.
Example: http://www.aqot.com
This is a comparatively small page facing strong competition from agencies and multinational companies. Clean code, semantic mark-up and layout, and some search engine optimisation have taken this client to first page and first position placements in Google for related search phrases and words such as: "food and wine spain ", "food and wine sevilla", "food tours spain ", "wine tours sevilla" and many more.
6) Accessibility to all users and tools
Using Web standards and CSS makes pages more accessible to everyone. Be it people who are just on a slow connection (still a dominant percentage of surfers use modem!), people with disabilities, users of screen readers, and users of tools other than desktop PCs such as PDAs, handheld PCs, mobile phones etc. The internet is a network for the distribution of information and it should not be restricted to Windows XP desktop PCs with high end graphic capabilities. It should accommodate for these and all other access tools.
Separating content from presentation makes web sites device independent.
Example: http://www.hildebrand-mariano.com/cabinet.html
7 ) It will stand above the crowd
The standard compliant CSS design will load faster, be more flexible, please search engines, be more accessible and display a degree of professionalism that will make any site stand head and shoulders above the masses of websites on the net.
It guarantees a competitive edge.
Tools and Techniques - Basics
Basic "dos" and "don'ts" of web design. A small account of techniques and good practice which contribute to creating an effective web design and some highlights of common mistakes.
1) Use of Media and Tools
The basic rule is: To get the best out of the tools at our disposal, they should be used for what they were designed to do. Macromedia Flash for example is an outstanding tool to present rich multimedia content. It should be used as such!. The professional design will set itself apart by making the right choices of tool and will benefit from the media's strength rather than inhibit through it's weakness. Flash should not be used to create the entire page unless there is a distinct need for interactive movies and videos to present to multimedia content. There should be no Flash links embedded in the HTML, it will render navigation inaccessible to a part of the audience. Flash is not accessible unless the user has a desktop PC with the plug-in installed. It is not accessible to disabled people and most of all: it is not read by search engines. The content inside a Flash design might as well be in a black hole. So Flash, as wonderful as it is, should be used wisely, to do what it is designed to do.
The same counts for all other web elements:
- CSS for hover links is the right choice. It is accessible, is less code intensive and does not clutter the page with redundant code such as java links would.
- Tables should be used to display tabular data and not lists of links etc, that's what we have lists for.
- CSS should define paragraph heights, spaces and margins in absolute or relative values as opposed to empty paragraphs and line breaks which clutter the markup unnecessarily.
- Positioning of images is best done with absolute or relative values in CSS defining margin and padding as opposed to using invisible spacer images and empty table cells which give the visual illusion of positioning elements correctly on screen but clutter the code unnecessarily under the hood
2) Liquid Design versus Fixed Width Design
It is the eternal debate and probably the only argument in this article which can be discussed although defenders of both sides will state that it can't. Fixed width design means that no matter what access tool is used, no matter what screen size or resolution and no matter what actual display space within your browser, the website will always appear with exactly the same width, height or both.
Liquid design means that the web page will adjust to the users' settings and preferences.
Defenders of the fixed width design will argue: "Fixed width design gives me more control over how my page will look for everyone: The same. I know best how my page should be looked at and I decide how my viewers will see it. I also decide who will not be able to see it or choose to ignore the fact that some will not. I will leave no room for flexibility and thus ensure that everyone sees exactly the same. After all, if I buy a book, no-one asks me what size I want it in."
Defenders of liquid design will argue: "I leave my design open to how the user wants to view it. My design will adapt to his screen resolution and browser window size. It will bend and stretch to whatever the user does with it. This gives me less control and the user more. I can therefore not produce the same graphically loaded designs as a fixed width design would as images don't stretch well. I have to think about how I can accommodate for all possible configurations and access tools so that whatever the user does my design will not fall apart and remain true to its style."
Both are different approaches. Fixed width is the graphic designer's approach. He decides what the page should look like, creates a graphic template and then makes sure his graphic design looks the same online formatted as a web page. Liquid design is the web designers approach. He decides on content, structure and navigation and then how to accommodate this within a sensible web page layout.
There is no reason why both can't be combined and compromises be made. Fixed width designs can be specified to only appear fixed in desktop browsers but adjust in portable media. Liquid designs can be made more readable by using fixed size maximum line lengths or content areas so that paragraphs don't turn into endless lines on a high resolution screen.
Overall however we would argue that liquid width for the entire page is good design. It allows the user to make the decision on how he wants to view the information presented on a page. It is wise because it does not exclude groups of users because they do not use the same access tools as you do. Web design is not print design and a liquid design fills the browser window of a person visiting the site on a high end monitor at high resolution the same way it fills the browser window of a person on a low resolution, old screen, a portable device or web enabled mobile phone.
3) Fixed Size Fonts
This has much in common with the argument above and is also cause for heated discussions amongst web designers. Many web designers use fixed size fonts because it gives them more control over how their web page will display, at least on those systems where it will actually display or be readable correctly. Others choose to specify the font size on their web page in relative and flexible terms. Flexible font sizes allow the visually impaired, handicapped or elderly people the possibility to increase the text size on their screen, thus rendering an otherwise unreadable page with restrictive fixed font sizes accessible. Internet Explorer, the dominant web browser on the market still does not allow the user to override the fixed font size set by the designer. Therefore flexible font sizes are more accessible.
Secondly, pages which are designed to accommodate for the changing of the font size will not fall apart if the visitor uses browsers such as Mozilla which allow overriding the web page's default font size.
Similarly not all browsers, operating systems, access tools have the same definition of font size or the same font display configuration. A website which is designed to accommodate changes in font size by adjusting all it's elements to the new size ensure that a page which is readable on one person's system is most likely also readable on the next persons screen. Adjustable font sizes are the only viable option for a user friendly, accessible site.
4) Text Links
Text links will help search engines "spider" a site. They can easily be followed by search engine bots guiding them through your pages to read all the content of a website and therefore place it better and more correctly. Flash and java links obscure navigation. If the content is online, it should be presented, not hidden away, it's there to be found.
Secondly text links allow users who rely on keyboard or other mouse less access tools to browse the site with full access to all navigation thus rendering it more usable and accessible.
5) "Click through" Page
The intelligent design allows the user to get to the information he requires in the quickest possible anner. It is proof of a good design to have a site structure which gives meaning and purpose to every page and element which is loaded by the user. Redundant and superfluous pages and graphics, overly extravagant menu systems and pop up windows are generally regarded as a nuisance by most visitors. One prime example is what is known by web designers as a "click through page". This term is used to describe a welcome page or an "intro", which has no other content than a graphic or Flash file which greets the visitor. A thought through design can greet the user, present an optional welcome greeting in the form of graphic or animation and display actual informative content on the same page.
Animations, 3D, Flash movies and music are great and often the most fun for a designer to produce and showcase. They will be great fun for the visitor, too, if he can opt in to view this high bandwidth content.
6) Frames Pages
Using frames mean loading the contents of several HTML pages and displaying them on a single page. This is often used to keep the navigation on one side of the page static while loading the content into another frame on the other side of the page.
The accessible design will not feature such frames. Text browsers do not support frames and search engines will not read all the content of the site in question. Furthermore they will often report and link to pages which seem to be ripped out of context. These are usually parts of a frames page which make no sense without the missing parts. To guarantee better accessibility it is beneficial to have all the content on one single page as opposed to using frames.
7) Opening Links
A good design will leave the user the choice on how he wants to open a link. Whether he wants to open it in a new window or the same window. To gurantee the flow of travelling through a site it is ensible to keep the user clicking through the pages in the same window. The most intuitive and most used form of clicking through pages is clicking on a link to go forward and the "back" button to go backwards. Forcing links to open in a new window kills the "back" button and is therefore not recommended for pages which should remain within the flow of the web site.
Leaving links to open in the same window also provides accessibility for disabled visitors or visitors with screen readers, many of which cannot cope with various stacked windows.
8) Semantic Mark-up
Finally, once the decision to build a page the wise way has been taken, marking up semantically is a sign of careful page building and attention to detail. It gives meaning to what is marked up and it gives structure to the source. A clearly marked up and structured code is more accessible to browsers and search engines and it will reduce costs and labour if the page ever has to be re-structured or taken over by another designer.
The vision for the future of the internet is the semantic web where everything and everyone nderstands and can give meaning to everything else floating around in cyberspace. The best place to start is at the basic level of every web page on the net.
9) Gadgets and toys
The professional design excels at presenting information in a clearly structured way, cleanly organised and pure in use and visual presentation. It therefore refrains from the use of redundant information or gadgetry. Animated mouse pointers, moving/scrolling text time/date fields and coloured browser scrollbars are regarded y the professional designer as unnecessary toys. Not only do they fail to offer any added value to the design. They clutter the HTML markup with unnecessary and inaccessible chunks of code and increase the size of the page in terms of kb by a relatively large amount compared to the relatively small benefit.