Saturday, April 27, 2013

What are Core Dumps?

What are Core Dumps?

Core dumps are files the system creates when a process running in memory does not finish. The portion of memory that the process was using is then dumped to a file. This can be quite helpful when debugging your scripts. Core dumps typically have a file name like: core.5876
Reviewing Core Dump Files on VPS or Dedicated Servers

For most users, getting usable information from a core dump file can be difficult. If you are a VPS or Dedicated customer with command line (shell) access, most of the information in the core dump can be found by running either one of these two commands:

gbd -c core.####

strings core.####
Reviewing Core Dump Files on Shared Servers

If you are on a shared hosting package, for security reasons you do not have access to the command line. For our shared customers, we've created a basic PHP script that uses the commands above to allow you to find any core dump files in your account. The script can be found here:

http://inmotionhosting.com/support/files/scripts/coredumpcheck.txt

    Upload the coredumpcheck.txt file to the folder where you want to view core dumps.
    Rename the file to coredumpcheck.php
    Access coredumpcheck.php file in your browser. For example, if you have core dumps in your public_html folder then you would go to http://yourdomain.com/coredumpcheck.php
    The script will list all the core dumps in the current directory. Click any of the file names to view more details about the core dump.
    Look under the "RUNNING: gdb -c core.30387" heading to find the script that is causing the problem. It will look something like:

    Core was generated by '/usr/bin/php /home/training/public_html/t2c_escalation/escalatet2s.php'.


Resolving Core Dumps

Core dumps are advanced in nature. It's best practice to contact your web developer with the information that you have using the coredumpcheck.php script. If you are using a CMS such as WordPress, Joomla, or Drupal and the core dump is being caused by a plugin or module, your can disable or remove that module to resolve the issue.

Tuesday, April 9, 2013

C-Swipe: An Ergonomic Solution To Navigation Fragmentation On Android

There are 3,997 different Android devices. Your navigation should work with all of them. C-Swipe can help: It is an alternative navigation pattern for tablets and mobile devices that is novel, ergonomic and localized.
This article provides a detailed walk-through of the design and code and provides a downloadable mini-app so that you can try out C-Swipe to see whether it’s right for your app.

Size, Complexity Increasing

The number of touch devices is increasing, with new devices and features being introduced daily. If we look at recent Windows OS developments, one clear trend is that touch devices are getting larger. Already, the lineup includes 12-, 15- and 21-inch touchscreens and touch-friendly applications are becoming more complex and full-featured, now including standard Microsoft Office apps optimized for touch. And if the latest 12.85-inch Chromebook Pixel with its 2560 × 1700 touchscreen display is any indication, Google is likewise serious about integrating touch into larger hardware for serious computing.
It’s only a matter of time before Android OS is forced to catch up; however, scaling the current Android 4.x action bar scheme may not be realistic or ergonomically desirable for all applications or device types.
I’m proposing C-Swipe as an alternative navigation pattern, based on the natural ergonomics of the human hand. C-Swipe can be used to bring up a contextual menu anywhere on the touchscreen by swiping the thumb in a natural semicircular arc along the surface. This gesture is roughly in a shape of the letter C when executed with the right hand — hence, the name of the pattern (the gesture is called a “reverse C” when executed with the left hand).

Content Is King

Imagine the entire surface of a mobile or tablet touch device being devoted to content. To use the functionality or navigation, the user would swipe the screen with their thumb in a natural semicircle gesture anywhere on the device. They could make this touch gesture while holding the device comfortably and securely with two hands, while the device is flat on the table, while reading in bed, or in any position and orientation they choose. That’s because all they need to do is swipe the screen with their thumb.
The swipe of the thumb causes a semicircular contextual menu to display. When the menu comes up, the most commonly used function is on top, near the final position of the thumb. Icons and text for the menu are positioned where they will not be blocked by the thumb. The user taps the item they want, and once the action is performed or the screen is tapped anywhere outside the menu, the menu would disappear.

Easy To See, Yet Hard To Reach

Flipboard is an elegant app that has gained legions of loyal fans through its gorgeous UI and effective use of content as navigation. Yet, on Flipboard’s detail pages, some options — “Back,” “Favorite” and “Like” — are located in the top action bar:
Flipboard app for Android 4.
Fig. 1: The Flipboard app for Android 4 places action buttons in the top action bar. Larger view.
The top action bar is a popular location for navigation and functionality in Android 4 and is recommended in Android 4’s design guidelines. The top bar facilitates the discovery of functions: it presents them for easy viewing at the top of the device, where they would never be covered by the user’s hands.
Yet placing the actions at the top of the screen is a double-edged sword: reaching the top bar on many devices is difficult. Even on small mobile devices, reaching the top bar requires awkward juggling. Larger devices, such as the popular Galaxy Note, require full use of the second hand to tap the buttons, making both multitasking and relaxed casual use more difficult.
The action bar also takes up important space at the top of the screen. The visible functions serve as an effective learning aid while the user is learning the app. Unfortunately, as soon as the user learns the functions, the bar’s visibility becomes a distraction, taking up precious space in the most visually active place on the screen.

Navigation Anywhere

