Author: Jonathan Romine

How UX Designers Can Elevate Their Craft by Learning Tailwind CSS

Posted on by Jonathan Romine

In the ever-evolving landscape of web design and development, the boundaries between design and implementation are increasingly blurred. One of the most significant steps a UX designer can take to bridge this gap is learning to code UI elements, particularly with the use of Tailwind CSS. This modern utility-first CSS framework has revolutionized the way designers and developers approach website styling, offering a more integrated and efficient way to bring designs to life.

The Importance of Bridging Design and Development

Traditionally, UX designers have focused on creating the visual and functional blueprint of digital products, while developers have been responsible for turning these blueprints into tangible interfaces. However, the rise of frameworks like Tailwind CSS is empowering designers to take an active role in the implementation phase. This synergy not only streamlines the design-to-development process but also ensures that the final product aligns more closely with the original vision.

Tailwind CSS: A Gateway to Implementing Design

Tailwind CSS stands out for its utility-first approach, which provides designers with a set of low-level utility classes to build custom designs directly in the markup. This approach is highly beneficial for UX designers for several reasons:

  1. Direct Translation of Design to Code: Tailwind CSS’s utility classes mirror many of the properties and values designers use in design tools. This direct correlation makes it easier for designers to translate their vision into code.
  2. Enhanced Collaboration with Developers: By understanding the constraints and possibilities of HTML and CSS, designers can make more informed decisions. This knowledge facilitates better communication with developers, leading to more effective collaboration.
  3. Rapid Prototyping and Iteration: Tailwind CSS enables designers to quickly prototype and iterate designs in the browser. This immediate feedback loop allows for more agile design adjustments and refinements.
  4. Consistency and Scalability: Using Tailwind CSS helps maintain consistency across a project. Designers can reuse utility classes, ensuring a uniform look and feel while also making global changes more manageable.

Learning Curve and Resources

While learning to code might seem daunting for designers, Tailwind CSS’s intuitive syntax and abundant resources make the learning process more accessible. There are numerous tutorials, documentation, and community forums available to help designers get started. Additionally, integrating Tailwind CSS with design tools like Figma or Sketch can further streamline the design-to-code workflow.

The Future of UX Design

The role of UX designers is no longer confined to conceptualization and visual design. By embracing tools like Tailwind CSS, designers can extend their influence into the realm of implementation, ensuring that their visions are realized as intended. This skillset not only enhances a designer’s capabilities but also adds immense value to any design and development team.

In conclusion, the ability to code UI elements using frameworks like Tailwind CSS is becoming an essential skill for UX designers. It bridges the gap between design and development, fosters better collaboration, and ensures that designs are effectively and accurately brought to life. As the digital landscape continues to evolve, designers who embrace this integration of design and development will find themselves at the forefront of creating compelling, cohesive, and functional digital experiences.

UX Iteration in design process

Posted on by Jonathan Romine

The principle of iteration is firmly grounded in the concept of “continuous improvement,” a practice that has proven its effectiveness in various industries. In the realm of UX design, this approach entails an ongoing pursuit of superior solutions and an ideal user experience. Employing an iterative process offers several advantages:

  1. Responsiveness to User Needs: Designers can tailor their creations to better align with user expectations and requirements by analyzing user behavior through observational studies and feedback.
  2. Risk Mitigation: Iterating on a design minimizes the risk of launching an unsuccessful product. The iterative approach enables the early detection and rectification of flaws in the design.
  3. Gradual Enhancement: Building a product takes time, and instead of pursuing grandiose projects or massive overhauls, iteration allows for gradual improvements. This facilitates smoother user adaptation to changes and enables designers to refine design details.
  4. Assumption Validation: Designers can validate or challenge their assumptions about user behavior through testing and iteration, leading to more informed design decisions and an improved UX.
  5. Optimized User Experience: Embracing iteration ensures that your product continually evolves to meet the evolving needs and expectations of users, resulting in an optimized UX (Martin, 2011).

An effective UX Design process

Now that we know why an iterative process is important, let’s dive into the key elements that collectively contribute to creating a user-centered and impactful experience.

