Guymon

Fluid Images

Auf A List Apart gibt es einen Auszug aus dem Buch Responsive Web Design der sich mit Fluid Images bechäftigt.

First discovered by designer Richard Rutter, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our img element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image’s width to match the width of its container.

Ich denke das Buch werde ich mir anschaffen, klingt spannend.

CSS Layout Patterns

Steven Bradley bespricht die Vor- und Nachteile unterschiedlicher CSS Layout Ansätze:

The next website you develop will likely be one of the 6 types we’ve been discussing these last couple of posts. Each layout has its strengths and weaknesses and it makes sense to learn how to code for each type.

• Fixed Width — least expensive, simplest to develop, most control over visual design
• Fluid/Liquid — Most flexible, everything relative to browser window (external to design)
• Elastic — Flexible, everything relative to part of the design, usually font size (internal to design)
• Hybrid — Can be both flexible and static. Different hybrid layouts can lean toward either.
• Responsive — Best when site needs to work well across a range of known devices, browsers, etc.
• Fliud/Elastic Grids — Offers a way to maintain order inside a flexible container.

daily links

• Panels 3: Creating a custom layout in your theme | drupal.org
  A panel layout is a layout that can be used by the Panels module. You can add content to defined content areas within a panel. The Panels module comes with several layouts, but you can also create your own for your own module or theme. Here we will create a layout for a theme.
• TYPO3 - the Enterprise Open Source CMS: Repository
  Provides a shared version of the jQuery Javascript framework for use in other extensions. See class.tx_t3jquery.php for API and usage. Includes BE module for configuring which parts of jQuery UI you want included.
• Extension TypoScript Templates – Video Tutorial | TYPO3 Blogger
  Organisation ist das halbe Leben – dies gilt auch für TYPO3-Homepages. Für mich als Anfänger war es schwer zu verstehen, meine TypoScript-Datensätze (TypoScript Extensions Templates) zu organisieren. In diesem Video zeige ich Anfängern kurz (ca. 12 Minuten^^) wie es im TYPO3 Introduction Package gelöst wurde
• jPlayer : HTML5 Audio & Video for jQuery
  jPlayer is a jQuery plugin that allows you to:<br />
  _play and control media files in your webpage<br />
  _create and style a media player using just HTML and CSS<br />
  _add audio and video to your jQuery projects<br />
  _support more devices using HTML5<br />
  _support older browsers using a Flash Fallback<br />
  _control media on your website using a JavaScript API
• heyday/Geared-Scrolling - GitHub
  Basically, we wanted a way to prolong the visibility of certain columns in a 3-column layout.<br />
  We thought - how about we do some funky proportional scrolling that slows the scrolling of shorter columns so that, as a user scrolls down the page, the columns will line up along the baseline of the tallest column… if this makes no sense it’s probably better you check it out in action: http://downtothewire.co.nz/ - sorry, our implmentation is for Webkit browsers only

Google Maps Background

Eine Google Map als Hintergrund, nette Idee.

Hier gibt es das Blogposting dazu.

I gave the id “map_canvas” the inline style of absolute positioning with its top/right/left/bottom parameters all set to 0 and then also the z-index to 0. It IS necessary to position it in the BODY element as the VERY LAST element before the close body tag.

jQUery: Contextual Slideout

Martin Angelov erklärt wie die CS5 Produkt Seiten von Adobe, sehr schick by the way, realisiert werden können.

The slideouts are ideal for presenting only the highlights of a product, with the details neatly hidden away. You can easily incorporate images, videos, or any other rich multimedia content, to create a unique experience for your visitors.