What if there was a way to devote 100% of the screen to content, while allowing the user to effortlessly call up a functional menu from anywhere on the device, wherever their hand is, and provide direct access to all options without any awkward gestures or juggling? That is exactly what C-Swipe does:
Swipe-and-release gesture in Flipboard app.
Fig. 2: In this redesign of the Flipboard app, the user makes a swipe-and-release gesture to bring up the locally accessible contextual navigation. Larger view.
A semicircular swipe with a thumb anywhere on the screen brings up a hidden menu containing the same items as located in the top action bar. Once the menu is open, tapping the desired item with the same thumb is easy.

Two Menu Designs

A C-Swipe gesture can be made in two different but important ways: as a swipe and release or as a swipe only. In each case, the menu would look different. Pick the one that is right for your app. The swipe-and-release design puts the icons inside the menu tiles, as seen in figure 2 above.
The user would swipe the surface with a semi-circular gesture and then release their thumb from the surface of the device. The release is crucial here because otherwise the thumb would cover most of the menu items, making usage awkward.
The second type is swipe only, shown in figure 3 below. The system recognizes the same swipe gesture, but this time the menu is painted while the thumb is still pressed to the surface of the device. Because the thumb is covering the menu options (by design), the items must appear outside of the menu to be visible.
Swipe-only implementation of C-Swipe.
Fig. 3: The swipe-only implementation of C-Swipe puts the icons outside of the menu. Larger view.
Which interaction should you choose?
With swipe only, the thumb maintains contact with the device, activating the menu immediately. This makes navigation efficient: there is literally no wasted motion. However, many testers have preferred the Spartan design that positions icons inside the menu. Try both and decide for yourself, using the enclosed downloadable mini-app. The app features a mixture of the two modes: it uses the swipe-and-release gesture, but positions the icons outside of the menu bar so that you can see how it looks.
Note: Keep in mind that the swipe motion to call up the menu in the demo mini-app requires you to draw a fairly small semi-circle, probably smaller than you’d expect. I wanted this basic demo to work on all devices, small and large, in a wide variety of touchscreen form factors and resolutions (we are hoping to cover all 3,997). Another reason is the anatomy of the human hand: it is much less awkward for a person with large hands to make a small semi-circle gesture with their thumb than for a person with small hands to make a large gesture.

Complete Action Bar Replacement

C-Swipe is basically a complete replacement of the current action bar menu in Android, so you can use it anywhere you might currently use the action bar. As I describe in my upcoming book, Android Design Patterns: Interaction Solutions for Developers, particularly good candidates for the C-Swipe pattern today are experiences that call for a lights-out mode, with hidden Swiss Army knife-style navigation, such as for reading and browsing a magazine.
Another important point is that C-Swipe is almost infinitely extensible: It can be used to add more menu functions than can be seen on the screen, plus two or three levels of menus on top of the existing first-level menu scheme. To access overflow menu functions, the semi-circle inside the circular menu can be enabled as a separate button. As shown in figure 4 below, tapping that button spins the circle around, bringing up the overflow functions; tapping it again returns the menu to the original view. This allows the user to comfortably access 8 to 12 top-level functions.
Accessing the C-Swipe overflow menu.
Fig. 4: Accessing the C-Swipe overflow menu by tapping the central button. Larger view.
To add submenus, consider exploring both swipe-and-release and swipe only:
Two ways to access the C-Swipe submenu.
Fig. 5: Two ways to access the C-Swipe submenu. Larger view.
The top row shows swipe-and-release; tapping the “favorite” function in the open C-Swipe menu brings up a circular selection of stars. The user has to release their thumb from the screen to see the functions available in the submenu, and then tap the option they desire.
Swipe-and-hold (shown in the bottom row) works similarly; the user swipes and keeps their thumb on the screen. Upon sliding their thumb to the desired function (for example, “favorite”), the user would release their thumb from the screen. Then, the main menu would be replaced with the submenu.
The point is that the C-Swipe theme has many variations, and the submenu does not need to be semi-circular. It could be a long list of text and/or icons or a dedicated lightbox, as long as it comes up near where the main C-Swipe menu was invoked.

Why Use C-Swipe?

C-swipe has a number of important benefits:
  • Facilitates immersive experiences
    This highly immersive pattern keeps functionality hidden until needed. It opens up 100% of the screen on any of Android’s 3,997 device types to immersive experiences such as shopping, reading, movie viewing and virtual reality.
  • Minimizes arm strain
    C-Swipe is particularly suitable for large touch devices, such as the upcoming 15-, 17- and 21-inch touch tablets. Reaching the top or bottom action bars in Android 4’s existing navigation scheme would require large arm gestures, quickly leading to arm fatigue. By contrast, the C-Swipe menu appears wherever the hand is positioned on the screen and does not require large arm movements.
  • Obeys Fitts’ Law
    Fitts’ Law stipulates that the speed and ease of tapping a button correlates to the size of the target and the distance to it. Thus, tapping a small button on a large tablet is painfully slow and awkward. C-Swipe is unique because it creates navigation anywhere on the screen, and the menu always shows up exactly where the hand is positioned, so the movement needed to select an item is minimal. As a result, movements are more precise and natural.
  • Triggered uniquely
    C-Swipe uses a gesture that (as of the time of writing) is not used for anything else. Thus, it is not likely to be triggered accidentally, and closing it is as easy as tapping anywhere on the screen outside of the menu.
Note that the gesture is a “reverse C” when executed with the left hand. The enclosed source code and mini-app will work with either hand doing the gesture.