Iterative UX Design Process: A Path to Continuous Improvement

In the realm of UX design, the iterative approach is a powerful methodology that continuously refines the user experience (UX). Let’s explore the key stages of this iterative process, where each step builds upon the last, ultimately leading to a UX that users love.

1. UX Research and Discovery

The journey begins with comprehensive UX research. Delve deep into user behaviors, needs, pain points, and challenges.
Utilize diverse research methods, from surveys and interviews to ethnography, to gain a holistic understanding of your target audience.
Investigate the user’s context—whether they’re on the move or stationary—because context shapes design decisions.

2. Ideation and Conceptualization

Armed with research findings, embark on a collaborative brainstorming session with your design team.
Transform ideas into rough sketches, quick mockups, or paper prototypes to visualize and explore their potential.

3. Prototyping and Testing

Move forward by creating interactive prototypes, allowing users to engage with your design.
Test these prototypes with real users to uncover usability issues, collect valuable feedback, and refine the user flow. Usability testing is a key tool in this phase.

4. Design Refinement and Iteration

The iterative engine powers up as you refine your prototypes based on user feedback and insights.
Prioritize enhancing both the user experience (UX) and the user interface (UI) while tackling usability challenges.
Maintain a continuous cycle of iteration to ensure that your design remains aligned with ever-evolving user needs and expectations.

5. Collaborative Development and Implementation

As your design moves into development, stay actively engaged to ensure your design vision becomes a reality.
Equip developers with design specifications, assets, and guidelines to maintain consistency during the development process.
Foster open communication among all stakeholders—designers, developers, and beyond—to facilitate a seamless implementation journey.

Implementing Continuous UX Improvement

The heart of this iterative approach lies in its commitment to ongoing enhancement. Here’s how to infuse continuous improvement into your UX design process:

1. Ongoing Feedback Loops

Establish feedback mechanisms that allow users to contribute insights at various design stages, or even during product use. Options include satisfaction surveys, NPS scores, or dedicated ideas portals.
Build user communities on platforms like Slack, Discord, or MS Teams to facilitate regular feedback, user interviews, and testing sessions.

2. Data-Driven Insights

Leverage analytics and data tracking to continuously gather insights into user behavior and engagement patterns.
Analyze this data to identify areas where users encounter issues, get stuck, drop off, or become frustrated, guiding your ongoing improvement efforts.

3. Regular UX Design Reviews

Conduct frequent design reviews with cross-functional teams and stakeholders. These reviews can encompass design sprint reviews, design critiques, and comprehensive design evaluations.
Encourage open, constructive discussions to identify opportunities for enhancement and uncover potential challenges or research needs.

4. Continuous User Testing

Embrace testing as a constant companion throughout the design process. Include validation testing to assess usability and experimentation testing (e.g., A/B testing) to compare design variations.
Focus on making small, impactful improvements that can swiftly enhance the user experience.

5. Relentless Iteration and Refinement

Cultivate an iterative mindset, ready to refine designs based on user feedback, developer insights, and stakeholder input.
Stay attuned to industry trends and emerging technologies, seeking opportunities for innovation within your designs.

Incorporating continuous improvement into your UX design process requires dedication, an open approach, and an unwavering focus on the user. These practices create an environment where the UX design process evolves dynamically, consistently delivering value to both users and the business.

In Conclusion

Achieving excellence in UX design is an ongoing journey, and the iterative approach paves the way for continuous improvement. Through research, ideation, prototyping, refinement, and collaborative development, you establish a solid foundation for iterative UX design.
Continuous improvement extends beyond the initial product launch, adapting to changing technology and evolving user preferences. The UX design process thrives on dedication to refinement, ensuring designs remain relevant and user-centric.

What? Rem Units

Posted on by Jonathan Romine

You’re probably already familiar with em units – they’ve been a common feature of CSS for the past decade – but a crash course: elements specified using em units are sized relative to the font-size of their parent element. For example, if a paragraph has a specified font-size
of 2em, and the div it’s inside of has a font-size of 10px, then the effective font-size of the paragraph is 10px × 2em, which is 20px.

