This site is archived.

Theming, Design & Usability

Responsive Webdesign - Drupal Theming

Kristof Orts 24 June 2010
Type:  Session in official program

Use fluid grids, flexible images, and CSS media queries to create elegant user experiences that fit any browser or device’s viewport.

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

Additional Presenters:  Matthias Vandermaesen

CSS 3 and HTML 5

Kristof Orts 24 June 2010
Type:  Not planned session

The Future of Webdesign - The Techniques You’ll Soon Be Using

HTML 5 is the next major version of HTML. It introduces a bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone. In addition, HTML 5 will also include fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more.

Going the RIA way

gavri 20 June 2010
Type:  Not planned session

With all the new html5 buzz, and the talk about the future of flash, its time to make some order out of the chaos.
In this session we will talk about the benefits of using the flash platform.
whether you want to build an eye-caching wizard, a sophisticated mapping applet or to build a customized media players, the option of using flash cannot be ignored.

With all the new html5 buzz, and the talk about the future of flash, its time to make some order out of the chaos.
In this session we will talk about the benefits of using the flash platform.
whether you want to build an eye-caching wizard, a sophisticated mapping applet or to build a customized media players, the option of using flash cannot be ignored.

  • how to decide when to prefer the use of flash over the use of javascript.
  • Show you some real world examples of leveraging Flash and Flex to build a great user experience in Drupal.
Additional Presenters:  Mihai Corlan

Design for Drupal: A Template Approach - Cut Your Design Time Down By 200%

Nica Lorber 18 June 2010
Type:  Session in official program

This session is not about code. No code no code no code. No really, no code.

This session will showcase a unique approach we've pioneered at Chapter Three leveraging Adobe Fireworks to use an in-house created template to transform our designs from good to amazing. We'll be showing you how to address a lot of elements that make sites look Drupal-y and show you how to create Future-Proof-Extendable-Design.

This session is not about code. No code no code no code. No really, no code.

This session will showcase a unique approach we've pioneered at Chapter Three leveraging Adobe Fireworks to use an in-house created template to transform our designs from good to amazing. We will be showing you how to address a lot of elements that make sites look Drupal-y and show you how to create Future-Proof-Extendable-Design.

What the heck does that mean? You'll have to show up to find out, but we guarantee that if you design sites for Drupal, that you will use the tools that we have to share.

Additional Presenters:  Floor Vahn
Resources:  Fireworks Template

Pro-active Selenium testing with Drupal

J-P Stacey 18 June 2010
Type:  Not planned session

Want to get robust tests for your site running NOW, but don't know how? Selenium needs no PHP or Drupal chops and you can write tests by just clicking around the site.

Selenium is a testing framework which allows anyone - developers, designers, project managers or the client - to record user journeys in their browser and have those user journeys be replayable on anyone else's browser. It also supports whole suites of tests, automating in the browser and automating outside the browser using a dedicated testing server.

Selenium's a great choice for Drupal testing because so much of the functionality you or your client will want to build is browser-based. Also, with a few extra tweaks, Drupal can integrate very nicely with Selenium to produce robust tests.

Imaginary users can save your Drupal site

J-P Stacey 18 June 2010
Type:  Session in official program

User personas - fake users everyone has a hand in fleshing out - can ensure your site's functionality and usability and speed up feature launch

Drupal lends itself well to modular, separately deployable code. This means you can often reduce quite large Drupal-based projects to sets of minimum deployable features (MDFs) - informally speaking, chunks of functionality which get a particular job done, and don't look weird on their own - which quickly start to take shape as Drupal development plans.

Additional Presenters:  Rich Middleditch

Don't design websites. Design web SYSTEMS!

Todd Nienkerk 3 June 2010
Type:  Session in official program

Designers have tremendous control over the functionality of the site. Developers, after all, look at wireframes and comps to determine what a feature should do. So designers: Stop thinking about websites and start thinking about web systems. Learn how the web chefs at Four Kitchens design the look and feel of some of the world's largest Drupal sites — er, systems.

Drupal's theme layer is very flexible and can accommodate just about any web design. It's important for designers to remember, however, that they're not really creating a page — they're building a complete system to house the all of the site's content.

In this session, we will talk about concepting and creating a Drupal-optimized design.

Image credit: agjimenez on Flickr (CC BY-ND).

Additional Presenters:  Aaron Stanush

Accelerated grid theming using NineSixty

Todd Nienkerk 3 June 2010
Type:  Not planned session

This session will discuss grid-based design, the 960.gs grid system, and how to implement it in Drupal using the NineSixty theme.

Outline

<

ul>

  • Brief history of grid-based design
  • Philosophy behind 960.gs and how it works
  • Basics of grid-based theming
  • How the NineSixty theme implements and expands on 960.gs
    • Content-first layout using "push" and "pull" classes
    • Dynamic grid widths based on context
    • Debugging tools and grid visualization
    • Right-to-left (RTL) language support

  • Creating versatile, dynamic, and context-based layouts using NineSixty
    • Subtheming NineSixty

  • Add Web font to your site and modules

    steveleemonotype 26 May 2010
    Type:  Not planned session

    Web font, @font-face is a CSS standard to deliver the fonts real-time like images to web pages. It is gaining popularity and is supported by all major Browsers. Designers can use fonts that are located in remote server just like referencing images or video assets. It solves the problem that we must have the fonts reside on the local computer and we can use remotely located Unicode fonts that contains large collections characters and can be updated regularly and accessed by remote users instantly. SEO will be improved by implement the text in real fonts vs. images because the search engine can index/understand the actual text use in a regular fashion like h1, h2 and .headline etc.

    We have developed a module to enable the content with web fonts and the module also comes with a WYSIWYG editor with web fonts which can be selected by individual Drupal publisher. Users can design their site with renown fonts for branding, SEO and help vision impaired (fonts can be read by vision aid devices)

    We will talk about the Web Font API used in our module so developers can integrate the Web Fonts to their modules and content.

    Web font, @font-face is a CSS standard to deliver the fonts real-time like images to web pages. It is gaining popularity and is supported by all major Browsers. Designers can use fonts that are located in remote server just like referencing images or video assets. It solves the problem that we must have the fonts reside on the local computer and we can use remotely located Unicode fonts that contains large collections characters and can be updated regularly and accessed by remote users instantly. SEO will be improved by implement the text in real fonts vs.

    Improving your user experience with CSS popups (menus, blocks, views, etc)

    Scheepers 14 May 2010
    Type:  Not planned session

    Popping up menus, blocks, views and even forms can greatly reduce clutter on your site, improve user experience, simplify design as well as reclaim your oh so precious real estate above the fold.

    One of the most valuable modules in site development is surely the Admin menu. Why? It reduces page loads significantly and makes almost everything easier to find - without taking up much space. Why not extend that same courtesy to your users... and animate it.

    You can, thanks to the Popup module and its little helpers.