Other Applications

C-Swipe does not need to be activated near the edge. When the user tilts a large touchscreen in order to use it comfortably while standing, the C-Swipe navigation can be opened anywhere by making a semicircular swipe with the thumb. Usually, the user would first need to touch the screen with one of the other fingers, such as the index finger, to support the compact gesture.
C-Swipe is unique because it comes with its own “natural” animated transition. The menu simply spins out in a semicircular path, following the movement of the thumb as closely as possible.

Caution

C-Swipe is not easily discoverable. But its discoverability can be aided with an animated watermark or another gentle tutorial pattern. Stating something like, “Swipe with your thumb anywhere on the screen,” or animating a watermark several times in different places on the screen can help users discover the gesture:
Introducing C-Swipe with an animated watermark pattern.
Fig. 6: Introducing C-Swipe with an animated watermark pattern. Larger view.
Upon being discovered, the watermark can be permanently removed. C-Swipe is quickly learned, because it is familiar and convenient for the hand and thumb.
Some people believe that the drawback of a C swipe is that it is ergonomically complex and does not translate into anything “real” (like a scroll or a pan). Other designers prefer the larger gestures of Windows’ modern UI, where the entire arm transverses the screen from left to right and top to bottom. Still other designers prefer an alternative for large displays: a special multitouch gesture — for example, a five-finger tap or five-finger pinch.
I disagree.
While each of these alternatives to C-Swipe holds a great deal of promise, I find C-Swipe to be the most natural, authentic and economical of touch movements. It is also natural, almost like the user is scratching or grabbing to “dig” into the content on the screen. The swipe can be performed effortlessly with one hand, with the device in almost any position, during almost any typical activity on a mobile device. Much testing with a broad range of people is needed to confirm this.
However, one thing is clear: regardless of the gesture, being able to call up a contextual menu locally on demand is the right model for all kinds of touch devices — so my biggest caution would be not to ignore this important trend.

Source Code Explained

As you can imagine, this function is fairly complex, so this is just a cursory overview, highlighting the main points as you explore the enclosed source code (ZIP).
In order to build the app, you have to first record the custom C-Swipe gesture using the GestureBuilder delivered with the Android SDK. You can read about this detailed procedure in “Creating a Simple Gesture App With Android” by Micha Kops.
Then, in your CSwipeActivity class, you will need to load the custom C-Swipe gesture from the library:
// Load gestures library
        mGestureLib = GestureLibraries.fromRawResource(this, R.raw.gestures_cswipe);
        if (!mGestureLib.load()) {
            // Show toast if gestures library could not be loaded
            Toast.makeText(this, R.string.KMsgErrLoadingGestures, Toast.LENGTH_SHORT).show();
        }
Next, set up a listener to monitor for when the desired gesture is performed.
// Register gestures listener
        mGestureOverlayView.addOnGesturePerformedListener(new GestureOverlayView.OnGesturePerformedListener() {
            @Override
            public void onGesturePerformed(GestureOverlayView gestureOverlayView, Gesture gesture) {
                onGesture(gestureOverlayView, gesture);
            }
        });
