v March 2012 ~ WebsiteSupport

March 23, 2012

CSS Layouts: The Fixed. The Fluids. The Elastic.

Which Cascading Style Sheet (CSS) layout is best? All have their quirks and their unique pros and cons. Is one more accessible than the other? More usable? What are the drawbacks and how are they dealt with? Is one easier to create than the other? Is there an evil, inaccessible layout? I suspect some will say yes to this, but I’m not going to. I like them all and feel all are suitable if steps are taken to ensure easy usability and equal accessibility. All are part of a web site’s presentational layer, so most of the accessibility relies on the extractable semantics and proper usage of the underlying mark-up. What follows is my take on the rigid fixed, the adaptable fluid, and the expandable elastic layouts.

Fixed Width Layouts

A fixed width site is one where the main wrapper is set to a specific immovable width independent of the user agent’s display resolution. A common and considerate fixed width is 760 pixels, a size that ensures users with 800×600 resolution monitors have close to full window viewing without annoying side-scrolling.

The Fixed Width Pros
The main readable content area is tightly controlled without having to set minimum-maximum width (which isn’t universally supported, anyway).
Fixed width layouts are sometimes easier to style depending on the effect you’re after. Some visual designs can only be achieved in a reasonable manner with a fixed width layout.
Based on the example width above — 760 pixels — the typical main content area will be in my opinion an ideal width for optimum readability.

The Fixed Width Cons
My precious “ideal width for optimum readability” pro-listing above can go bad if the text is enlarged greatly since the line-width-to-text-size ratio doesn’t increase along with text resizing. Do note, though, in a good design, this is only a problem if the text is huge.
People with small monitors (640×480 pixels) will end up with a horizontal scroll bar on a 760 pixel fixed width site. This is a very uncommon problem.
A 760px fixed width site can look too narrow on large screen displays.
The narrow width can limit the reasonable number of columns and content, but this may actually be a pro. Think forced moderation.

Some Fixed Width Advice
Place your fixed width content on the left hand side of the page so on a typical site 640×480 pixel monitor users won’t have to side scroll to read the site’s primary content.
Be sure to provide a handheld style sheet to accommodate smaller devices. Supplying projection and TV media-type style sheets may also be a good idea.

Fluid or Liquid Layouts

A fluid or liquid layout is created by not specifying a wrapper width at all or doing so using the percentage unit of measure. In other words, barring borders and padding screwing things up, a 100% width site will take up the entire view port width without producing a horizontal scroll bar.

GrayBit.com is an example of a fluid width site. It resizes to under just under 755 pixels before sprouting a scroll bar, but the use of the scroll bar isn’t required to access the content. In fact, the site remains perfectly usable down to about 560 pixels after which elements start overlapping, getting concealed, or dropping. Most fluid layouts have limitations like this and most that I’ve seen don’t perform well on handheld devices unless styles are removed or a handheld style sheet is furnished.

The Fluid Layout Pros
If done right, a fluid or liquid layout can adapt to just about any view port width making it quite universal. This is seldom a reality, but in theory, and if care is taken to ensure it, it is possible.
Fluid widths match the browser default layout method making this the “purist” of them all. But does a developer’s want of site purity sometimes stand in the way of usability? I think it may.
The fluid layout makes the most out of available screen real estate. More content should be above-the-fold (meaning it’s available without scrolling in any direction). But…

The Fluid Layout Cons
Too much available content and a strong desire to fill white space can be a detriment to usability. Too much content can confuse the user and make a site too congested or cluttered. There is an expression: “White space sells” and it’s a truthful statement, even on the web.
If width limiters using the CSS property max-width — which isn’t supported by Internet Explorer (IE) version 6 or older, by the way — aren’t supplied, you may very well, in your quest for layout purity, create a site that is at best difficult to use. Try reading a line of text that is over 1000 pixels wide and you’ll begin to see the problem.

Some Fluid Layout Advice
Use this layout method purposefully. Don’t do it because it’s “pure” and for no other reason. I suspect there has to be a better reason than this. If you do create a fluid width layout, make sure it fits in a large variety of view port sizes. Else, why bother?
If you’re making a fluid layout site and have fixed width content areas, you have essentially made a fluid/fixed width layout hybrid and can only be as narrow as the width defined by the fixed width content section or largest object. Be careful. If you’re going to make a site that is fluid, make sure it’s really fluid and not just in name only.
If you do create a fixed/fluid hybrid anyway, like that shown on my CSS tutorial, make sure it fits 800×600 view ports.

