• 0

WD-FAQ


Question

post-32224-1133451733.gif

post-32224-1133451710.gif

As a follow up to my guide on computer graphics: “Vector vs. Raster”, I’ve written this brief guide to modern web design techniques. Such is the nature of the Internet that this information quickly becomes obsolete as new technologies supersede old ones, but I hope it will answer a few of the more commonly asked questions here on Neowin.

This guide won’t teach you how to be a good designer. It won’t even teach you how to code. Its aim is to give a rundown of the current trends in web design, the “web zeitgeist”, as it were. Hopefully it can set new web designers off on the right track to avoid problems further down the line.

Both this guide and my previous guide are in a state of constant revision and I welcome any and all feedback. My aim is that this topic can be referenced to and new users guided here for answers to quick questions often seen the Web and Graphic Designers Corner.

post-32224-1133451703.gif

Web design as a long and somewhat convoluted history. Back in the late mid-to-late 90s when the Internet was starting to become widely available to more than government agencies and geeky teenagers, the “browser wars” started. This effectively was a battle between Microsoft Internet Explorer and Netscape Navigator. Wikipedia can give you more information on this, but the basic outcome was that both Microsoft and Netscape started inventing HTML elements to stay ahead of the game. At that point, following W3C recommendations wasn’t seen as a priority and it was more important to gain users by adding multimedia elements specific to each browser. Examples include the dreaded <blink> tag in Netscape, and the countless multimedia additions and even whole scripting languages (VBScript) introduced by Microsoft.

Thankfully, times are a’changin’. Albeit slowly. Today, while there are still numerous incompatibilities, browser developers are striving to make their browsers more standards compliant to present pages in a uniform manner. With the growing popularity of Mozilla Firefox and other alternatives, Microsoft has been forced to rethink its strategy with Internet Explorer and, as such, has big plans for Internet Explorer 7. It is hoped that this new version will fix many of the IE-specific bugs that plague developers and require so-called “hacks” in CSS to fix.

post-32224-1133451718.gif

As I type this in November 2005, there is a movement among developers, headed by recommendations from the W3C, to separate content from presentation. But what does that actually mean?

Consider a bedroom in a house: let’s say it has a chair, a table, a bed and a window. That’s the content of the bedroom. But what type of chair is it? What are the dimensions of the table? Is the bed a double or a single? Or maybe a king-size? Are there curtains? This is the presentation of the content of the bedroom.

Current web trends encourage the separation of the content layer from the presentation through a technology known as CSS. CSS stands for Cascading Style Sheets, and is a method of defining rules for elements on a web page. Things like the colour of the element, the amount of padding around it, the font used for text. It is suggested that an HTML page should be near-enough bare of any mark-up (code) that gives presentation information, which should be in a separate CSS file.

Why bother? A valid question: it sounds like just an added hassle, and an extra file to upload. But the benefits are huge: if done properly, you can change your entire site appearance by editing one file. Because all pages in your website link to this presentation CSS file, you can edit that and immediately the entire look and feel of your site changes.

post-32224-1133451691.gif