When any gesture is performed, you can check whether it matches the C-Swipe gesture using the onGesture() method. We can check whether the gesture performed by the user matches C-Swipe by seeing whether its prediction score is higher than some predetermined value. In this simple demo, we’ve set a middle-of-the-road value of 3D. Experiment to find the right value. If it is too low, then simple swipes will trigger the function accidentally; if the threshold is too high, then activating the gesture will be too difficult. When the right gesture is detected, the app inflates the special circular menu and populates it with the predefined items.
if (prediction.score > 3D) {
                // Switch content from gesture overlay view to original content view
                mGestureOverlayView.removeView(mContentView);
                setContentView(mContentView);
// Inflate the CSwipe control view
                final View cSwipePopupContentView = getLayoutInflater().inflate(R.layout.view_cswipe, null);
                mCSwipe = (CSwipe) cSwipePopupContentView.findViewById(R.id.cswipe);
In our demo mini-app, two kinds of C-Swipes are possible: left and right orientation. This is checked by the following code, which then sets the orientation for the menu anchor.
// Check the orientation of the CSwipe control based on the selected gesture prediction
                final String predictionName = prediction.name;
                CSwipe.Anchor cSwipeAnchor = CSwipe.Anchor.RIGHT;
                if (predictionName.equals(GESTURE_CSWIPE_LEFT_MARGIN)) { cSwipeAnchor = CSwipe.Anchor.LEFT; }
                else if (predictionName.equals(GESTURE_CSWIPE_RIGHT_MARGIN)) { cSwipeAnchor = CSwipe.Anchor.RIGHT; }

                // Set the CSwipe control anchor according to the selected gesture prediction
                mCSwipe.setAnchor(cSwipeAnchor);
Set the menu as close as possible to the gesture anchor in order to maintain the illusion of a seamless menu launching directly from the gesture-bounding rectangle.
// Show the CSwipe control popup window as close as possible to the gesture bounding rectangle
                final RectF gestureBoundingRect = gesture.getBoundingBox();
                mCSwipePopupWindow.showAtLocation(mContentView, Gravity.NO_GRAVITY, (int) gestureBoundingRect.left, (int) gestureBoundingRect.top);
To launch the distinctive semi-circular menu defined by the outer and inner radius, instantiate the CSwipe class. You can find the complete CSwipe.java code in the Widget folder.
public CSwipe(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        final TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CSwipe);

        mInnerArcRadius = attributes.getDimensionPixelSize(R.styleable.CSwipe_innerArcRadius,
                (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_INNER_RADIUS_DP, getResources().getDisplayMetrics()));
        mOuterArcRadius = attributes.getDimensionPixelSize(R.styleable.CSwipe_outerArcRadius,
                (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, DEFAULT_OUTER_RADIUS_DP, getResources().getDisplayMetrics()));

Summary

I will leave it to you, readers, to polish the code for various enhancements: to improve the response time; to create a slick “swing out” opening transition; to tune the gesture threshold; and even to customize the gesture-detection algorithm over time to “learn,” thus ensuring the best fit for the device type and the owner’s hand size. For now, this demo app should give a good feel for the potential of C-Swipe navigation.

Goodbye, Zen Coding. Hello, Emmet!

Back in 2009, a new way of writing HTML and CSS code came to existence.This revolutionary plugin, called Zen Coding, has helped many developers through the years and has now reached a new level.
Emmet, previously known as Zen Coding, is the most productive and time-saving text-editor plugin you will ever see. By instantly expanding simple abbreviations into complex code snippets, Emmet can turn you into a more productive developer.
For those who prefer to watch instead of read, here is a summary of my favorite tricks.


How Does It Work?

Let’s face it: writing HTML code takes time, with all of those tags, attributes, quotes, braces, etc. Of course, most text editors have code completion, which helps a lot, but you still have to do a lot of typing. Emmet instantly expands simple abbreviations into complex code snippets.

HTML Abbreviations

Initializers

Getting started with a new HTML document takes less than a second now. Just type ! or html:5, hit “Tab,” and you’ll see an HTML5 doctype with a few tags to jumpstart your application.
Emmet Demonstration - Initializers
  • html:5 or ! for an HTML5 doctype
  • html:xt for an XHTML transitional doctype
  • html:4s for an HTML4 strict doctype

Easily Add Classes, IDs, Text and Attributes

Because Emmet’s syntax for describing elements is similar to CSS selectors, getting used to it is very easy. Try mixing an element’s name (e.g. p) with an identifier (e.g. p#description).
Emmet Demonstration - Classes and IDs
Also, you can combine classes and IDs. For example, p.bar#foo will output this:
<p class="bar" id="foo"></p>
Now let’s see how to define content and attributes for your HTML elements. Curly brackets are used for content. So, h1{foo} will produce this:
<h1>foo</h1>
And square brackets are used for attributes. So, a[href=#] will generate this:
<a href="#"></a>
Emmet Demonstration - Texts and Attributes

Nesting

By nesting abbreviations, you can build a whole page using just one line of code. First, the child operator, represented by >, allows you to nest elements. The sibling operator, represented by +, lets you place elements near each other, on the same level. Finally, the new climb-up operator, represented by ^, allows you to climb up one level in the tree.
Emmet Demonstration - Nesting operators

Grouping

To effectively take advantage of nesting without turning them into a confusing mess of operators, you’ll need to group some pieces of code. It’s like math — you just need to use parentheses around certain pieces. For example, (.foo>h1)+(.bar>h2) will output this:
<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>
Emmet Demonstration - Grouping

Implicit Tag Names

To declare a tag with a class, just type div.item, and then it will generate <div class="item"></div>.
In the past, you could omit the tag name for a div; so, you just had to type .item and it would generate <div class="item"></div>. Now Emmet is more intelligent. It looks at the parent tag name every time you expand the abbreviation with an implicit name. So, if you declare .item inside of a <ul>, it will generate <li class="item"></li> instead of <div class="item"></div>.
Emmet Demonstration - Implicit tag names
Here’s a list of all implicit tag names:
  • li for ul and ol
  • tr for table, tbody, thead and tfoot
  • td for tr
  • option for select and optgroup

Multiplication

You can define how many times an element should be outputted by using the * operator. So, ul>li*3 will produce:
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
Emmet Demonstration - Multiplication

Numbering

What about mixing the multiplication feature with some item numbering? Just place the $ operator in the element’s name, the attribute’s name or the attribute’s value to output the number of currently repeated elements. If you write ul>li.item$*3, it will output:
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>
Emmet Demonstration - Numbering

CSS Abbreviations

Values

Emmet is about more than just HTML elements. You can inject values directly into CSS abbreviations, too. Let’s say you want to define a width. Type w100, and it will generate:
width: 100px;
Emmet Demonstration - Values
Pixel is not the only unit available. Try running h10p+m5e, and it will output:
height: 10%;
margin: 5em;
Here’s a list with a few aliases:
  • p → %
  • e → em
  • x → ex

Extra Operator

You already know many intuitive abbreviations, such as @f, which produces:
@font-face {
  font-family:;
  src:url();
}
Some properties — such as background-image, border-radius, font, @font-face, text-outline, text-shadow — have some extra options that you can activate by using the + sign. For example, @f+ will output:
@font-face {
  font-family: 'FontName';
  src: url('FileName.eot');
  src: url('FileName.eot?#iefix') format('embedded-opentype'),
     url('FileName.woff') format('woff'),
     url('FileName.ttf') format('truetype'),
     url('FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;
}
Emmet Demonstration - Extra operator

Fuzzy Search

The CSS module uses fuzzy search to find unknown abbreviations. So, every time you enter an unknown abbreviation, Emmet will try to find the closest snippet definition. For example, ov:h and ov-h and ovh and oh will generate the same:
overflow: hidden;
Emmet Demonstration - Fuzzy Search

Vendor Prefixes

CSS3 is awesome, but those vendor prefixes are a real pain for all of us. Well, not anymore — Emmet has abbreviations for them, too. For example, the trs abbreviation will expand to:
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
Emmet Demonstration - Vendor Prefixes
You can also add prefixes to any kind of element. You just need to use the - prefix. So, -super-foo will expand to:
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;
What if you don’t want all of those prefixes? No problem. You can define exactly which browsers to support. For example, -wm-trf will output:
-webkit-transform: ;
-moz-transform: ;
transform: ;
  • w-webkit-
  • m-moz-
  • s-ms-
  • o-o-

Gradients

Speaking of annoying CSS3 features, we cannot forget gradients. Those long definitions with different notations can now be easily replaced with a concise, bulletproof abbreviation. Type lg(left, #fff 50%, #000), and the output will be:
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);
Emmet Demonstration - Gradients

Extras

Lorem Ipsum

Forget about those third-party services that generate “Lorem ipsum” text. Now you can do that right in your editor. Just use the lorem or lipsum abbreviations. You can specify how many words to generate. For instance, lorem10 will output:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.
Emmet Demonstration - Lorem Ipsum
Also, lorem can be chained to other elements. So, p*3>lorem5 will generate:
<p>Lorem ipsum dolor sit amet.</p>
<p>Voluptates esse aliquam asperiores sunt.</p>
<p>Fugiat eaque laudantium explicabo omnis!</p>

Customization

Emmet offers a wide range of tweaks that you can use to fine-tune your plugin experience. There are three files you can edit to do this:

And A Lot More!

This is just the beginning. Emmet has a lot of other cool features, such as encoding and decoding images to data:URL, updating image sizes and incrementing and decrementing numbers.
Go check out the new website, the awesome documentation and the handy cheat sheet!

Supported Editors

If you are wondering, “Will it work in my text editor?,” The answer is, “Oh yes, my friend!” A lot of editors are supported, and I hope you find yours in the list below.

And You?

What are your favorite tricks? Leave a comment below. Now it’s your turn to share your favorite tricks.

Navigation For Mega-Sites

For most websites, navigation is not particularly challenging. A primary navigation bar, supported by sub-navigation, is often enough.
Typically, sub-navigation displays the parent, siblings and children of the current page. A persistent primary navigation bar shows top-level pages, allowing users to move between sections.
However, there is one class of website for which this traditional form of navigation falls short. It is what I refer to as a “mega-site”.

What Is A Mega-Site?

A mega-site is typically owned by a large organization that encompasses a broad range of services or products. The organization also often supports a diverse user base.
Organizations with mega-sites include institutions such as the BBC, companies with diverse portfolios such as Microsoft, government bodies, higher-education institutions and large charities that run many campaigns, such as the World Wildlife Fund.
These websites:
  • are extremely large,
  • are many levels deep,
  • are made up of many micro-websites and subsections,
  • cater to many audiences,
  • have multiple entry points.
Websites of this size and complexity bring some unique navigational challenges.

The Challenges Of Navigation On Mega-Sites

At our company, we do a lot of work on mega-sites, and they can prove to be particularly challenging, especially when trying to use traditional navigation.

Traditional Navigation Cannot Support Depth

The deeper the website, the more that traditional navigation struggles. Navigation can comfortably accommodate three levels; beyond that, one of two things happens. Either the navigation expands to the point where more screen real estate is dedicated to navigation than to content (a problem made worse by the sheer number of pages on a mega-site), or higher pages in the information architecture no longer appear in the navigation.
In the latter case, if the user is deep within the website, they will lose the context of where they are because they are not seeing where the current page fits in the website’s structure.
Image showing navigation dominating page real estate
While traditional navigational approaches, combined with breadcrumbs, can scale to accommodate mega-sites, they do so at the cost of ever-increasing real estate. Larger version.
The latter problem can be partially mitigated by well-implemented breadcrumbs. However, this is not the only issue with traditional navigation.

Traditional Navigation Cannot Support Multiple Entry Points

Traditional navigation can confuse users who enter the website via a micro-site or subsection.
Take a student who is considering attending a university for post-graduate studies. This person is probably more interested in a particular faculty or school than in the institution as a whole. They could, therefore, very well enter the website at that level, rather than at the university’s home page.
Another example would be a single mother wanting to know about child benefits. They are more likely to arrive on the benefits subsite than on the government’s home page. In such situations, the user’s focus is on their current context (i.e. post-graduate studies or child benefits). They are not immediately interested in the broader mega-site.
Unfortunately, traditional primary and secondary navigation exposes the user to this broader context, whether they want it or not.
An example of a site with confusing navigational labels
Does a section labelled “Research” on a university’s page refer to the entire university or just the school being viewed? What about when the same label appears twice but goes to two separate places? Larger version.
To make matters worse, the current context can actually alter the user’s perception of the navigation items. For example, would our post-graduate student think that a link labelled “About us” is about the school in question or about the larger institution. In some extreme cases, you can even find the same navigation labels being used for both the current context and the broader institution (for example, information about the university and about the school might both be labelled “About us” on the same page).
How, then, can we solve the navigation problems of mega-sites?

Navigation Solutions

As with all things, there is no perfect solution. However, there are solutions that are a step forward from navigation better suited to small websites. The first of these solutions is the most radical.

Get Rid of Navigation Entirely

I first heard of this approach in Russ Weakley’s talk about doing away with traditional navigation back in 2006. It rejects the idea of imposing a navigational structure upon users, instead allowing them to find their own path through the website.
This is achieved by making each Web page a standalone document and tagging it with appropriate meta data. Users can then find pages through a combination of search and navigating by tags. Pulling in links to related documents based on the meta data associated with each page would also be possible.
This approach has several advantages:
  • It supports a website of limitless size.
  • It is ideally suited to users who come to the website from a deep link.
  • It allows for a much more dynamic relationship between pages and easily accommodates pages being added and removed.
Of course, it is not without its challenges. While individual sections of the website could still have a landing page (for example, section.acme.com), the business may well struggle with the idea of not having a specific website to manage. More importantly, this approach relies heavily on having well-tagged documents and powerful search functionality, both of which are hard to achieve with a mega-site.
That said, it is an option, and one that shouldn’t be quickly dismissed.

Split the Website Into Smaller Micro-Sites

Another approach is to break the mega-site into a number of smaller more manageable micro-sites. This is the approach adopted by the BBC.
Instead of treating its Web presence as a single entity, the BBC has broken it down into subsites, such as news, sports, TV, radio and so on. Each website has its own navigation and thus avoids the problems associated with mega-sites.
The way the BBC avoids a disjointed experience for users who move between micro-sites is to ensure consistency in top-level navigation and in the user interface.
BBC web presences
The BBC avoids being a mega-site by splitting its Web presence into a number of smaller websites, while maintaining consistency in navigation and design language. Larger version.
Although the BBC’s micro-sites do vary in appearance, they make use of the same primary navigation, and also have a consistent design language for things like typography, layout and modules. This language, defined on the BBC’s Global Experience Language (GEL) website, is consistent enough to ensure a stable user experience yet flexible enough to cater to different audiences and subject matter.
It is a fine line to walk. Make each micro-site too different and users will become confused by changes in the UI. Make them too similar and users will be thrown off upon finding that the website does not have a single navigational structure.

Use a Breadcrumb-Driven Approach

A third solution is the one adopted by Gov.uk. It does away with dedicated areas for navigation, and instead uses the page’s content to link to its children. It then uses breadcrumbs to help the user identify where they are within the navigational hierarchy and to move back up the tree when needed.
Gov.uk website
Gov.uk relies almost exclusively on breadcrumbs for navigation. Larger version.
The approach has many advantages. For a start, it minimizes the space dedicated to navigation, while at the same time allowing for much more detailed descriptions of each child. In that sense, it is the simplest, cleanest and easiest to understand of the approaches.
It also translates well to mobile devices, which account for 45% of Gov.uk’s Web traffic.
The prominent breadcrumbs make clear to the user where they are on the website, while in-page navigation to child pages makes the next step obvious. Most of all, the emphasis on content, rather than navigation, appeals to me the most.
Unfortunately, it does have its downsides.
By relying entirely on breadcrumbs and in-page links to children, the user has little context of their current position. They are unaware of the siblings of the current page and of the overall shape of the website (for example, they are unaware of the top-level sections).
This is not a problem if the user is trying to complete a specific task and the website has catered to that task by bringing all content related to it in a single place. However, when a user is in general research mode or when the content related to the task is spread across multiple pages, this approach can prove frustrating.
The frustration is caused by the breadcrumb navigation requiring the user to navigate up and down the website’s structure. There is no way to enable jumping between sections.
Fortunately, there is a hybrid approach, which uses breadcrumbs as the primary navigational tool, but augmented with more traditional navigation.

My Preferred Solution

My preferred solution is inspired by the navigational approach used by BBC Sports before GEL was introduced.
Instead of running them horizontally, the BBC flipped the traditional breadcrumbs vertically. At the end of each breadcrumb list, the current page also showed its children. When you reached the bottom of the tree, the navigation would continue to display the siblings of the current page, instead of its children.
Screenshot of the old BBC sports website
The old BBC Sports website used vertical breadcrumbs as the primary navigation tool. When the user entered a section, such as football, all other sports (i.e. the siblings) would be removed, focusing the user on the subject at hand. Larger version.
This approach grouped all navigation together in a single place, gave the user a clear sense of their location and reduced the space dedicated to navigation. Yet, it still suffered from the problems of Gov.uk.
When working on the University of Brighton, we proposed BBC Sports’ approach, but added one important thing. We suggested keeping a consistent top-level navigation bar. While this adds more navigation to the page, it gives the user an instant overview of the structure of the website. This enables users who require information from multiple sections (say, a prospective student researching courses as well as accommodation) to jump quickly between those sections.
In many cases, this is enough to create a simple yet powerful user experience. However, it does not address the need to be able to see the siblings of the current page.

Showing Siblings While Using Breadcrumb Navigation

So far, I have considered two possible solutions to this issue.
One works on the assumption that siblings often have a relationship with each other; they are part of the same story, if you will. On that basis, the simple addition of “next” and “previous” buttons (such as you find on many blogs) might be enough of a solution. Users could then move between siblings with the single click of a button.
An alternative approach would be to make each level of the breadcrumb navigation a flyout menu, thereby exposing the siblings of that level. This would enable the user to jump to any sibling on any level of the website and potentially do away with the need for a separate primary navigation bar.
An example of flyout breadcrumb navigation
By adding flyout menus to the vertical breadcrumb navigation, you give users quick access to any sibling on any level of the website. Larger version.
This could work whether you use vertical breadcrumb navigation or traditional horizontal breadcrumbs.
That said, I haven’t tested this approach, and some will have concerns about touch devices.

More Ideas Needed

As you can see, the issue of navigation on mega-sites is a thorny one, and there does not seem to be a single obvious solution. One of the primary reasons for writing this post is to open a discussion on the subject and hopefully encourage the exploration of some alternative approaches.
As a result, I would really appreciate your thoughts in the comments section and any examples of alternative navigational approaches you have found.

How To Create A Tab Widget In WordPress

In this tutorial, you’ll learn how to create the Tabber widget, which is very useful for when multiple widgets need to fit in a sidebar. It saves space and streamlines the appearance and functionality of your WordPress-powered website.
In the past, there were different methods of doing this, most of which were theme-dependent. As we’ll see in this tutorial, creating a tabbed widget that works on its own and with any theme is easily accomplished. So, let’s jump in and learn how to create our own Tabber widget, which we’ve made available for downloading at the end of this article.
create-tabber-widget-splash

Saving Sidebar Space

The main advantage of tabs is that you can fit more widgets into the sidebar. And tabs look good. The image below shows how much vertical space is taken up by three standard widgets (using the default Twenty Ten theme). The default layout is on the left, and our tabber widget is on the right:
tabber_example

Before We Start

A few things are useful to know. Because we are building a widget in this article, you might want to learn about WordPress’ Widgets API and how to create a basic widget:
Use these resources as needed while following the tutorial along.

The Basic Idea

The idea for this widget is simple: select a sidebar, and the Tabber widget will grab all of its widgets and display them as tabs. In the widget’s interface, you can select a sidebar, specify an extra CSS class and optionally apply your own styles. When enabled, the plugin will register an extra sidebar (which may be removed if you have other ways to add a sidebar). Then, using the same code, you can add more sidebars, and each of them can hold instances of the Tabber widget.
To control your widgets, Tabber uses idTabs for jQuery, created by Sean Catchpole, but you could always use another solution. Note that additional CSS is loaded to style the resulting widget.
Here is the basic HTML structure required to create tabs:
<ul>
  <li><a href="#widget-1">Widget one</a></li>
  <li><a href="#widget-2">Widget two</a></li>
<ul>
<div id="widget-1">
  Widget one's content
</div>
<div id="widget-2">
  Widget two's content
</div>
Unfortunately, you can’t get such a structure directly by using WordPress’ sidebar and widget rendering. Typically, WordPress’ widget structure looks like this:
<div id="widget-1">
  <h2>Widget one</h2>
  Widget one's content
</div>
<div id="widget-2">
  <h2>Widget two</h2>
  Widget two's content
</div>
So, the goal with Tabber is to transform any widget’s output into markup that can be used to display tabs. To complicate matters, different themes might register sidebars that do not use a <div> to hold a widget or use <h2> to show its title. For example, WordPress’ new default theme, Twenty Twelve, uses <aside> and <h3> tags for this. Other themes may use complicated markup that can’t be predicted or successfully transformed into the output needed for tabs.
The solution to this problem is to intercept the widget’s parameters before rendering, and then to restructure them into useful structures using JavaScript or jQuery for the tabbed output. More on that later.

Tabber Widget Loading

Now that we understand the goal, let’s look at the demo plugin. Our plugin contains a main PHP file, one JavaScript file and one CSS file. The PHP file contains the widget and loads the CSS and JavaScript, like so:
add_action('init', 'd4p_st_init');
add_action('widgets_init', 'd4p_st_widgets_init');

function d4p_st_init() {
    register_sidebar(array('name' => 'Tabber Example Sidebar', 'description' => 'Add widgets to this sidebar to use it from Tabber widget.'));

    if (!is_admin()) {
        $url = plugins_url('d4p-smashing-tabber');

        wp_enqueue_script('jquery');
        wp_enqueue_script('d4p_st_tabber', $url.'/tabber.js', array('jquery'));
        wp_enqueue_style('d4p_st_tabber', $url.'/tabber.css');
    }
}

function d4p_st_widgets_init() {
    register_widget('d4p_sr_tabber');
}
Here, the function d4p_st_init is run during WordPress’ init action. It will register one sidebar (line 5) and enqueue the jQuery, JavaScript and CSS files using the wp_enqueue_script and wp_enqueue_style functions (lines 10 to 12).
Then, the function d4p_st_widgets_init is called during WordPress’ widgets_init action. We register the widget on line 17.
Widget Interface
Widget interface.

The Main Tabber Widget Class

Tabber is a normal widget, and in this case it is located in the d4p_sr_tabber class.

Settings: Plugin Interface

The widget has two settings:
  • “sidebar”
    to hold the ID of the selected sidebar
  • “css”
    for extra CSS classes to style the Tabber widget
When selecting which sidebar to use, you must avoid using the sidebar that holds the Tabber widget. Otherwise, it will spin into endless recursion. To avoid this, before rendering the widget’s content, check whether the selected sidebar is the same as the parent sidebar. This can’t be prevented while the widget is set up, because the widget’s panel affords very little control over this.
Also, using sidebars that are not normally used is a good idea. To help with this, the plugin includes sample code to help you add an extra sidebar.
The form and update methods contained in the d4p_sr_tabber class are used to display the widget’s interface in the “Widgets” panel and to save its settings, and they are not that interesting. But it is worth taking a closer look at how to display the widget on the front end.

Main Display Method

Here is the main widget method:
public function widget($args, $instance) {
  add_filter('dynamic_sidebar_params', array(&$this, 'widget_sidebar_params'));

  extract($args, EXTR_SKIP);
  $this->id = $widget_id;

  echo $before_widget;
  if ($args['id'] != $instance['sidebar']) {
    echo '<div id="'.$widget_id.'">';
    echo '<ul></ul>';
    dynamic_sidebar($instance["sidebar"]);
    echo '</div>';
  } else {
    echo 'Tabber widget is not properly configured.';
  }
  echo $after_widget;

  remove_filter('dynamic_sidebar_params', array(&$this, 'widget_sidebar_params'));
}
In this code, line 2 adds a filter that modifies the widget’s rendering parameters before they are processed. With this filter, all widgets rendered after that point will have their parameters modified as needed for successful transformation to tabbed form. And that will be done for the widgets in the selected sidebar on line 11, using the dynamic_sidebar function.
This function requires the name of the sidebar, and it will display all widgets in it. Line 9 contains the check mentioned before, to prevent recursion when displaying sidebar content if the selected sidebar is the same as the parent sidebar.
Lastly, the filter is removed, and any widgets belonging to other sidebars are displayed normally, without modification.

Widget Modification

To prepare for the transformation done with JavaScript, the tabber widget includes the d4p-tabber-widget class, which contains an empty <ul> tag.
The filter used to modify the widget’s parameters looks like this:
public function widget_sidebar_params($params) {
  $params[0]['before_widget'] = '<div id="'.$params[0]['widget_id'].'">';
  $params[0]['after_widget'] = '</div>';
  $params[0]['before_title'] = '<a href="#">';
  $params[0]['after_title'] = '</a>';

  return $params;}
Depending on how the sidebar is registered, this code will change the rendering parameters to a format that is close to the format needed for tabs. But JavaScript is still needed to move the widget’s title into the <ul> tag for the control tabs. After this filter, the widget’s output will look like this:
<div id="widget-1">
  <a href="#">Widget one</a>
  Widget one's content
</div>

JavaScript For Widget Transformation

Once the widget’s presentation is modified, one thing remains: to complete the transformation and get the titles from the widgets and turn them into tabs:
jQuery(document).ready(function(){
  jQuery(".d4p-tabber-widget").each(function(){
  var ul = jQuery(this).find("ul.d4p-tabber-header");

  jQuery(this).children("div.d4p-st-tab").each(function() {
    var widget = jQuery(this).attr("id");
    jQuery(this).find('a.d4p-st-title').attr("href", "#" + widget).wrap('<li></li>').parent().detach().appendTo(ul);
  });

  jQuery(this).idTabs();
  });
});
This code uses jQuery to get all of the Tabber widgets based on the .d4p-tabber-widget CSS class, and each one gets the element (where the tabs will go):
  • With line 5, we find all individual widgets belonging to the Tabber widget.
  • On line 6, we get the widget’s ID needed for the tab to connect it to the widget’s content.
  • On line 7, we find the title <a> element, set its href attribute to that of the widget’s ID, wrap it in a </li> element, remove it from its current location, and move it into the tab’s <ul> element.
  • After this, the <div> will hold only its content.
Final Tabber Example
Final Tabber example.
Finally, when all this is done, we enable idTabs to activate the tabs control. And with the default styling loaded from the tabber.css file, you can see how Tabber looks with three widgets in it (see screenshot above). Feel free to experiment and adjust the styling to your theme.

How To Install The Tabber Plugin

As with any other plugin, unpack it, upload it to WordPress’ plugins folder, and activate it from the plugins panel. When you go to the “Widgets” panel, you will see an additional sidebar, “Tabber Example Sidebar,” at the end on the right. And “Available Widgets” will show one more widget, “D4P Smashing Tabber.”
Add this new widget to the “Main Sidebar.” From the “Sidebar” widget drop-down menu, select “Tabber Example Sidebar,” and save the widget. Now, open the “Tabber Example Sidebar” and add the widgets you want to be displayed as tabs. You can add as many widgets as you want, but pay attention because if you add too many, the tab’s control will break to two or more lines, and it will not look pretty. Starting with two or three widgets is best.

Conclusion

Creating one widget to display several other widgets as a tab isn’t very difficult, as you can see. The trick is in adjusting the widgets’ output to a format that can be transformed into tabs, and then using JavaScript to display them. We’ve explored just one possible transformation method; you can always experiment with ways to rearrange widget elements.
We used idTabs here, but there are many methods of displaying tabs, and not all of them require JavaScript:
I prefer using a jQuery-based solution, and idTabs is very easy to use and easy to style and it works in all browsers. Check out other solutions, and see what extra features they offer to enhance your own tabbed widgets.