.parent { font-size: 10px; }
.parent p.child { font-size: 2em; /* outputs to 20px */ }

“Rem” stands for “root em”. Similar to em units, they calculate size based on an ancestor element’s font-size , except rem units always calculate against the html/root element’s base size. So if the html element has a font-size of 16px, then a paragraph with font-size of 2rem will always be 32px, regardless of the its parent div or any other element.

html { font-size: 16px; } 
.parent { font-size: 10px; } 
.parent p.child { font-size: 2rem; /* relative to html - outputs to 32px */ }

jQuery Cycle Banner Slider

Posted on by Jonathan Romine

Here you go, just a quick tip for anyone out there that needs a quick slider. Just download the following Lastest JQuery and Lastest Cycle


body{background:#666;}

#wrapper{		
	margin:0 auto;
	display:block;
	width:600px;
	padding:0;
		
	}
.slide-cover{
	position:relative;
	width:500px;
	}
	#slider{
	margin:150px 0px;
	padding:0;
	list-style:none;
	width:500px;
	height:auto;
	
	  -moz-box-shadow:    0px 0px 20px 0px #000;
	  -webkit-box-shadow: 0px 0px 20px 0px #000;
	  box-shadow:         0px 0px 20px 0px #000;
	}
	#slider li{
	margin:0;
	padding:0;
	list-style:none;
	width:500px;
	height:auto;
	}
	/* Styles Nav */
	#nav-slider{
	position:absolute;
	top:60px;
	padding:0;		
	width:500px;
	z-index:9999;
	}
	#nav-slider li{	
	position:absolute;
	list-style:none;
	width:50px;
	height:50px;
	background: url(arrow.png) no-repeat;
	}
	#nav-slider li.next{		
	right:0;
	background-position:top right;
	}
	#nav-slider li.next:hover {background-position:right bottom;}
	#nav-slider li.prev {
	left:0;
	background-position:top left;
	}
	#nav-slider li.prev:hover {background-position:left bottom;}


$(document).ready(function() {
    $('#slider').cycle({
        fx: 'scrollHorz',
        timeout:    4000,
        speed:      800,
        next: '#nav-slider .next',
        prev: '#nav-slider .prev',
        height: 200,
        pause: 1
    });
});


<div id="wrapper">

<section class="slide-cover">
   <ul id="slider">
      <li><img src="1.jpg"/></li>
      <li><img src="2.jpg"/></li>
      <li><img src="3.jpg"/></li>
   </ul>
   <ul id="nav-slider">
      <li class="next"></li>
      <li class="prev"></li>
   </ul>
</section>

</div>

jQuery Sticky Menu