Elastic Layouts

An elastic site’s main wrapper and other elements are measured using ems as the unit of measure. Ems are relative proportionally to the text or font size. Thus, as the text size is increased, the sections measured in ems will increase in size as well.

An elastic width example can be seen in my CSS Zen Garden submission (limited elastic-fluid hybrid). To the best of my knowledge, this is the only CSS Zen Garden submission that is elastic and meant to be as accessible as the non-editable markup would allow. I’m proud of this project.

The Elastic Layout Pros
If done right, this is a very stable layout method because everything resizes at the same rate. The result is nothing changes disproportionally.
An elastic layout is challenging and cool as hell. The first time I saw one was Tommy Olsson’s site (which happens to be an exceptionally well done example of how an elastic site should be done). This blew my mind, made me laugh, and generally impressed the hell out of me. Elastic width sites are best enjoyed by enlarging the text using ctrl and mouse scroll wheel… let me hear you say “Zwoop.”

The Elastic Layout Cons
Aside from the cool factor, I don’t really see much of a benefit to this type of layout. This makes me wonder what the point is.
Unless limited, this layout method can be a usability disaster as it’ll get wider and wider and wider — without benefit.

Some Elastic Layout Advice
If you’re going to make an elastic layout, make sure it works on small monitors. Else, what’s the point?
Limit an elastic layout specifying a max- pixel or fluid width measurement (hybridize it). For instance: #wrapper { width:60em; max-width:98%; }. Purists may argue that it’s not a true elastic layout if it’s limited or hybridized, but I really must ask: who cares? Again, layout purity is all fine and good, but not when it’s at the expense of usability.
Remembering that IE 6 and older doesn’t support max-width, try to start narrow enough that the text can be enlarged to its highest IE setting without producing a scroll bar at 1024×768. You’ll see that is the case with my CSS Zen Garden submission. To step it up a notch, you can make it narrow enough that it’ll be enlargeable to it highest setting in IE on an 800×600 monitor as well. An example of this can be seen on my skinny elastic web hosting site (limited elastic-fluid hybrid). I do plan to re-do this in less than a year, but the link is good for now.

In Summary
As you can see, all of these layout methods have their pro and cons (can you think of others?). As far as which one is better I don’t know. It is just a site’s presentational layer as I noted previously, so with a little care and consideration, I think all of these methods are solid and usable when creating accessible, usable sites. That said, I do suggest not falling into the web purist trap of doing things because they’re more “pure,” sometimes at the expense of usability or accessibility. I’m not trying to criticize those self-proclaimed purists, they make us think and are a source of insight, but if you follow that route, do so cautiously. Have a purpose and a plan. “Just because” is not a reason — or so I tell my kids.

March 08, 2012

Fedora 17 Alpha Features

The Fedora Project proudly announced the immediate availability for download and testing of the Alpha version of the upcoming Fedora 17 operating system, due for release in May 2012.

Dubbed Beefy Miracle and powered by Linux kernel 3.3, Fedora 17 Alpha brings lots of new features, improvements and bug fixes.

Fedora 17 Alpha is distributed as an installable DVD and Live CDs with the latest development version of the upcoming GNOME 3.4 desktop environment and KDE Software Compilation 4.8, for both 32-bit and 64-bit architectures.

Some Features:
· Linux kernel 3.3.0 RC3;
· Move all to /usr;
· GNOME 3.4 Beta 1;
· KDE SC 4.8;
· Multitouch support;
· PackageKit integration;
· Automatic KDE Plasma dependency generation;
· SSSD AutoFS integration;
· SSSD-Sudo integration;
· The GIMP 2.8;
· Added Wallaby, a programmable semantic configuration service for Condor;
· Added "deny ptrace" for SELinux;
· systemd started services now run in private /tmp;
· Added Non-Uniform Memory Alignment Daemon (numad);
· OpenJDK is now the default Java Runtime Environment;
· Updated IPA to version 3, adding support for SELinux management, Active Directory domains, and SSH public keys management;
· Added new Font Configuration tool;
· ICC profile support for printing;
· Added English Typing Booster input method for iBus;
· Inscript 2 keymaps for Indic languages;
· Haskell Platform was updated to version 2011.4, with support for GHC 7.0.4;
· Boost was updated to version 1.48;
· DRI2 3D drivers only;
· Integration of libpinyin for better Chinese pinyin input;
· OpenStack now uses libguestfs and Qpid.

