Archive | HTML5 RSS feed for this section

User Experience Videos That Are Worth Your Time (Re-blog)

9 Jan UX

User Experience Videos That Are Worth Your Time (Re-Blog)

Get a refresher course list (or learn new) – these are a great place to focus on UX-User Experience development..

Rub Link: User Experience Videos That Are Worth Your Time

Get a refresher course list (or learn new) – these are a great place to focus on UX-User Experience development..
presenting here phenomenal videos and related resources on the topic of user experience (UX) by different presenters at different events. We have focused on current content but have included some older videos that are still relevant. It will take you more than 16 hours to watch all of these videos. So, make some popcorn, turn off the lights and enjoy.


BONUS! RUB PIC FOR> 32 UX Posts to Hit Your Conversion Targets

BONUS LINK: 32 UX Posts to Hit Your Conversion Targets


User Design for Emotional “Flow” (SlideShow)

9 Sep

Design Tips | Design for Emotion and Flow (Design Slides)

“I believe Mihaly Csikszentmihalyi’s concept of “Flow” in order to create an emotional feeling within the End User is very important within design.

I like to design &/or lead my design team always keeping mindful to funnel the End User’s ‘psychological state’ or ’emotional flow’ within all online branding.

Often leading to the seamless emotional state that will also charge the EndUser with an identifiable positive energy feeling worth embracing AND that urges for return.

Many Wise designers and Information Architects are now embracing this view with me when it comes to FLOW and of psychological state pushed by design and it’s importance in the design process..” – BlotterMonkey

Designing with users in mind can be a tricky undertaking. Not only does it require of a sound understanding of who your users are, but the actual act of translating what you know about them into a well-designed target strategy is not always an obvious or easy path.

So along with the slides above here is some help getting started with the FLOW formula:

What the hell is Adobe CQ5?

19 Jan

What is Adobe CQ5 & how can it help me?

OK here is the quick skinny on Adobe CQ5 and how web content management system applications may be able to help you.

Adobe Communique 5, or CQ5, is a large-scale Web Content Management System or (WCM or WCMS) that is currently available from Adobe Systems (the makers of the well known Photoshop, Flash, Illustrator & the new Edge).

CQ was originally developed by Swiss company Day Software, the CQ platform changed hands when Adobe acquired Day in October 2010…and you will still some job requirements or boss shopping lists asking for experience in ‘Day CQ’ , if not the latest Adobe CQ5.

Adobe CQ5 is geared specifically for large companies and corporations with substantial -and often global- infrastructures. It combines web content management, digital asset management, and the social collaboration to deliver a solution that allows large companies to manage incredible amounts of information, multiple internal and external websites, a myriad of media assets, and detailed workflow.

Several of CQ5′s key benefits include:

  • Significant control over brand presentation
  • The reuse of templates and components while maintaining a unique look & feel(one of my favorites when doing  WCM myself)
  • Substantial reduction in organizational training costs
  • Adobe also contributes significant resources to the open source community, with over 12 Apache and 25 open source projects currently underway.
  • Some notable companies that use the Adobe CQ5 platform include General Motors, McDonald’s, Kodak, Volkswagen, Audi, and NBC Universal.

Here is a video with some quick answers about Adobe CQ5:

more info & sites about CQ5:

BlotterMonkey Bonus Whitepaper!

The 21st-century CMO: How digital marketing is driving organization transformation

Taking full ownership of customer experience management

“Today’s 21st-century CMOs are pursuing digital marketing across a large number of channels simultaneously.
As they do, they leverage the capabilities inherent in next-generation web content management (WCM)
This paper highlights the advances in closed-loop marketing that enable measurement and optimization of
digital marketing efforts. It also describes the challenges that CMOs face when pursuing digital marketing
strategies and how next-generation WCM solutions help CMOs overcome those challenges.

CQ5 Web Content Management from Adobe White Paper: 12112_Day_21st_Century_WP_ue_v6.pdf

Please leave your tips and more in the comments below,

Feel free to contact me if you would like to personally learn more about how WCM & I can help you & your content management.
Don’t forget to find me & connect starting with &

Can I Use HTML5 Now?

21 Sep

Using HTML5 Now

One of the fundamental principles underlying HTML5 is
that it is backwards compatible. With only a small number
of exceptions—such as <font> tags and frames—valid code
written according to the HTML 4.01 or XHTML 1.0 specifications
is also valid HTML5. Simply replace your existing
DOCTYPE declaration with the shorter HTML5 one:


That’s all there is to it! One of the reasons this “DOCTYPE” was
chosen is that it’s the shortest string that reliably prevents
browsers from rendering pages in quirks mode.
Of course, HTML5 introduces many new tags and attributes,
but there’s no obligation to use them unless you
need to—just as you probably never used every tag and
attribute in HTML 4 You also need to be aware of the
capabilities of the browsers your target audience is likely to
use. This is a constantly changing scenario, so it’s impossible
to lay down hard-and-fast rules in a book. In addition
to your own testing, a website like  is
more likely to provide up-to-date information on what you
can use and what’s best to avoid.