Posted on by Jonathan Romine 

	<!DOCTYPE html>
	<html>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easing.1.2.js" type="text/javascript"></script>
	

	<style>
	html,body{margin:0;padding:0;}
	#wrapper{
	  width:1000px;
	  margin:0 auto;
	  padding:0;
	}
	.content{
	  width:1000px;
	  margin:0;
	  min-height:800px;
	  height:auto;
	  padding:80px 0 0 0;
	}
	#sticky-menu {
	  background:#f2f2f2;
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), 
          color-stop(40%, #f2f2f2), color-stop(100%, #f2f2f2));   
          background: -moz-linear-gradient(top, #ffffff, #f2f2f2, #f2f2f2);   
         line-height: 120px;   
         text-align: center;   
         margin: 0 auto;  
         padding: 0;   
         z-index:1; } 
#sticky-menu .sub-nav {   padding: 0;   width:1000px;   margin: 0 auto;   height: 80px; } #sticky-menu ul {   float:right;   padding: 0;   width:auto;   margin: 0 auto;   height: 80px; } #sticky-menu ul li {   list-style-type: none;   display: inline;   float:left;   border-left:solid 1px #b2b2b2;   height: 80px; } #sticky-menu ul li.last-child {   border-right:solid 1px #b2b2b2; } 
#sticky-menu ul li {   display:block;   height: 80px;   background: url(images/icon-sticky-on.png) no-repeat center top;   -webkit-transition-property: color, background;   -webkit-transition-duration: 0.5s, 0.5s; } 
#sticky-menu ul li:hover , #sticky-menu ul li:active , #sticky-menu ul li.selected{   background:#f2f2f2;   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f2f2), color-stop(40%, #ffffff), color-stop(100%, #ffffff));   background: -moz-linear-gradient(top, #f2f2f2, #ffffff, #fffffff);   background: url(images/icon-sticky.png) no-repeat center top; } #sticky-menu ul li a{   display:block;   text-align:center;   text-decoration: none;   text-shadow: 1px 1px 1px #fff;   padding:0 30px 0 30px;   font-size:16px;   height: 80px;   width:auto;   font-size:16px; } .default {   width: 100%;   height: 80px;   border-bottom: solid 1px #b2b2b2; } .fixed {   position: fixed;   top: -5px;   left: 0;   z-index:1;   width: 100%;   border-bottom: solid 1px #b2b2b2;   box-shadow: 0 0 5px #222;   -webkit-box-shadow: 0 0 5px #222;   -moz-box-shadow: 0 0 5px #222; } </style></ul>


	 <div id="sticky-menu" class="default">
	  <nav class="sub-nav">
	  <ul>
	    <li><a href="#first">First</a></li>
	    <li><a href="#second">Second</a></li>
	    <li><a href="#third">Third</a></li>
	    <li><a href="#forth">Forth</a></li>
	    <li class="last-child"><a href="#top">top</a></li>
	  </ul>
	  </nav>
	 </div>
	 <div id="wrapper">
	  <section id="first" class="content"><h1>First</h1></section>
	  <section id="second" class="content"><h1>Second</h1></section>
	  <section id="third" class="content"><h1>Third</h1></section>
	  <section id="forth" class="content"><h1>Forth</h1></section>
	 </div>
	

	<script>
//Go Sticky

$(function() {
	var sticky_navigation_offset_top = $('#sticky-menu').offset().top;	
	var sticky_navigation = function(){
		var scroll_top = $(window).scrollTop(); 
		
		if (scroll_top > sticky_navigation_offset_top) { 
			$('#sticky-menu').css({ 'position': 'fixed', 'top':0, 'left':0 });
		} else {
			$('#sticky-menu').css({ 'position': 'relative' }); 
		}   
	};	
	sticky_navigation();
	$(window).scroll(function() {
		 sticky_navigation();
	});	
});

//scrollNav

(function($){
$.scrollNav = function(el, options){

	var base = this;
	base.$el = $(el);

	base.$el.data("scrollNav", base);

	base.win = window;
	base.$win = $(base.win);
	base.$doc = $(document);

	var scrollElement = 'html, body';
	$('html, body').each(function(){
		var initScrollTop = $(this).attr('scrollTop');
		$(this).attr('scrollTop', initScrollTop + 1);
		if ($(this).attr('scrollTop') === initScrollTop + 1) {
			scrollElement = this.nodeName.toLowerCase();
			$(this).attr('scrollTop', initScrollTop);
			return false;
		}
	});
	base.$body = $(scrollElement);

	base.init = function(){
		base.options = $.extend({},$.scrollNav.defaultOptions, options);
		base.content = $('.' + base.options.contentClass);
		base.leftMargin = parseInt( base.content.css('margin-left'), 10);
		base.rightMargin = parseInt( base.content.css('margin-right'), 10);

		if (!$.isFunction($.easing[base.options.easing[0]])) { base.options.easing = ['swing', 'swing']; }

		base.$body.bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){
			if ( e.which > 0 || e.type === 'mousedown' || e.type === 'mousewheel' ){
				base.$body.stop();
			}
		});

		var links = base.options.selectedAppliedTo + (base.options.selectedAppliedTo === base.options.link ? '' : ' ' + base.options.link);
		base.$el.find(links)

			.add( $('.' + base.options.contentLinks) )
			.click(function(){

				var att = (this.tagName === "A") ? 'href' : base.options.targetAttr;
				base.animate($(this).attr(att));
				return false;
			});
		base.$win
			.scroll(function(){ base.findLocation(); })
			.resize(function(){ base.findLocation(); });
	};

	base.animate = function(sel){
		if (sel !== '#' && $(sel).length) { 
			var $sel = $(sel).eq(0).closest('.' + base.options.contentClass);
			base.$body.stop().animate({
				scrollLeft : Math.min( $sel.offset().left, base.$doc.width() - base.$win.width() ) - base.leftMargin,
				scrollTop  : Math.min( $sel.offset().top, base.$doc.height() - base.$win.height() )
			},{
				queue         : false,
				duration      : base.options.animationTime,
				specialEasing : {
					scrollLeft  : base.options.easing[0] || 'swing',
					scrollTop   : base.options.easing[1] || base.options.easing[0] || 'swing'
				},
				complete      : function(){
					if (base.options.useHash) { base.win.location.hash = $sel[0].id; }
				}
			});
		}
	};
	base.findLocation = function(){
		var tar, locLeft, locTop, sel, elBottom, elHeight, elWidth, elRight,
		winWidth = base.$win.width(),
		winLeft = base.$win.scrollLeft(),
		winTop = base.$win.scrollTop(),
		winRight = winLeft + winWidth,
		winBottom = winTop + base.$win.height(),
		docHeight = base.$doc.height(),
		el = base.$el.find(base.options.selectedAppliedTo).removeClass(base.options.inViewClass);
		if (base.options.fitContent) {
			base.content.width( winWidth - base.leftMargin - base.rightMargin );
		}
		base.$el.find(base.options.link).each(function(i){
			sel = $(this).attr(base.options.targetAttr);
			tar = (sel === "#" || sel.length <= 1) ? '' : $(sel);
			if (tar.length) {
				locTop = Math.ceil(tar.offset().top);
				locLeft = Math.ceil(tar.offset().left);
				elHeight = tar.outerHeight();
				elBottom = locTop + elHeight + base.options.bottomMargin;
				elWidth = tar.outerWidth();
				elRight = locLeft + elWidth;
				if ( locTop < winBottom && ( locTop + elHeight - base.options.bottomMargin > winTop || elBottom > winBottom ) &&
				locLeft < winRight && ( locLeft + elWidth - base.options.bottomMargin > winLeft || elRight > winRight ) ) {
					el.eq(i).addClass(base.options.inViewClass);
				}
			}
		});
		sel = ( winBottom + base.options.bottomMargin >= docHeight ) ? ':last' : ':first';
		el.removeClass(base.options.selectedClass);
		el.filter('.' + base.options.inViewClass + sel).addClass(base.options.selectedClass);
	};
	base.init();

	if (base.options.useHash && base.win.location.hash) {
		setTimeout(function(){
			base.animate(base.win.location.hash);
		}, base.options.animationTime/2);
	}
	base.findLocation();
};

$.scrollNav.defaultOptions = {
	link              : 'a',        
	targetAttr        : 'href',      
	selectedAppliedTo : 'li',        
	contentClass      : 'content',   
	contentLinks      : 'scrollNav', 
	useHash           : true,        
	inViewClass       : 'inView',    
	selectedClass     : 'selected',  
	bottomMargin      : 100,         
	fitContent        : false,      
	animationTime     : 1200,                
	easing            : [ 'swing', 'swing' ] 
};

$.fn.scrollNav = function(options){
	return this.each(function(){
		var nav = $(this).data('scrollNav');
		if (typeof options === "string" && /^(#|\.)/.test(options)) {
			nav.animate(options);
		}
		if (nav) { return; }
		(new $.scrollNav(this, options));
	});
};
$.fn.getvisualNav = function(){
	return this.data("scrollNav");
};

})(jQuery);
	</script>
	

	<script>
		$(document).ready(function(){
		 $('#sticky-menu').scrollNav();
		});
	</script>