Fedora 17 Release Schedule:
February 28th, 2012 - Fedora 17 Alpha release
April 3rd, 2012 - Fedora 17 Beta release
May 8th, 2012 - Fedora 17 final release

Download Fedora 17 Alpha Installable DVD 
Download Fedora 17 Alpha GNOME Live CD
Download Fedora 17 Alpha KDE Live CD 
Download Fedora 17 Alpha Xfce Live CD
Download Fedora 17 Alpha LXDE Live CD

March 01, 2012

Some Photoshop Tips for Developers

If you’re a die-hard coder who needs nothing more than coffee and Vim, perhaps web development isn’t for you. It’s varied. While you certainly need top-notch coding skills, you can’t avoid handling media and graphics. Yes, graphics. Probably in Photoshop.

Photoshop seems a little odd when you first use it. The interface isn’t quite standard on any OS platform and some features will confuse you initially. Persevere with it, though, and you’ll never want to use another graphics package again. Fortunately, there are several ways to make your life a little easier…

1. Quickly Select a Layer

If you’ve received a PSD from a designer, you’ll either find they’ve flattened it (yeah, thanks) or it contains thousands of layers. To locate the layer you need, switch to the Move tool (V), hold down Ctrl and click the element you want. Alternatively, right-click it to view a menu of all layers under the cursor.

2. Easier Layer Management

Navigating multiple layers can be painful. Photoshop offers several options to help you manage long lists:

Assign a name: double-click a layer’s name to change it.
Assign a color: right-click the eye icon and choose a color.
Group layers: click the folder icon (circled) and drag layers into it. Folders can have sub-folders and be re-arranged, renamed, colored, collapsed or hidden.

3. View a Single Layer

It’s often necessary to isolate a single layer. You can do that by switching off every unnecessary ‘eye’ icon but that can take a while if you have many layers. A quicker solution is to hold down Alt and click the ‘eye’ icon on the layer you want. Repeat the action to re-enable the other layers.

4. Apply the Same Style to Another Layer

You can move styles from one layer to another by dragging the “fx” icon on the right-hand edge of the layer block. Hold down Alt at the same time and it’ll duplicate the styles.

5. Create Snapshots

I often find myself undoing several actions to return to a previous state, e.g. when creating graphics in multiple sizes. Clicking undo or finding the correct historical state isn’t always practical. Snapshots are a great option; click the snapshot icon in the History palette and Photoshop will create a copy of the current state which you can return to at any time.

6. Accurate Guides

Guides are useful when you’re lining up elements and slicing images. To quickly add a horizontal or vertical guide, view the rulers (View > Rulers or Ctrl+R), click the ruler and drag the guide to your image.

You should be aware that Photoshop allows guides anywhere — even half way through a pixel. This can lead to inaccurate slicing or unwanted anti-aliasing effects. To prevent the problem, create a rectangular selection first then drag the guide to the selection’s edge where it will snap accurately into place.

7. Multiple Undo

Ctrl+Z performs a standard undo. However, pressing it again undoes the undo — it becomes a redo! If that’s causing you grief, select Edit > Keyboard Shortcuts then expand the Edit in Application Menus. Remove “Ctrl+Z” in Undo/Redo and add it to the “Step Backward” setting.

8. Pick Colors from Anywhere on Your Screen

For years, I used a color picking tool to grab a hex code, opened the color palette and copied it in. There’s no need. When using any of Photoshop’s color-picker tools, click anywhere on an image then drag the cursor off the Photoshop window to any part of the screen.

The only drawback with this method is that you can’t switch to a hidden application — you may need to make the Photoshop window smaller so more of your screen is visible.

9. Easy Ruler Rotations

You’ll often receive images taken by the photographer after they’d had a few drinks. Fortunately, it’s easy to rotate pictures to their natural orientation using the ruler tool (under the same toolbar icon as the eye-dropper).

Draw a line along the horizon in the direction you want to rotate, i.e. if it needs to be rotated clock-wise, draw from left to right. Now select Image > Image Rotation > Arbitrary from the menu — the dialog will show the ruler angle so you can simply click OK.

10. Personalize Your Work space

Developers are a pedantic bunch. We spend hours organizing our desktops and IDEs so we can save a few seconds on repetitive tasks! Photoshop is a complicated beast and it can take time to open and position palettes and windows how you want them. To ensure it can’t be messed with, click the chevron icon at the top-right and save a new workspace.

Tutorials By:  

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | coupon codes

HTML Hit Counter