Much of the discussion about HTML5 has focused on the
new semantic elements, such as <section>, <header>, <footer>,
and <nav>. The idea behind the introduction of these tags
is to give page markup greater meaning. Up to now, the
only way of grouping related elements on a page has been
with <div> tags. On its own, a <div> has no meaning, so
it’s common to indicate its role through an ID or class.
Rather than using <div id=”nav”>, it’s more logical (and
less code) to use <nav>—as long as your target browser supports
the new tag.

Figure 1.0 shows the level of support for HTML5 semantic
elements as reported by in April 2011. Light
green shows full support; darker green shows partial support;
and pink shows no support. ( Figure 1.0 – )

 Figure 1.0 Support for HTML5 elements depends on the browser version.

If you’re in the fortunate position of being able to target
only the most recent browsers, you can forge ahead immediately
with the new semantic tags. (Semantic Notepad) However, most designers
need to cater to IE 6–8, which still represent a significant
proportion of the browser market and are likely to do so
for some time, even though I personally have never meet anyone
using such old browsers the numbers are scary enough.
*Browser Statistics Link  & *Browser Trends Link  & *How the Disabled use the web Link

Figure 2.0: Shows the the blog structure using the HTML5 ‘semantic’ markup. and a list of the new tags can be found here:

HTML5 Glog Demo 1 (The blog structure using HTML5 semantic markup)

Figure 2 : The blog structure using HTML5 semantic markup

Supporting HTML5 Semantic Tags

Dealing with browsers listed in Figure 1.0 that offer only
partial support for HTML5 semantic tags is easy. All that’s
needed is to add the following rule to your style sheet:

article, aside, hgroup, header, footer, figure,

figcaption, nav, section {

display: block;


You can apply other styles to these elements in exactly the
same way as you would to paragraphs or other HTML elements.
For example, the following rule applies the same
font family and size to both <p> and <article> elements:

article, p {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;


Unfortunately, IE 8 and earlier require an extra jolt of
encouragement to recognize the new HTML5 tags. You
need to use JavaScript to create a dummy element for each
type of semantic tag you want to use. For example, if you
want to use the <header>, <footer>, and <nav> tags, you
need to add the following in the <head> of each page:






Or as my Favorite tip to use:
Alternatively, you can load a tiny script from the Google
content distribution network (CDN) by adding the following
just before the closing </head> tag:

<!–[if lt IE 9]>

<script src=”

Ê trunk/html5.js”></script>


This is a 2 KB file of JavaScript wizardry devised by Remy Sharp that forces earlier versions
of IE to recognize the new HTML5 tags and apply CSS to
them. It creates dummy elements for all semantic tags,
saving you the bother of using createElement() for each
one. Although the file is small enough to host on your own
site, the advantage of using Google’s CDN is that the file
most likely will already be in the user’s browser cache after visiting
other sites, so it doesn’t need to be downloaded again, and again. Get it here & learn more)

( Read more about why to use Google for your jQuery Scripts & Google’s AJAX Libraries CDN here.  and learn more about jQuery here)

The predefined HTML5 CSS layouts in Dreamweaver
CS5.5 (File > New > Blank Document) use Remy Sharp’s
script in combination with a style rule to display the semantic
tags as block-level elements, ensuring almost universal
support for them in the future.

But What if they have JavaScript disabled?

Well now here is the problem: It’s not 100% foolproof.
If JavaScript is disabled in the browser, like IE leaves the
HTML5 tags completely unstyled. This wouldn’t be such
a big problem if the whole page was unstyled and would revert to the original unstyled,
but you end up with a crazy ugly mix of styled and unstyled elements!

In HTML5 Now (New Riders, 2010), Tantek Çelik  advocates a  smart approach.
He recommends wrapping HTML5 semantic tags in a

<div> and assigning it a class named after the tag like this:

<div class=”header”>


<!– header content goes here –>



This is undoubtedly the safest way to implement HTML5
semantic tags in a website, but it duplicates markup needlessly.
Although IE 9, Firefox 6, and other modern browsers support
the HTML5 tags.
Websites tend to need to be redesigned on
a regular basis, so there’s a strong argument in favor of
waiting for broader support when using for semantic tags.

But as we focus on all the backward compatibility we sometimes forget the point, and though it’s sometimes overlooked and is showing more & more important in our work as both designer & developer today, and that is ‘Forward Compatibility’.
Keeping that in mind, you will decide the balance of your projects needs individually for now.  The variables of each project themselves are the true determining factor in whether or not you are ready to start using HTML5 fully and using HTML5’s semantic tags and setting yourself up for multi-device-online-compatibility or not.

Sometimes even finding, (usually during your larger projects) that HTML5 can even solve some problems that only Flash could once answer. So it really is up to you the individual and the problems you want to solve,  your users, and your size of the project.

But I do recommend getting started on learning how to use HTML5 /CSS3 and taking advantage of the gifts they brings us even now, and I think having to tweak a few copy & paste backwards compatibility hacks until everyone is caught up is a small price to pay to get started…

I hope you enjoyed this topic as much as I did. I cant help but run a search on the subject and see it is a big hot topic right now. There is no shortage of opinions on the subject, both grumpy “I fear change” to “it will solve everything” attitudes, so please go keep your mind open to learning new things and enjoy the journey as you find what works for you.

-Robert (BlotterMonkey)

end. (updated)