• Complain

Dan Rubin - Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting

Here you can read online Dan Rubin - Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. year: 2007, publisher: Apress, genre: Home and family. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:

Romance novel Science fiction Adventure Detective Science History Home and family Prose Art Politics Computer Non-fiction Religion Business Children Humor

Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.

Dan Rubin Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting

Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting: summary, description and annotation

We offer to read an annotation, description, summary or preface (depends on what the author of the book "Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.

  • Be inspired by 10 web design lessons from 10 of the worlds best web designers

  • Get creative with cutting-edge XHTML, CSS, and DOM scripting techniques

  • Learn breathtaking design skills while remaining standards-compliant

Here at friends of ED, we know that as a web designer or developer, your work involves more than just working to pay the bills. We know that each day, you strive to push the boundaries of your medium, unleashing your creativity in new ways to make your websites more engaging and attractive to behold, while still maintaining cross-browser support, standards compliance, and accessibility.

Thats why we got together 10 of the worlds most talented web designers to share their secrets with you. Web Standards Creativity is jam-packed with fresh, innovative design ideas. The topics range from essential CSS typography and grid design, effective styling for CMS-driven sites, and astonishing PNG transparency techniques, to DOM scripting magic for creating layouts that change depending on browser resolution and user preference, and better print layouts for web pages. Were sure you will find something here to inspire you!

This full-color books examples are not just stunning to look at, but also fully standards-compliant, up-to-date, and tested in current browsers including Internet Explorer 7. Playing by the rules doesnt have to mean drab or dull websitesWeb Standards can be fun!

Dan Rubin: author's other books


Who wrote Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting? Find out the surname, the name of the author of the book and a list of all author's works by series.

Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting — read online for free the complete book (whole text) full work

Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.

Light

Font size:

Reset

Interval:

Bookmark:

Make
Chapter 1. Semantic Structure, Dirty Pretty Presentation

simon collison

www.collylogic.com

Before starting Erskine Design in 2006, Simon Collison was lead web developer at Agenzia (www.agenzia.co.uk), where he worked on numerous web projects for record labels. Simon passionately ensures everything he builds is accessible and complies with current Web Standards.

Simon coauthored Blog Design Solutions and CSS Mastery (both published by friends of ED). His first solo book, Beginning CSS Web Development (www.csswebdevelopment.com), was published by Apress in 2006.

Away from the office, Simon runs the popular blog Colly Logic (www.collylogic.com), and he is an active member of the so-called Britpacka collective of laid-back designers and developers who all share a passion for responsible web design. When prized away from the laptop, Simon can most likely be found in the pub or at a gig, waffling incessantly about good music, football, or biscuits.

Simon has lived in many cities including London and Reykjavik but has now - photo 1
Simon has lived in many cities including London and Reykjavik but has now - photo 2

Simon has lived in many cities, including London and Reykjavik, but has now settled back in his beloved Nottingham, where the grass is green and the girls are pretty.

The brief

Building a website compliant with Web Standards for a record company is a challenge. For years, Flash has been the essential tool for band websites. Plus, there are unfathomable navigation challenges, jukebox widgets, frames, questionable color palettes, and the ever-present Loading bar. While much of the Web looks current, in the music industry, it is still 1999. The situation is getting better, as Dan Rubin will illustrate in

For the Dirty Pretty Things website (www.dirtyprettythingsband.com), I and my fellow designers at Agenzia had the opportunity to build on the impact we had made with the relaunched Libertines (www.thelibertines.org.uk) site in the summer of 2004 (see ). We built the Libertines site with Web Standards, using Flash elements in a responsible way. We were hell-bent on keeping content separate from presentation to capitalize on the growing number of users accessing the site through mobile devices, and to ensure longevity for the core content, regardless of future redesigns. As it happens, the great hopes of UK rock and roll disbanded amidst a maelstrom of excess and bad behavior, but the site lives on with an ever-growing community of users.

Fast-forward 18 months, and Libertines cofounder Carl Barat has formed a new band, and there is major anticipation from the music press and fans alike. With celebrity ex-Libertine Pete Doherty all over the tabloids for all the wrong reasons, it is up to Carl and company to bring joy back to the thousands of fans who sold their souls to the Libertines. From the outset, it is clear that any new website is going to be on the popular side, and armed with our experiences from the Libertines site, it is easy to convince the record company that Web Standards are the only way forward.

A mass of original artwork created for the band by Hannah Bays is thrown our way, and although distinctive and cool, none of it seems to lend itself to a web design. In fact, getting a design together becomes a long and drawn-out process, and is put on the back burner while we begin building the core content of the site using just XHTML and PHP/MySQL.

Figure 11 The final version of the Libertines website - photo 3

Figure 1.1. The final version of the Libertines website (www.thelibertines.org.uk)

This chapter will join the process as we complete the XHTML and database and return to the presentational approaches, looking at how this was achieved with a separate layer using CSS. The focus will be on applying the presentational visual touches, such as custom backgrounds, headers, and other widgets with CSS, leaving the core content uncompromised. shows the final version of the website.

Figure 12 The completed Dirty Pretty Things website - photo 4

Figure 1.2. The completed Dirty Pretty Things website (www.dirtyprettythingsband.com), launched in January 2006

Semantic structure

We're flying the flag for Web Standards here, so we need to be sure that the document (XHTML plus content) is separated from the presentation (CSS and decorative images). By applying all decorative presentational richness using an external style sheet, the document (the XHTML) remains pure and focused. With all presentational material kept separate from the markup, site-wide style changes can be made with little or no fuss. We just need to amend a single CSS file, rather than having to update every page in the site, making wholesale redesigns a veritable breeze. Equally important is the facility for users to take control of the content themselves by applying their own style sheet to the website, if desired.

An important step is to give any divisions (divs) added to the core content meaningful names, rather than presentational ones. For example, the masthead is called masthead, the main column is called content_main, and so on. This approach is also applied to smaller details, such as IDs and classnames used to change the color or emphasis of an element. There is no point in creating a class called green_heading if that might be used later as a hook for the CSS to render that heading in blue. Instead, the class is given a name that describes the role of the element rather than its style, such as date_heading. In most cases, such hooks are not even needed, as descendant selectors in the style sheet are used to select elements that are the children of others. You'll see how that works in the "Contents" section later in this chapter.

shows a screenshot of the website as styled by the browser's own default style sheet. The site is a fully functioning, database-driven site that completes the first stage of the build and demonstrates that everything can function perfectly well, even if a style sheet is not available.

With this stage of the build over, the team can now start thinking seriously about the presentation, and how the core content can be used as a framework for the look and feel of the site. Time to get dirty, and a little pretty.

Figure 13 The document XHTML plus content as styled purely by the browsers - photo 5

Figure 1.3. The document (XHTML plus content) as styled purely by the browser's default style sheet

Dirty pretty presentation When building purely with XHTML it is sensible to - photo 6
Dirty pretty presentation

When building purely with XHTML, it is sensible to have a good idea of what the layout of the site will be. Naturally, we will be thinking in terms of columns and core areas, such as masthead and footer, and often this will be informed by a Photoshop layout (or even a sketch using pencils and paper!) from a designer on the team. With the Dirty Pretty Things site, this was not the case, as none of us had yet arrived at a layout that we ourselves could agree on, never mind the folks at the record company.

Next page
Light

Font size:

Reset

Interval:

Bookmark:

Make

Similar books «Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting»

Look at similar books to Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.


Reviews about «Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting»

Discussion, reviews of the book Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM Scripting and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.