10 Things you need to know about HTML5 What I Did!

Posted on by Jonathan Romine

The old way, who would want to remember that?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

New way So much cleaner

<!DOCTYPE html>

Did you that it is unnecessary for HTML5, but it is used for current and older browsers that require specific doctype. It’s because browsers do not understand doctype, it will render the markup to standard mode. So feel free to use this without any worries

2. The Figure Element

The old way

<img src="#url to image" alt="about"/>
<p>here some texts7lt;/p>

The new way

<figure>
<img src="#url to images" alt="about"/>
<figcaption>
<p>here some text too!</p>
</figcaption>
</figure>

There unfortunately isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the introduction of the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

3. One of my favs is the <small>little</small>

this element has been redefined and can be used for small print such as copy right. this is a great tools to unitilize for anyone

4. No More Types for Scripts and Links

You possibly still add the type attribute to your link and script tags.

 <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />  
 <script type="text/javascript" src="path/to/script.js">

This is no longer necessary. It’s implied that both of these tags refer to stylesheets and scripts, respectively. As such, we can remove the type attribute all together.

    <link rel="stylesheet" href="path/to/stylesheet.css" />  
    <script src="path/to/script.js">

5. HTML5 nifty things with your list items

Web browsers have understand NEW attribute that can be applied to elements, called contenteditable. They allow a user to edit content within the element