It’s beyond the scope of this article to go too far into the rules of CSS, but there is one area I feel needs clarification as it is often misunderstood. When you want to style an element you define your presentation rules the CSS file and give it a style name: either a class or an ID (prefixed by “.” or “#” respectively). But which should you use? The answer lies in the element: if it’s something that’s repeated a number of times on your page, for example a particular text style or image style, give it a class. If it occurs just once, for example a DIV containing a header graphic, give it an ID. Classes are for repeated styles, IDs are for something that only occurs once per page.

post-32224-1133451696.gif

HTML, XHTML, Transitional, Strict… these terms are thrown around quite openly without much thought for their meaning. Some developers would say “Oh, code it in XHTML because it’s better”… but why? XHTML is an evolution to standard HTML which is in its fourth revision, and is designed to supersede it. It’s meant to unify developers and force them to produce cleaner code that simply makes more sense. It disallows tags that aren’t closed, rejects element attributes that aren’t part of the standard, and generally is stricter.

XHTML Transitional is a slightly more relaxed version of XHTML Strict – it allows things like the target attribute of anchor tags, which have an XHTML equivalent that isn’t widely supported by current browsers. Aside from all this, “Transitional” makes sense – as a developer community we’re in transition from HTML 4 to XHTML 1, so it makes sense that we use a transitional doctype for now to maintain optimum compatibility as well as reaping the benefits of XHTML.

post-32224-1133451745.gif

So what’s different about XHTML? There are three main differences you would come across daily with XHTML:

  • Self-closing tags – in the past, you could put the break tag (<br>) and horizontal rule tag (<hr>) on their own in HTML markup. In the quest for clean code, however, this equates to a tag that isn’t closed, so XHTML has changed this to a self-closing tag for semantic purposes, written “<br />” and “<hr />” respectively.
  • Strictness on custom attributes values – values that are IE-specific and not part of the XHTML specification such as “absmiddle” for the align property of an element will be ignored. Use CSS for this.
  • Semanticity – make sure your code makes sense! HTML defines elements for a reason. Use paragraph tags (<p>) for paragraphs, lists (<ul>, <ol>) wherever you have a list, and header tags (<h1>, <h3>) for headers. Remember, you can style any element in your CSS file if you don’t like the default way it’s presented by the browser, but use tags for their intended purpose. Also of note is that you can style lists to display horizontally rather than vertically – a navigation menu could be an unordered list displayed horizontally. After all, it is a list of links.

post-32224-1133451738.gif

In order to help developers produce clean code, a tool was developed by the W3C called the “Markup Validation Service”, or just “Validator”, which scans through the code of a web page and checks it against the latest HTML specification. I find this very helpful in designing pages as it can highlight problems that may be invisible to you on your browser but could plague users of other browsers. You can find this service here:

http://validator.w3.org/

post-32224-1133451724.gif

Tables are not evil. Web designers frequently complain about the use of tables on a web page without fully explaining their reasons, and as a result confuse less experienced designers. There is nothing wrong with using tables in your HTML code – but only if you are displaying tabular data. The W3C discourages you from using tables for layout purposes, which became the standard for web designers for many years due to their cross-browser compatibility. Now, CSS is there to define your layouts. Keep tables for data, and CSS for layout. This reiterates my point about using HTML tags for their intended purposes.

post-32224-1133451684.gif

We're getting a bit technical by delving into the world of AJAX but I think it's worth mentioning. AJAX is by no means a new technology: it's been around for a number of years but it's only now that it is becoming popular. This is mainly thanks to the efforts of GOogle who have brought it into the mainstream with its implementation in Gmail, Google Maps etc. AJAX stands for "Asynchronous JavaScript language and XML" and is a technology for creating interactive web applications. AJAX seeks to bridge the gap between web applications and desktop applications by reducing the constant refreshing of pages that occurs when working through an online application. By sending and receiving data to and from the server in the background of the web page and using Javascript to update the page dynamically, a much richer experience is possible for the user who can see the results of their inputs on-the-fly.

Check out Wikipedia's entry on AJAX for further reading, and Google Suggest for an excellent example of AJAX at work.

Edited by Joel
Link to comment
https://www.neowin.net/forum/topic/398525-wd-faq/
Share on other sites

17 answers to this question

Recommended Posts

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Bulk Crap Uninstaller 6.2 by Razvan Serea Bulk Crap Uninstaller is a free (as in speech) program uninstaller. It excels at removing large amounts of applications with minimal user input. It can clean up leftovers, detect orphaned applications, run uninstallers according to premade lists, and much more. Even though BCU was made with IT pros in mind, by default it is so straight-forward that anyone can use it effortlessly! Bulk Crap Uninstaller features: Detect and uninstall Windows Store apps Uninstall multiple items at once to speed up the process (with collision prevention) Uninstall any number of applications in a single batch Minimal user input is required during uninstallation Can find and remove leftovers after uninstallation Can uninstall some apps even if they don't have any uninstallers Detects applications with damaged or missing uninstallers Adds quiet uninstall options to some uninstallers, even if they do not support them by default Uninstall lists for automation Startup manager Verification of uninstaller certificates Fully portable, settings are saved to a single file Bulk Crap Uninstaller 6.2 changelog: Features Add invalid-uninstaller view preset by @breshinotestachegira in #903 Add certificate and integrity columns to app list by @breshinotestachegira in #894 Improve Scoop custom path detection by @breshinotestachegira in #892 Fixes Improve uninstall list load error handling by @breshinotestachegira in #895 Fix tweak visibility filtering by @breshinotestachegira in #898 Fix orphaned-only view preset by @breshinotestachegira in #899 Stabilize icon handle ownership by @breshinotestachegira in #902 Fix: Use Directory.GetLastWriteTime for install date fallback by @AniketDeshmane in #908 Do not offer to send "no way to uninstall" error messages by @Klocman in #922 Ignore ERROR_BAD_CONFIGURATION when listing MSI components by @Klocman in #924 Eat InvalidOperationException coming from ListViewGroupAccessibleObject by @Klocman in #925 Harden BCU console export and size detection - Fix BCU-console export failures by @breshinotestachegira in #897 Harden registry factory parsing by @breshinotestachegira in #893 Guard startup uninstall list loading by @breshinotestachegira in #927 Clean generated files on uninstall by @One-Simon in #928 Translations Updated Hungarian translation by @titanicbobo in #875 Updated Vietnamese translations by @wanwanvxt in #918 Fix : Swedish translation causes UI overflow in some windows by @Leise-Shadow in #865 Other Fix publish script after v6.1 by @tsiakoulias in #868 Updated the localization pack Repository Moved the repository under a new BCUninstaller organization (old links still work) Added two maintainers: @hazeliscoding and @One-Simon Added PR merge rules (require up-to-date approval and CI to pass) Updated CI script to also build the launcher (only for testing, not included in artifacts) Download: Bulk Crap Uninstaller 6.2 | 8.8 MB (Open Source) Download: Bulk Crap Uninstaller Portable | 11.6 MB View: Bulk Crap Uninstaller Home Page | GitHub | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • If built properly, swapping out the backend should be an easy task, but as the article points out, it's just Apple not wanting to do this.
    • Microsoft's new Xbox Shutdown change promises massive power efficiency gains by Pulasthi Ariyasinghe Microsoft has been delivering a lot of changes for Xbox Insiders to test in recent weeks, and today, another wave of changes aimed at consoles was announced. The latest drop is testing features that let users find mutual friends easier, customize their UI, and streamline wishlisting. When looking at an Xbox friend's profile, an option will appear to see mutual friends, perhaps to get a refresher on how you know that person. This will depend on the privacy settings. The same applies to when checking the profile of a person who is not in the friends list, offering a quick way to find out if this is a known connection. Next, Microsoft is giving the option to change how the 'Home' and 'Games & Apps' sections show off available games. There is a new poster style that users can enable for an "immersive library experience." "We’ve also made personalization settings easier to navigate and customize by separating Home and My Games & apps into separate sections," adds the company. "And to make personalization even more accessible, we’ve added new shortcuts throughout menus, so you can quickly jump in and tailor your XBOX experience the way you want." Moreover, heading to the store page of an unreleased game will now offer players the option to wishlist directly from the game card. Lastly, Microsoft is making a change to Xbox One and Xbox Series X|S consoles that are in Sleep mode, making them use the more energy-saving 'Shutdown' mode instead automatically. The company says this can increase power savings by up to 20 times without impacting "performance, gameplay, or your ability to receive system, games or apps updates overnight." The only down side seems to be a longer startup time that can take up to 45 seconds. The setting was originally introduced in 2023, and this is only the latest update to it. The power option can be changed from the console settings at any time. This Xbox Insider update is rolling out today to select members of the program. As usual, Microsoft aims to bring it to more Insiders over time before they reach all Xbox owners. Head here to find out how to join the Xbox Insider Program to get a chance to test these features and upcoming ones on both consoles and PC.
    • 2 was a fun game but felt a bit shallow, like not enough there. I hope this expansion fixes that.
  • Recent Achievements

    • Rookie
      lamborghiniv10 went up a rank
      Rookie
    • One Month Later
      pinnclepd earned a badge
      One Month Later
    • First Post
      X-No-file earned a badge
      First Post
    • One Month Later
      johnjacobb40 earned a badge
      One Month Later
    • One Year In
      Primer1st earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      507
    2. 2
      PsYcHoKiLLa
      211
    3. 3
      +Edouard
      145
    4. 4
      Steven P.
      88
    5. 5
      ATLien_0
      80
  • Tell a friend

    Love Neowin? Tell a friend!