This is the March 2004 monthly web design digest I compiled for my team at the Open University (OU). I’m going to be doing one a month and will continue to republish them here as well as on the OU Intranet.<\/p>\n
“I’m also interested in making the writing process as painless as possible. Tools like Textile go a long way to helping but I have some ideas of my own on ways to enter links and images.”<\/p><\/blockquote>\n<\/dd>\n
- CSS site: BBC Broadcast<\/a><\/dt>\n
- XHTML, CSS design. The CSS doesn’t quite validate due to the opacity on the menus but otherwise a really slick cutting-edge use of decent code.<\/dd>\n
- Using Dreamweaver and CSS<\/a><\/dt>\n
- Dreamweaver MX and MX2004 have a handy feature called Design-Time style sheets. We can use this feature to effectively turn off poor implimentations of CSS in the ‘edit’ mode. However, we cannot aply this functionality on a sitewide basis. Rather, we must apply it to each individual file. Dreamweaver then creates a .mno file for each of the files we want to utilise the design-time functionality. It’s not ideal. This post discusses the matter of shortcomings and offers the solution of ‘batch processing’ commands. Not an ideal solution. Hopefully Macromedia will look into this.<\/dd>\n
- Quickly generate a standards based XHTML page with CSS!<\/a><\/dt>\n
- This is quite amazing. If you know anybody who wants to create a document for the web then you could do worse than point them here. It’s a form with predefined fields for meta data, layout, links and colours and document structure. Don’t overlook this one!<\/dd>\n
- High Accessibility, High Design<\/a><\/dt>\n
- Anyone with good graphic-design skills can use Web standards to produce attractive Web sites that function adequately for nearly all viewers and very well for most viewers \u0096 including people with disabilities. This article explores a few details concerning the interplay of accessibility and Web design. The article nicely walks the reader through the past present and future of good design that isn’t inaccessible. Near the bottom of the document you will find links to site which have great designs but are also extremely accessible.<\/dd>\n
- Hi-Fi Design with CSS<\/a><\/dt>\n
- A well designed slideshow that details some of the more practicle CSS applications:
\n easy colour switching as used in Wired.com. Also explores the body class and
\n ID properties as used in many Learning Design and Technology projects like
\n Assessment<\/a>.<\/dd>\n- Creating structured tables<\/a><\/dt>\n
- The article is an easy to follow guide to using the various structural elements of data tables.<\/dd>\n
- Accessible Tabs with CSS<\/a><\/dt>\n
- Another presentation on combining structural XHTML with good design using CSS. The accessible popups techniques detailed here are used in Learning design and technology sites such as Employment
\n Info<\/a> and T209<\/a>.<\/dd>\n- Web design going in the wrong direction?<\/a><\/dt>\n
- Is there too much emphasis on standards, css, html etc and not enough on
\n actual usability? This discussion suggests that the human being on the other
\n end of the interface is being forgotten. To a large extent I agree and hope
\n that in this team we accommodate both needs adequately.<\/dd>\n- Accessible Pop-up Links<\/a><\/dt>\n
- Sometimes we have to use pop-ups – so we might as well do them right. This
\n article will show you how to make them more accessible and reliable while simplifying
\n their implementation. Learning Design and Technology have been using accessible
\n pop-ups for sometime now. Whilst it is preferrable not to use them at all,
\n at times it is unavoidable. To make the process as painless as possible, the
\n URL of the popup should not be contained within the javascript. Instead, a
\n traditional link should merely use javascript to invoke the function of launching
\n a new window. <\/dd>\n- CSS Sprites: Image
\n Slicing’s Kiss of Death<\/a><\/dt>\n- There is no longer any need to use an imagemap. Instead, we should use CSS
\n\t absolute positioning to to define co-ordinates of hotspots. We then use
\n\t background images (or, if neccessary, foreground images) to give the visual
\n\t representation to users who can access it. Non-visual and text only browsers
\n\t will be provided with textual descriptions where relevant which are then
\n\t hidden using your
\n\t favourite image replacement technique<\/a>. <\/dd>\n- Zebra Tables<\/a><\/dt>\n
- Whilst we no longer use tables to layout pages, they are still semantically
\n\t correct when used to display data. However, CSS alone will not provide
\n\t an easy solution in styling alternate rows with colour (a common usability
\n\t feature). The script found in this article enables us to easily create
\n\t different styles for even and odd table rows. This means that we don’t
\n\t have to manually add the class="odd" and "even" to individual rows. Benefit
\n\t to us: Less code, less bandwidth, less work. <\/dd>\n- A quick and dirty CSS hack: PNG backgrounds<\/a><\/dt>\n
- Internet Explorer doesn’t support the alpha transparency layer of the PNG
\n\t file format. This means that we can’t realistically use alpha transparency
\n\t to overlap layers effectively. We are forced to use GIFs with their index
\n\t transparency. The Study
\n\t Folder<\/a> site within LWOU uses this effect in the
\n\t header (resize your browser to see the folder move independently of the
\n\t background) This article offers one solution to cater for IE. However,
\n\t it is work intensive and I suggest that until IE supports the alpha-layer,
\n\t we stick to using index transparency (as crude as it may look!). Further
\n\t down the line we will be able to alter the CSS to offer a better alpha
\n\t transparency version. <\/dd>\n- 10 new ways to speed up download time<\/a><\/dt>\n
- We already avoid using tables for layout, call up images using CSS, use
\n\t relative call-ups and contextual selectors. Our META tags are also short
\n\t and sweet. We also already put our CSS and JavaScript into extenal documents.
\n\t We also ensure that a forward slash is at the end of every directory link.
\n\t We could probably do with using more CSS shorthand and minimise whitespace,
\n\t line breaks and comment tags. All in all we carry out the correct procedures
\n\t for speeding up download time. <\/dd>\n- Designing for dyslexia (part 1)<\/a><\/dt>\n
- By following W3C guidelines, we are already doing a great deal for Dyslexic
\n users. The WAI accessibility guidelines ensure that we meet the requirements
\n for the web to be accessible to all. <\/dd>\n- Designing for Dyslexia (part 2)<\/a><\/dt>\n
- Part two of an article by Made For All editor, Tim Roberts presenting techniques to make your web documents “Dyslexia Friendly”.<\/dd>\n
- Footers – a discussion<\/a><\/dt>\n
- We made the decision to ensure that we have a consistent footer across all
\n our sites here at Learning Design and Technology. The common elements we decided
\n upon: A link to top, copyright, privacy policy, disclaimer, accessibility statement,
\n site map and feedback are all very useful pieces of information and are of
\n definite benefit to the users. We decided not to put loads of links to other
\n site sections in the footer as they could soon reduce the usability rather
\n than imporve it. <\/dd>\n- IE7<\/a><\/dt>\n
- This javascript enables us to code our CSS for standards based browsers and
\n have Internet Explorer render the pages correctly too. However, it does involve
\n linking to another CSS file which to me seems to be overkill. I actually prefer
\n the method of coding to the baseline of Internet Explorer whilst adding further
\n embellishments to web standard browsers. For instance, in print CSS we can
\n expand urls of linked content so users can see where the linked documents are
\n (only in standards browsers). Internet Explorer users will have to go to the
\n web page itself t access the links (as the case has always been).<\/dd>\n- EOLAS
\n patent dropped<\/a><\/dt>\n- This means that embedded content can still be used without fear of unusable
\n\t\t\t messages being flagged up infront of the user. A seemless internet
\n\t\t\t experience is retained and no recoding is required by us in sites
\n\t\t\t like Effective Use of English which embeds Flash activities into
\n\t\t\t HTML.<\/dd>\n<\/dl>\n","protected":false},"excerpt":{"rendered":"This is the March 2004 monthly web design digest I compiled for my team at the Open University (OU). I’m going to be doing one a month and will continue to republish them here as well as on the OU Intranet. XML based CMS Adactio’s Jeremy is in the process of developing a content management […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[87],"class_list":["post-490","post","type-post","status-publish","format-standard","hentry","category-life","tag-web-design"],"_links":{"self":[{"href":"https:\/\/guycarberry.co.uk\/guyweb\/wp-json\/wp\/v2\/posts\/490"}],"collection":[{"href":"https:\/\/guycarberry.co.uk\/guyweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guycarberry.co.uk\/guyweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guycarberry.co.uk\/guyweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/guycarberry.co.uk\/guyweb\/wp-json\/wp\/v2\/comments?post=490"}],"version-history":[{"count":0,"href":"https:\/\/guycarberry.co.uk\/guyweb\/wp-json\/wp\/v2\/posts\/490\/revisions"}],"wp:attachment":[{"href":"https:\/\/guycarberry.co.uk\/guyweb\/wp-json\/wp\/v2\/media?parent=490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guycarberry.co.uk\/guyweb\/wp-json\/wp\/v2\/categories?post=490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guycarberry.co.uk\/guyweb\/wp-json\/wp\/v2\/tags?post=490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}