<ul contenteditable="true">  
<li>list item 1</li>	
<li>list item 2</li>	
<li>list item 3</li>	
</ul>

6. Form Fields with ease

We are also going to use some of HTML5’s new input types and attributes to create more meaningful fields and use less unnecessary classes and ids:

  • email, for the email field
  • tel, for the telephone field
  • number, for the credit card number and security code
  • required, for required fields
  • placeholder, for the hints within some of the fields
  • autofocus, to put focus on the first input field when the page loads
<form id=payment>
<fieldset>
<legend>Your details</legend>
<label for=name>Name</label>
<input id=name name=name type=text placeholder="First and last name" required autofocus>
<abel for=email>Email</label>
<input id=email name=email type=email placeholder="example@domain.com" required>
<label for=phone>Phone</label>
<input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>
<button type=submit>Buy it!</button>
</fieldset>
</form>

7. The Semantic Header and Footer

No more <div> crazy

<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>

Divs, the no semantic structure even when you assign an ID or class. With HTML5 header, section and footer mark-up to make it look nice

<header></header>
<section></section>
<footer></footer>

8. Internet Explorer and HTML5

Unfortunately, that dang Internet Explorer requires a bit of wrangling in order to understand the new HTML5 elements. All elements, by default, have a display of inline. In order to ensure that the new HTML5 elements render correctly as block level elements, it’s necessary at this time to style them as such.

header, footer, article, section, nav, menu, hgroup {  
display: block;  
}

Unfortunately, Internet Explorer will still ignore these stylings, because it has no clue what, as an example, the header element even is. Luckily, there is an easy fix:

document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");  
document.createElement("menu");

Strangely enough, this code seems to trigger Internet Explorer. To simply this process for each new application, Remy Sharp created a script, commonly referred to as the HTML5 shiv. This script also fixes some printing issues as well.

<!--[if IE]>  
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->

9. hgroup

Imagine that, in my site’s header, I had the name of my site, immediately followed by a subheading. While we can use an <h1> and <h2> tag, respectively, to create the mark-up, there still wasn’t, as of HTML4, an easy way to semantically illustrate the relationship between the two. Additionally, the use of an h2 tag presents more problems, in terms of hierarchy, when it comes to displaying other headings on the page. By using the hgroup element, we can group these headings together, without affecting the flow of the document’s outline.

<header>  
<hgroup>  
<h1> Recall Fan Page </h1>  
<h2> Only for people who want the memory of a lifetime. </h2> 
</hgroup>

10. HTML Snippet

<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>

Retrieve Value of the Custom Attribute

var theDiv = document.getElementById('myDiv');  
var attr = theDiv.getAttribute('data-custom-attr');  
alert(attr); // My Val

It can also even be used in your CSS, like for this silly and lame CSS text changing example.

<!DOCTYPE html>  	  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>Sort of Lame CSS Text Changing</title>  
<style>  	  
h1 { position: relative; }  
h1:hover { color: transparent; }  	
h1:hover:after {  
    content: attr(data-hover-response);  
    color: black;  
    position: absolute;  
    left: 0;  	  
}  
</style>  
</head>  
<body>  
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>    
</body>  
</html>