<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>ropox feed</title>
	
	<link>http://ropox.net</link>
	<description>technology, ideas , news and some code maybe</description>
	<lastBuildDate>Tue, 13 Sep 2011 05:57:07 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/ropox/jthb" /><feedburner:info uri="ropox/jthb" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><creativeCommons:license>http://creativecommons.org/licenses/by-nc-sa/2.0/</creativeCommons:license><image><link>http://creativecommons.org/licenses/by-nc-sa/2.0/</link><url>http://creativecommons.org/images/public/somerights20.gif</url><title>Some Rights Reserved</title></image><feedburner:emailServiceId>ropox/jthb</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>25 jQuery image galleries and slideshow plugins</title>
		<link>http://feedproxy.google.com/~r/ropox/jthb/~3/0NKCPROF_vU/28665</link>
		<comments>http://ropox.net/archives/28665#comments</comments>
		<pubDate>Tue, 02 Aug 2011 11:52:11 +0000</pubDate>
		<dc:creator>ropox</dc:creator>
				<category><![CDATA[Metabloging]]></category>
		<category><![CDATA[web 2.0]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.webdesignerdepot.com/?p=24384</guid>
		<description><![CDATA[For some sites, image galleries are an absolute must. Portfolios are the first to come to mind, but galleries are also useful for blogs, e-commerce sites, and really any site that regularly displays multiple images on a single page. Below are 25 fantastic jQuery gallery and slideshow plugins. They&#8217;re all free (though some require different [...]


Related posts:<ol><li><a href='http://ropox.net/archives/28457' rel='bookmark' title='Permanent Link: get CKEditor data with Jquery &#8211; no plugin required'>get CKEditor data with Jquery &#8211; no plugin required</a> <small>If you are using the CKeditor also with JQuery (not...</small></li>
<li><a href='http://ropox.net/archives/925' rel='bookmark' title='Permanent Link: MooTools Update: Milk, MooBugger, JavaScript techniques, and more'>MooTools Update: Milk, MooBugger, JavaScript techniques, and more</a> <small>There has been a lot of interesting news in the...</small></li>
<li><a href='http://ropox.net/archives/3708' rel='bookmark' title='Permanent Link: Custom info windows with jQuery and Google Maps'>Custom info windows with jQuery and Google Maps</a> <small>Ben Nolan has a writeup on a new feature in...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[
<p><img title="thumb" src="http://netdna.webdesignerdepot.com/uploads/2011/07/thumb3.jpg" alt="" width="200" height="160" />For some sites, <strong>image galleries</strong> are an absolute must. Portfolios are the first to come to mind, but galleries are also useful for blogs, e-commerce sites, and really any site that regularly displays multiple images on a single page.</p>
<p>Below are 25 fantastic<strong> jQuery gallery</strong> and <strong>slideshow plugins</strong>.</p>
<p>They&#8217;re all free (though some require different licensing for commercial use, have premium versions available, or offer paid add-ons).</p>
<p>We&#8217;re sure there&#8217;s almost certainly going to be something to fit whatever your current project needs.</p>
<p>Feel free to suggest other options at the end of this post in the comments&#8217; area…id=&#8221;more-24384&#8243;&gt;</p>
<h1>TN3 Gallery</h1>
<p>href=&#8221;http://www.tn3gallery.com/&#8221;&gt;TN3 Galleryis our own fantastic and professional jQuery gallery plugin that includes slideshow capabilities. Features include a fullscreen option, dynamic image sizing, document linking, multiple albums and mouse wheel navigation. It can be skinned with CSS to match your site&#8217;s theme and it&#8217;s compatible with all modern desktop and mobile browsers and is also search engine friendly.</p>
<p> <a href="http://www.tn3gallery.com/" target="_blank"><img alt=""  src="http://netdna.webdesignerdepot.com/uploads/image_galleries/tn3gallery.jpg"/> </a></p>
<h1>PikaChoose</h1>
<p>PikaChooseis a lightweight slideshow plugin that can be used for carousels and lightboxes. A few premium themes are available for PikaChoose, including an instant photo theme, if you don&#8217;t want to create your own theme. It&#8217;s highly customizable and can be integrated with Fancybox.</p>
<p> <a href="http://pikachoose.com/" target="_blank"><img alt="" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/pikachoose.jpg" /></a></p>
<h1>Slides</h1>
<p>Slidesis a simple slideshow plugin for jQuery. It&#8217;s designed to help both novice and advanced users create user-friendly, elegant slideshows. You can includes images with captions and links, and embed multiple slideshows on a single page.</p>
<p><a href="http://slidesjs.com/" target="_blank"><img alt="" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/slidesjs.jpg" /></a></p>
<h1>SlideDeck</h1>
<p>SlideDeckis a powerful jQuery slider plugin that can be used for media galleries as well as other content. It offers full CSS customization, custom skins, slider mode (for more traditional slideshows), and touch screen support. There&#8217;s also a premium version available.</p>
<p><a href="http://www.slidedeck.com/" target="_blank"><img alt="" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/slidedeck.jpg" /></a></p>
<h1>Coin Slider</h1>
<p>Coin Slideris a jQuery slider with unique transition effects. It has flexible configuration options, and is compatible with IE6+, Firefox 2+, Safari 2+, Google Chrome 3+, and Opera 9+, all with valid markup. It&#8217;s also compatible with iOS and Android.</p>
<p><a href="http://workshop.rs/projects/coin-slider/" target="_blank"><img alt="" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/coinslider.jpg" /></a></p>
<h1>jQuery.popeye 2.0</h1>
<p>jQuery.popeye 2.0is an in-line slideshow plugin. It looks like just a normal image on a page until hovered on, when captions and navigation controls appear. It&#8217;s a great option for someone who wants an unobtrusive image gallery on their site. Controls and image count can also be included with the image when it&#8217;s not being hovered on.</p>
<p><a href="http://dev.herr-schuessler.de/jquery/popeye/demo.html" target="_blank"><img alt="" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/popeye.jpg"/> </a></p>
<h1>Galleriffic</h1>
<p>href=&#8221;http://www.twospy.com/galleriffic/index.html&#8221;&gt;Gallerifficis built to handle large volumes of images while conserving bandwidth. It uses smart image preloading after the page has loaded, and can be integrated with the jQuery.history plugin for bookmark-friendly URLs per-image. You can add your own custom transition effects, there&#8217;s support for image captions, and the whole thing is very flexible.</p>
<p><a href="http://www.twospy.com/galleriffic/index.html" target="_blank"><img alt="" class="image-border" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/galleriffic.jpg" /></a></p>
<h1>Galleria</h1>
<p>Galleria&#8217;spurpose is to make it easier for anyone to create professional-looking image galleries for the web and mobile devices. It comes bundled with a single theme, and additional premium themes are available starting at $9. You can also build your own theme using Galleria&#8217;s API.</p>
<p><a href="http://galleria.aino.se/" target="_blank"><img alt="" class="image-border" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/galleria.jpg" /></a></p>
<h1>Nivo Slider</h1>
<p>The Nivo Sliderincludes 16 unique transition effects and tons of settings you can tweak to meet your needs. The markup is all clean and valid, and the packed version is only 15kb. The Slider also includes support for HTML captions, keyboard navigation, and linking images, and comes with three themes.</p>
<p><a href="http://nivo.dev7studios.com/" target="_blank"><img  src="http://netdna.webdesignerdepot.com/uploads/image_galleries/nivo.jpg" /></a></p>
<h1>Smooth Div Scroll</h1>
<p>The Smooth Div Scrollplugin lets content scroll horizontally to either the left or right, without limiting the scroll to distinct steps. There are no visible buttons or links, as scrolling is done through hotspots within the scrollable area, or with autoscrolling.</p>
<p><a href="http://www.smoothdivscroll.com/" target="_blank"><img alt="" class="image-border" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/smoothdivscroll.jpg" /></a></p>
<h1>Sliding Image Gallery</h1>
<p>The Sliding Image Galleryplugin was inspired by the iTunes album viewer. There are a few variations available, and full instructions for implementation are provided.</p>
<p><a href="http://www.meadmiracle.com/SlidingGallery.aspx" target="_blank"><img alt="" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/slidingimagegallery.jpg" /></a></p>
<h1>Sideways</h1>
<p>Sidewaysis a fullscreen image gallery that&#8217;s absolutely gorgeous, especially on widescreen displays. It includes both a thumbnail viewer and next image navigation.</p>
<p><a href="http://manos.malihu.gr/sideways-jquery-fullscreen-image-gallery" target="_blank"><img alt="" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/sideways.jpg"/> </a></p>
<h1>Orbit</h1>
<p>Orbitis a simple image slider from Zurb. You can use image thumbnails for navigation, and it has clean, semantic code. Navigation can be inside or outside the container, it supports HTML captions, and even CSS3 Font-Face text over your images.</p>
<p><a href="http://www.zurb.com/playground/jquery_image_slider_plugin" target="_blank"><img alt="" class="image-border" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/orbit.jpg"/> </a></p>
<h1>ShineTime</h1>
<p>ShineTimeis a jQuery and CSS3 gallery with animated shine effects on both the thumbnails and photo captions. It uses thumbnails for navigation.</p>
<p><a href="http://addyosmani.com/blog/shinetime/"><img  src="http://netdna.webdesignerdepot.com/uploads/image_galleries/shinetime.jpg" /></a></p>
<h1>AD Gallery</h1>
<p>AD Galleryis a simple slideshow plugin that supports both slide in and fade in of images, preloading of images, and image descriptions. It will scale down images that are larger than the container size, while centering images that are smaller.</p>
<p><a href="http://coffeescripter.com/code/ad-gallery/" target="_blank"><img  class="image-border" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/adgallery.jpg" /></a></p>
<h1>Supersized</h1>
<p>Supersizedis a fullscreen background slideshow. It automatically resizes images to fit the browser window while maintaining their aspect ratio and preloads images. There&#8217;s also a Supersized Flickr version that will pull images from your Flickr photo stream.</p>
<p><a href="http://www.buildinternet.com/project/supersized/"><img  src="http://netdna.webdesignerdepot.com/uploads/image_galleries/supersized.jpg" /></a></p>
<h1>prettyPhoto</h1>
<p>prettyPhoto is a lightbox clone, with support for images, video, Flash, iframes, and ajax. It can be used for single images or galleries, and galleries can have mixed content.</p>
<p><a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#%21prettyPhoto[pp_gal]/4/"><img  src="http://netdna.webdesignerdepot.com/uploads/image_galleries/prettyphoto.jpg" /></a></p>
<h1>ColorBox</h1>
<p>ColorBoxis a lightweight and customizable lightbox plugin that supports photos, ajax, and iframes. It will preload your background images, and preloads upcoming images within a photo group. It comes with elastic and fade transitions, as well as the option for no transition between images.</p>
<p><a href="http://colorpowered.com/colorbox/"><img  class="image-border" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/colorbox.jpg" /></a></p>
<h1>YoxView</h1>
<p>href=&#8221;http://www.yoxigen.com/yoxview/&#8221;&gt;YoxViewis a lightbox-type media and image viewer plugin. It supports images, video (including YouTube, Hulu, and Vimeo), inline content, iframes, Flash, and more. It can be embedded in the same page multiple times, and you can have content play automatically.</p>
<p><a href="http://www.yoxigen.com/yoxview/"><img  class="image-border" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/yoxview.jpg" /></a></p>
<h1>Micro Image Gallery</h1>
<p>Thehref=&#8221;http://tympanus.net/codrops/2010/04/19/micro-image-gallery-a-jquery-plugin-2/&#8221;&gt;Micro Image Galleryis a tiny image gallery plugin, designed for use when space is limited. There are three sizes available, 102 pixels, 162 pixels, and 222 pixels, and galleries can default to show thumbnails or a single image when loaded.</p>
<p><a href="http://tympanus.net/codrops/2010/04/19/micro-image-gallery-a-jquery-plugin-2/"><img  src="http://netdna.webdesignerdepot.com/uploads/image_galleries/microimage.jpg" /></a></p>
<h1>lightBox</h1>
<p>The jQuery lightBoxplugin was inspired by Lightbox JS. It&#8217;s simple and unobtrusive, overlaying images directly over the current page. There are a number of configuration options available for customizing the plugin.</p>
<p><a href="http://leandrovieira.com/projects/jquery/lightbox/"><img  src="http://netdna.webdesignerdepot.com/uploads/image_galleries/lightbox.jpg" /></a></p>
<h1>Morphing Gallery</h1>
<p>The jQueryhref=&#8221;http://codeassembly.com/jQuery-morphing-gallery/&#8221;&gt;Morphing Galleryplugin uses a combination of fades and shape-changing as transition between images. The entire slideshow changes size and shape to fit the image being displayed.</p>
<p><a href="http://codeassembly.com/jQuery-morphing-gallery/"><img  class="image-border" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/morphinggallery.jpg" /></a></p>
<h1>slideViewer</h1>
<p>slideVieweris a simple jQuery image slider built on a singe unordered list. It offers tooltip captions for the images, which can be customized, as well as customizable CSS for styling.</p>
<p><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html"><img  class="image-border" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/slideviewer.jpg" /></a></p>
<h1>Fancybox</h1>
<p>href=&#8221;http://fancybox.net/&#8221;&gt;Fancyboxis a simple modal window style gallery plugin. It can handle a variety of content beyond images, including inline content, ajax, iframes, and Flash. It supports a variety of title positions, and the slideshow can be navigated using your mouse&#8217;s scrollwheel or with onscreen navigation.</p>
<p><a href="http://fancybox.net/"><img  src="http://netdna.webdesignerdepot.com/uploads/image_galleries/fancybox.jpg"  /></a></p>
<h1>Spacegallery</h1>
<p>Spacegalleryhas a 3D interface that loads new images when you click on the existing one. It has a configurable border, animation duration, perspective height, and more.</p>
<p><a href="http://eyecon.ro/spacegallery/#about"><img  class="image-border" src="http://netdna.webdesignerdepot.com/uploads/image_galleries/spacegallery.jpg" /></a></p>
<p><em>Written exclusively for WDD by <a href="http://cameronchapman.com/">Cameron Chapman</a>.</em></p>
<div class="fb-widget" id="fbtb-f255b4c8a50744c28df5d40cac35ff62" style="border:0; outline:0; padding:0; margin:0; position:relative;" itemscope="" itemid="http://www.freebase.com/id/en/jquery" itemtype="http://www.freebase.com/id/computer/software"> <form class="fb-widget-placeholder" style="border:0; outline:0; padding:0; margin:0;"> <input name="src" value="http://www.freebase.com/widget/topic?track=topicblocks_plugin_tags&amp;mode=content&amp;id=%2Fen%2Fjquery" type="hidden" /> <input name="width" value="413" type="hidden" /> <input name="height" value="285" type="hidden" /> <span style="line-height:1; border:0; outline:0; padding:0; margin:0; display:inline-block; padding:5px; background:#eee; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;"> <div style="text-align:left; vertical-align:baseline; line-height:1; border:0; outline:0; margin:0 0 5px 5px;"> <a style="text-align:left; vertical-align:baseline; font-family:'Helvetica Neue', Arial, sans-serif; font-size:13px; font-weight:bold; line-height:1.6; text-decoration:none; color:#17b; border:0; outline:0; padding:0; margin:0;" href="http://www.freebase.com/view/en/jquery" target="_blank" > jQuery </a> </div> <div style="vertical-align:top; border:1px solid #ddd; outline:0; padding:0; margin:0; position: relative; width:400px; height:220px; overflow:auto; background-color:#fff"> <img src="http://img.freebase.com/api/trans/image_thumb/en/jquery?pad=1&amp;errorid=%2Ffreebase%2Fno_image_png&amp;maxheight=150&amp;mode=fillcropmid&amp;maxwidth=150" title="jQuery" style="border:0; outline:0; padding: 0; margin: 28px auto; display: block;"> </div> </span> </form> </div>


<p>Related posts:<ol><li><a href='http://ropox.net/archives/28457' rel='bookmark' title='Permanent Link: get CKEditor data with Jquery &#8211; no plugin required'>get CKEditor data with Jquery &#8211; no plugin required</a> <small>If you are using the CKeditor also with JQuery (not...</small></li>
<li><a href='http://ropox.net/archives/925' rel='bookmark' title='Permanent Link: MooTools Update: Milk, MooBugger, JavaScript techniques, and more'>MooTools Update: Milk, MooBugger, JavaScript techniques, and more</a> <small>There has been a lot of interesting news in the...</small></li>
<li><a href='http://ropox.net/archives/3708' rel='bookmark' title='Permanent Link: Custom info windows with jQuery and Google Maps'>Custom info windows with jQuery and Google Maps</a> <small>Ben Nolan has a writeup on a new feature in...</small></li>
</ol></p>
<p><a href="http://feedads.g.doubleclick.net/~a/-hhP47IQXFNS7BBsZT-Hd0PlYxc/0/da"><img src="http://feedads.g.doubleclick.net/~a/-hhP47IQXFNS7BBsZT-Hd0PlYxc/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/-hhP47IQXFNS7BBsZT-Hd0PlYxc/1/da"><img src="http://feedads.g.doubleclick.net/~a/-hhP47IQXFNS7BBsZT-Hd0PlYxc/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=0NKCPROF_vU:nw6olYL_fDQ:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=0NKCPROF_vU:nw6olYL_fDQ:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=0NKCPROF_vU:nw6olYL_fDQ:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?i=0NKCPROF_vU:nw6olYL_fDQ:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=0NKCPROF_vU:nw6olYL_fDQ:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=7Q72WNTAKBA" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ropox.net/archives/28665/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://ropox.net/archives/28665</feedburner:origLink></item>
		<item>
		<title>get CKEditor data with Jquery – no plugin required</title>
		<link>http://feedproxy.google.com/~r/ropox/jthb/~3/rEEP1069A_4/28457</link>
		<comments>http://ropox.net/archives/28457#comments</comments>
		<pubDate>Tue, 19 Apr 2011 08:52:13 +0000</pubDate>
		<dc:creator>ropox</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Snippets]]></category>
		<category><![CDATA[ckeditor]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://ropox.net/?p=28457</guid>
		<description><![CDATA[If you are using the CKeditor also with JQuery (not the ckeditor plugin) then at some point you might want to get the editor data without submitting the form.


Related posts:<ol><li><a href='http://ropox.net/archives/1081' rel='bookmark' title='Permanent Link: JQuery wildcard selectors'>JQuery wildcard selectors</a> <small>JQuery wildcard selectors on select boxes, how to reset all...</small></li>
<li><a href='http://ropox.net/archives/15669' rel='bookmark' title='Permanent Link: “Visualize” data as graphs'>“Visualize” data as graphs</a> <small>How do you visualize data in interesting ways but allow...</small></li>
<li><a href='http://ropox.net/archives/20449' rel='bookmark' title='Permanent Link: Getting the page and viewport dimensions using jQuery'>Getting the page and viewport dimensions using jQuery</a> <small>Getting the page and viewport dimensions using jQuery is as...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[
<p>If you are using the CKeditor also with <a href="http://jquery.com" target="_blank">JQuery </a>(not the ckeditor plugin) then at some point you might want to get the editor data without submitting the form.</p>
<p>after a lot of searching i managed to get the editor data without using the <a href="http://ckeditor.com/blog/CKEditor_for_jQuery" target="_blank">jquery plugin for CKEditor</a>.</p>
<p>So if you are replacing text areas with the common way , e.g.</p>
<pre class="brush: javascript">
var bodyEditorEN = CKEDITOR.replace( &#039;bodyen&#039;, {toolbar : &#039;Basic&#039;});</pre>
<p>and this applies to the html element :</p>
<pre class="brush: html">
&lt;textarea id=&quot;bodyen&quot; cols=&quot;70&quot; rows=&quot;10&quot; name=&quot;bodyen&quot;&gt;&lt;/textarea&gt;
</pre>
<p>then all you need to do to access data with Jquery from the editor is by using the <a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData">getData </a>method from CKEditor:</p>
<pre class="brush: javascript">
var body = CKEDITOR.instances[&#039;bodyen&#039;].getData();
alert(body);
</pre>
<div class="fb-widget" id="fbtb-f255b4c8a50744c28df5d40cac35ff62" style="border:0; outline:0; padding:0; margin:0; position:relative;" itemscope="" itemid="http://www.freebase.com/id/en/jquery" itemtype="http://www.freebase.com/id/computer/software"> <form class="fb-widget-placeholder" style="border:0; outline:0; padding:0; margin:0;"> <input name="src" value="http://www.freebase.com/widget/topic?track=topicblocks_plugin_tags&amp;mode=content&amp;id=%2Fen%2Fjquery" type="hidden" /> <input name="width" value="413" type="hidden" /> <input name="height" value="285" type="hidden" /> <span style="line-height:1; border:0; outline:0; padding:0; margin:0; display:inline-block; padding:5px; background:#eee; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;"> <div style="text-align:left; vertical-align:baseline; line-height:1; border:0; outline:0; margin:0 0 5px 5px;"> <a style="text-align:left; vertical-align:baseline; font-family:'Helvetica Neue', Arial, sans-serif; font-size:13px; font-weight:bold; line-height:1.6; text-decoration:none; color:#17b; border:0; outline:0; padding:0; margin:0;" href="http://www.freebase.com/view/en/jquery" target="_blank" > jQuery </a> </div> <div style="vertical-align:top; border:1px solid #ddd; outline:0; padding:0; margin:0; position: relative; width:400px; height:220px; overflow:auto; background-color:#fff"> <img src="http://img.freebase.com/api/trans/image_thumb/en/jquery?pad=1&amp;errorid=%2Ffreebase%2Fno_image_png&amp;maxheight=150&amp;mode=fillcropmid&amp;maxwidth=150" title="jQuery" style="border:0; outline:0; padding: 0; margin: 28px auto; display: block;"> </div> </span> </form> </div>


<p>Related posts:<ol><li><a href='http://ropox.net/archives/1081' rel='bookmark' title='Permanent Link: JQuery wildcard selectors'>JQuery wildcard selectors</a> <small>JQuery wildcard selectors on select boxes, how to reset all...</small></li>
<li><a href='http://ropox.net/archives/15669' rel='bookmark' title='Permanent Link: “Visualize” data as graphs'>“Visualize” data as graphs</a> <small>How do you visualize data in interesting ways but allow...</small></li>
<li><a href='http://ropox.net/archives/20449' rel='bookmark' title='Permanent Link: Getting the page and viewport dimensions using jQuery'>Getting the page and viewport dimensions using jQuery</a> <small>Getting the page and viewport dimensions using jQuery is as...</small></li>
</ol></p>
<p><a href="http://feedads.g.doubleclick.net/~a/xSUVWaofGIrg6-N5W_YHkLvU0Fg/0/da"><img src="http://feedads.g.doubleclick.net/~a/xSUVWaofGIrg6-N5W_YHkLvU0Fg/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/xSUVWaofGIrg6-N5W_YHkLvU0Fg/1/da"><img src="http://feedads.g.doubleclick.net/~a/xSUVWaofGIrg6-N5W_YHkLvU0Fg/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=rEEP1069A_4:5GVnIxU1nnY:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=rEEP1069A_4:5GVnIxU1nnY:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=rEEP1069A_4:5GVnIxU1nnY:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?i=rEEP1069A_4:5GVnIxU1nnY:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=rEEP1069A_4:5GVnIxU1nnY:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=7Q72WNTAKBA" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ropox.net/archives/28457/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://ropox.net/archives/28457</feedburner:origLink></item>
		<item>
		<title>Why We Should Start Using CSS3 and HTML5 Today</title>
		<link>http://feedproxy.google.com/~r/ropox/jthb/~3/t3wAeyHv06g/28258</link>
		<comments>http://ropox.net/archives/28258#comments</comments>
		<pubDate>Tue, 11 Jan 2011 06:29:10 +0000</pubDate>
		<dc:creator>ropox</dc:creator>
				<category><![CDATA[Metabloging]]></category>
		<category><![CDATA[web 2.0]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Coding]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[html5]]></category>

		<guid isPermaLink="false">http://www.smashingmagazine.com/?p=76011</guid>
		<description><![CDATA[For a while now,  I have taken notice of how <strong>many designers are reluctant to embrace the new technologies such as CSS3 or HTML5</strong> because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot.


Related posts:<ol><li><a href='http://ropox.net/archives/15662' rel='bookmark' title='Permanent Link: HTML5 and CSS3 Readiness Visualization'>HTML5 and CSS3 Readiness Visualization</a> <small>Paul Irish and Divya Manian have created a fun visualization...</small></li>
<li><a href='http://ropox.net/archives/7306' rel='bookmark' title='Permanent Link: YouTube and Vimeo turn on HTML5 video tag'>YouTube and Vimeo turn on HTML5 video tag</a> <small>At Google I/O the team showed a demo of YouTube...</small></li>
<li><a href='http://ropox.net/archives/3739' rel='bookmark' title='Permanent Link: IE 8 Launches at MIX09, probably without one of your features'>IE 8 Launches at MIX09, probably without one of your features</a> <small>You may have noticed that day 2 at MIX was...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[
<p>For a while now,  I have taken notice of how <strong>many designers are reluctant to embrace the new technologies such as CSS3 or HTML5</strong> because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day. When in reality, they are effectively waiting for Godot.</p>
<p>Just like the elusive character from Beckett&#8217;s classic play, this day of full cross-browser support is not ever truly going to find its dawn and deliver us this wonderful new Web where our work looks the same within the window of any and <em>every</em> Web browser. Which means that many of us in the online reaches, from clients to designers to developers and on, are going to need to adjust our thinking so that we can realistically approach the Web as it is now, and more than likely how it will be in the future.</p>
<p>Sometimes it feels that we are hiding behind the lack of cross-browser compatibility to avoid learning new techniques that would actually dramatically improve our workflow. And that&#8217;s just wrong. Without an adjustment, we will continue to undersell the Web we have, and the landscape will remain unexcitingly stale and bound by this underestimation and mindset.</p>
<h3>Adjustment in Progress</h3>
<p>Sorry if any bubbles are bursting here, but we have to wake up to the fact that full cross-browser support of new technologies is just not going to happen. Some users will still use older browsers and some users will still have browsers with deactivated JavaScript or images; some users will be having weird view port sizes and some will not have certain plugins installed.</p>
<p>But that&#8217;s OK, really.</p>
<p>The Web is a damn flexible medium, and rightly so. We should embrace its flexibility rather than trying to set boundaries for the available technologies in our mindset and in our designs. The earlier we start designing with the new technologies, the quicker their wide adoption will progress and the quicker we will get by the incompatibility caused by legacy browsers. More and more users are using more advanced browsers every single day, and by using new technologies, we actually encourage them to switch (if they can). Some users will not be able to upgrade, which is why our designs should have a basic fallback for older browsers, but it can&#8217;t be the reason to design only the fallback version and call it a night.</p>
<p><a href="http://selectivizr.com"><img src="http://ropox.net/wp-content/uploads/2011/selectivzr.jpg" alt="Selectivzr in Why We Should Start Using CSS3 and HTML5 Today" width="500" height="381" /></a><br />
<em><a href="http://selectivizr.com">Select[ivizr]</a> is one of the many tools that make it possible to use CSS3 today.</em></p>
<p>There are <a href="http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/">so</a> <a href="http://www.smashingmagazine.com/2010/06/17/start-using-css3-today-techniques-and-tutorials/">many</a> <a href="http://www.alistapart.com/articles/responsive-web-design/">remarkable</a> <a href="http://www.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/">things</a> that we, designers and developers, can do today: be it responsive designs with CSS3 media queries, rich Web typography (with full support today!) or HTML5 video and audio. And there are so many <a href="http://caniuse.com/">useful</a> <a href="http://www.modernizr.com/">tools</a> <a href="http://selectivizr.com/">and</a> <a href="http://html5boilerplate.com/">resources</a> that we can use right away to incorporate new technologies in our designs while still supporting older browsers. There is just no reason <em>not</em> to use them.</p>
<p>We are the ones who can push the cross-browser support of these new technologies, encouraging and demanding the new features in future browsers. We have this power, and passing on it just because we don&#8217;t feel like there is no full support of them yet, should not be an option. We need to realize that we are the ones putting the wheels in motion and it&#8217;s up to us to decide what will be supported in the future browsers and what will not.</p>
<p>More exciting things <a href="http://opentype.info/blog/2010/08/14/better-web-typography-with-opentype-features/">will be coming</a> <a href="http://24ways.org/2010/my-css-wish-list">in the future</a>. We should design for the future and we should design for today — making sure that our progressive designs work well in modern browsers and work fine in older browsers. The crucial mistake would be clinging to the past, trying to work with the old nasty hacks and workarounds that will become obsolete very soon.</p>
<p>We can continue to cling to this notion and wait for older browsers to become outdated, thereby selling ourselves and our potential short, or we can adjust our way of thinking about this and come at the Web from a whole new perspective. One where we understand the truth of the situation we are faced with. That our designs are not going to look the same in every browser and our code will not render the same in every browser. And that&#8217;s the bottom line.</p>
<p><a href="http://24ways.org/2010/my-css-wish-list"><img src="http://ropox.net/wp-content/uploads/2011/yaili-24ways.jpg" alt="Yaili-24ways in Why We Should Start Using CSS3 and HTML5 Today" width="500" height="417" /></a><br />
<em>Yaili&#8217;s beautiful piece <a href="http://24ways.org/2010/my-css-wish-list">My CSS Wishlist on 24ways</a>. Articles like these are the ones that push the boundaries of web design and encourage more innovation in the industry.</em></p>
<p>Andy Clarke spoke about this at the DIBI Conference earlier this year (you can check his presentation <a href="http://vimeo.com/17137962">Hardboiled Web Design on Vimeo</a>). He really struck a nerve with his presentation, yet still we find so many stalling in this dream of complete Web standardization. So we wanted to address this issue here and keep this important idea being discussed and circulated. Because this waiting is not only hurting those of us working with the Web, but all of those who use the Web as well. Mainly through this plethora of untapped potential which could improve the overall experience across the spectrum for businesses, users and those with the skills to bring this sophisticated, rich, powerful new Web into existence.</p>
<h4>For Our Clients</h4>
<p>Now this will mean different things for different players in the game. For example, for our clients this means a much more developed and uniquely crafted design that is not bound by the boxes we have allowed our thinking to be contained in. However, this does come with a bit of a compromise that is expected on the parts of our clients as well. At least it does for this to work in the balanced and idealized way these things should play out. But this should be expected. Most change does not come without its compromises.</p>
<p>In this case, our clients have to accept the same truism that we do and concede that their projects will not look the same across various browsers. This is getting easier to convince them of in these times of the expanding mobile market, but they may still not be ready to concede this inch on the desktop side of the coin. Prices might be adjusted in some cases too, and that may be another area that the clients are not willing to accept. But with new doors being opened and more innovation, comes more time and dedicated efforts. These are a few of the implications for our clients, though the expanded innovation is where we should help them focus.</p>
<p><strong>In short:</strong></p>
<ul>
<li>Conceding to the idea that the project will not be able to look the same across various browsers,</li>
<li>This means more developed and unfettered imaginative designs for our clients,</li>
<li>This could lead to increased costs for clients as well, but with higher levels of innovation and</li>
<li>Client&#8217;s visions for what they want will be less hindered by these limitations.</li>
</ul>
<h4>For the Users</h4>
<p>The users are the ones who have the least amount invested in most of what is going on behind the scenes. They only see the end result, and they often do not think too much about the process that is involved which brings it to the screens before them. Again, with the mobile market, they have already come across the concept of varying interfaces throughout their varied devices. They only care about the functionality and most probably the style that appeals to them — but this is where their interest tends to end. Unless of course, they too are within the industry, and they may give it a second thought or more. So all this talk of cross-browser compatibility really doesn&#8217;t concern them, they really leave all that up to us to worry about.</p>
<p>Users only ever tend to notice anything if and when something does not work the way they expect it to from one place to the next. In most cases, they are willing to show something to a relative, friend or colleague, and suddenly from one device to the next, something is different that disrupts their ability to do so. That is when they actually take notice. But if we have done our jobs correctly, these transitions will remain smooth — even with the pushing of the envelopes that we are doing. So there is not much more that is going to change for the users other than a better experience. Average user is not going to check if a given site has the same rounded corners and drop-shadow in two different browsers installed on the user&#8217;s machine.</p>
<p><strong>In short:</strong></p>
<ul>
<li>Potentially less disruptions of experience from one device to another and</li>
<li>An overall improved user experience.</li>
</ul>
<h4>For Designers/Developers</h4>
<p>We, the designers and developers of the Web, too have to make the same concession our clients do and surrender the effort to craft the same exact presentation and experience across the vast spectrum of platforms and devices. This is not an easy idea to give up for a lot of those playing in these fields, but as has been already mentioned, we are allowing so much potential to be wasted. We could be taking the Web to new heights, but we allow ourselves to get hung up on who gets left behind in the process — and as a result we all end up getting left behind. Rather than viewing them as separate audiences and approaching them individually, so to speak, we allow the limitations of one group to limit us all.</p>
<p><a href="http://www.flickr.com/photos/michaelsgalpert/5071561135/"><img class="alignnone size-full wp-image-76016" src="http://ropox.net/wp-content/uploads/2011/divide.jpg" alt="Divide in Why We Should Start Using CSS3 and HTML5 Today" width="500" height="300" /></a><br />
<em>Perhaps a divide and conquer mentality should be employed. <a href="http://www.flickr.com/photos/michaelsgalpert/5071561135/">Image Credit</a></em></p>
<p>So this could mean a bit more thought for the desired follow through, and we are not suggesting that we strive to appease one group here and damn the rest. Instead, we should just take a unified approach, designing for those who can see and experience the latest, and another for those who cannot. It wouldn&#8217;t mean more work if we design with those users in mind and produce meaningful and clean code up front and then just adjust it for older browsers. Having to remember that not everyone is afforded the privilege of choosing which browser they are using. And if necessary, this approach can be charged for. So it could lead to more revenue along with exciting new opportunities — by bringing some of the fun back into the work that being boxed in with limitations has robbed us of.</p>
<p><strong>In short:</strong></p>
<ul>
<li>Conceding to the idea that the project will not be able to look the same across various browsers,</li>
<li>A more open playing field for designers and developers all around; less restricted by this holding pattern,</li>
<li>More exciting and innovative landscape to attract new clientele,</li>
<li>Division of project audience into separate presentational approaches and</li>
<li>Probably less work involved because we don&#8217;t need the many hacks and workarounds we&#8217;ve used before.</li>
</ul>
<h3>So What Are We Waiting For?</h3>
<p>So if this new approach, or adjusted way of thinking can yield positive results across the browsers for everyone involved, then why are we still holding back? What is it that we are waiting for? Why not cast off these limitations thrown upon our fields and break out of these boxes? The next part of the discussion tries to suss out some of the contributing factors that could be responsible for keeping us restrained.</p>
<h4>Fear Factor</h4>
<p><a href="http://www.flickr.com/photos/prettyuglydesign/4673681658/"><img src="http://ropox.net/wp-content/uploads/2011/Fail-Better.jpg" alt="Fail-Better in Why We Should Start Using CSS3 and HTML5 Today" /></a><br />
<em>The fail awaits, and so some of us opt to stay back. Image by <a href="http://www.flickr.com/photos/prettyuglydesign/4673681658/">Ben Didier</a></em></p>
<p>One contributing factor that has to be considered, is perhaps that we are being held back out of fear. This might be a fear of trying something new, now that we have gotten so comfortable waiting for that magic day of compatibility to come. This fear could also stem from not wanting to stand up to some particular clients and try to make them understand this truism of the Web and the concessions that need to be made — with regards to consistent presentation across the browsers. We get intimated, so to speak, into playing along with these unrealistic expectations, rather than trusting that we can make them see the truth of the situation. Whatever the cause is that drives this factor, we need to face our fears and move on.</p>
<p>It&#8217;s our responsibility of professionals to deliver high-quality work to our clients and advocate on and protect user&#8217;s interests. It&#8217;s our responsibility to confront clients when we have to, and we will have to do it at some point anyway, because 100% cross-browser compatibility is just not going to happen.</p>
<h4>Comfortable Factor</h4>
<p>A possible contributing factor that we should also look into is that some people in the community are just too comfortable with how we design today and are not willing to learn new technology. There are those of us who already tire of the extra work involved in the testing and coding to make everything work as it is, so we have little to no interest at all in an approach that seemingly calls for more thought and time. But really, if we start using new technologies today, we will have to master a learning curve first, but the advantages are certainly worth our efforts. We should see it as the challenge that will save us time and deliver better and cleaner code.</p>
<p>To some extent, today we are in the situation in which we were in the beginning of 2000s; at those times when the emergence and growing support of CSS in browsers made many developers question their approach to designing web sites with tables. If the majority of  designers passed on CSS back then and if the whole design community didn&#8217;t push the Web standards forward, we probably still would be designing with tables.</p>
<h4>Doubt Factor</h4>
<p>Doubt is another thing we must consider when it comes to our being in hold mode, and this could be a major contributor to this issue. We begin to doubt ourselves and our ability to pull off this innovative, boundary pushing-kind-of-work, or to master these new techniques and specs, so we sink into the comfort of playing the waiting game and playing it safe with our designs and code. We just accept the limitations and quietly work around them, railing on against the various vendors and the W3C. We should take the new technologies as the challenge to conquer; we&#8217;ve learned HTML and CSS 2.1 and we can learn HTML5 and CSS3, too.</p>
<h4>Faith Factor</h4>
<p><a href="http://www.flickr.com/photos/fotologic/408096004/"><img src="http://ropox.net/wp-content/uploads/2011/I-want-to-believe.jpg" alt="I-want-to-believe in Why We Should Start Using CSS3 and HTML5 Today" /></a><br />
<em>Faith can be a good thing, but in this case, it can hold you back. Image by <a href="http://www.flickr.com/photos/fotologic/408096004/">fotologic</a></em></p>
<p>Undoubtedly, some of us are holding off on moving forward into these new areas because we are faithfully clinging to the belief that the cross-browser support push will eventually happen. There are those saying that we will be better off as a community if we allowed the Web to evolve, and that this evolution should not be forced.</p>
<p>But this is not forcing evolution, it is just evolution. Just like with Darwin&#8217;s theory, the Web evolves in stages, it does not happen for the entire population at once. It is a gradual change over time. And that is what we should be allowing to happen with the Web, gradually using and implementing features for Web community here and there. This way forward progress is happening, and nobody should be held back from these evolutionary steps until we all can take them.</p>
<h4>&#8220;It&#8217;s Too Early&#8221; Factor</h4>
<p>Another possible contributor is the ever mocking &#8220;It&#8217;s too early&#8221; factor. Some members of the online community faithfully fear that if they go ahead and accept this new way forward and begin designing or developing in accordance, then as soon as they begin completing projects, the support might be dropped and they would need to update the projects they already completed in the past. It&#8217;s common to think that it&#8217;s just too early to work with new standards until they are fully implemented in many browsers; because it&#8217;s just not safe to assume that they will be implemented at all.</p>
<p>However, one needs to understand the difference between two groups of new features: the widely accepted ones (CSS3′s media queries, border-radius or drop-shadows or HTML5 canvas are not going to disappear) and the experimental ones (e.g. some <a href="http://opentype.info/blog/2010/08/14/better-web-typography-with-opentype-features/">OpenType features are currently supported only in Firefox 4 Beta</a>). The widely accepted features are safe to use and they will not disappear for certain; the experimental features can always be extracted in a separate stylesheet and be easily updated and maintained when necessary. It might be a good idea not to use experimental, unsupported features in large corporate designs unless they are not affecting the critical design elements of the design.</p>
<h4>Validation Factor</h4>
<p>We cannot forget to mention that there are also many of us who are refusing to dabble in these new waters simply due to the fact that implementing some of these techniques or styles would cause a plethora of vendor-specific pefixes to appear in the stylesheet, thus impeding the validation we as professionals strive for.</p>
<p>Many of us would never put forth any project that does not fully validate with the W3C, and until these new specs are fully standardized and valid, we are unwilling to include them in their work. And because using CSS3 usually means using vendor-specific prefixes, we shouldn&#8217;t be using CSS3. Right?</p>
<p><a href="http://net.tutsplus.com/articles/general/but-it-doesnt-validate/"><img class="alignnone size-full wp-image-76026" src="http://ropox.net/wp-content/uploads/2011/validate.jpg" alt="Validate in Why We Should Start Using CSS3 and HTML5 Today" width="500" height="300" /></a><br />
<em>Jeffrey Way&#8217;s article <a href="http://net.tutsplus.com/articles/general/but-it-doesnt-validate/">But It Doesn&#8217;t Validate</a></em></p>
<p>Well, not quite. As Jeffrey Way perfectly explains in his article <a href="http://net.tutsplus.com/articles/general/but-it-doesnt-validate/">But it Doesn&#8217;t Validate</a>, validation is not irrelevant, but the final score of the CSS validator might be. As Jeffrey says,</p>
<blockquote><p>&#8220;This score serves no higher purpose than to provide you with feedback. It neither contributes to accessibility, nor points out best-practices. In fact, the validator can be misleading, as it signals errors that aren&#8217;t errors, by any stretch of the imagination.</p>
<p>[...] Validation isn&#8217;t a game, and, while it might be fun to test your skills to determine how high you can get your score, always keep in mind: it doesn&#8217;t matter. And never, ever, ever compromise the use of the latest doctype, CSS3 techniques and selectors for the sake of validation.&#8221;</p>
<p>— Jeffrey Way, <a href="http://net.tutsplus.com/articles/general/but-it-doesnt-validate/">But it Doesn&#8217;t Validate</a></p></blockquote>
<p>Having our work validate 100% is not always the best for the project. If we make sure that our code is clean and accessible, and that it validates without the CSS3/HTML5-properties, then we should take our work to the next level, meanwhile sacrificing part of the validation test results. We should not let this factor keep us back. If we have a chance for true innovation, then we shouldn&#8217;t allow ourselves to be restrained by unnecessary boundaries.</p>
<h3>All in All…</h3>
<p>Whatever the factors that keep us from daring into these new CSS3 styles or new HTML5 coding techniques, just for a tangible example, need to be gotten over. Plain and simple. We need to move on and <strong>start using CSS3 and HTML5 today</strong>. The community will become a much more exciting and innovative playground, which in turn will improve experiences for as well as draw in more users to this dynamic new Web, which in turn will attract more clientele — effectively expanding the market. This is what could potentially be waiting on the other side of this fence that we are timidly facing — refusing to climb over it. Instead, waiting for a gate to be installed.</p>
<p>Until we get passed this limited way of looking at the situation, only then will we continue falling short of the full potential of ourselves and our field. Are there any areas that you would love to be venturing into, but you are not because of the lack of complete cross browser compatibility? Admittedly, I was a faith factor member of the community myself — how about you? And what CSS3 or HTML5 feature are you going to incorporate into your next design?</p>
<div class="fb-widget" id="fbtb-7d666f95d35745b9b4b9bfee00cde757" style="border:0; outline:0; padding:0; margin:0; position:relative;" itemscope="" itemid="http://www.freebase.com/id/user/daepark/validate" itemtype="http://www.freebase.com/id/type/domain"> <form class="fb-widget-placeholder" style="border:0; outline:0; padding:0; margin:0;"> <input name="src" value="http://www.freebase.com/widget/topic?track=topicblocks_plugin_tags&amp;mode=content&amp;id=%2Fuser%2Fdaepark%2Fvalidate" type="hidden" /> <input name="width" value="413" type="hidden" /> <input name="height" value="285" type="hidden" /> <span style="line-height:1; border:0; outline:0; padding:0; margin:0; display:inline-block; padding:5px; background:#eee; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;"> <div style="text-align:left; vertical-align:baseline; line-height:1; border:0; outline:0; margin:0 0 5px 5px;"> <a style="text-align:left; vertical-align:baseline; font-family:'Helvetica Neue', Arial, sans-serif; font-size:13px; font-weight:bold; line-height:1.6; text-decoration:none; color:#17b; border:0; outline:0; padding:0; margin:0;" href="http://www.freebase.com/view/user/daepark/validate" target="_blank" > Html5 Validator </a> </div> <div style="vertical-align:top; border:1px solid #ddd; outline:0; padding:0; margin:0; position: relative; width:400px; height:220px; overflow:auto; background-color:#fff"> <img src="http://img.freebase.com/api/trans/image_thumb/user/daepark/validate?pad=1&amp;errorid=%2Ffreebase%2Fno_image_png&amp;maxheight=150&amp;mode=fillcropmid&amp;maxwidth=150" title="Html5 Validator" style="border:0; outline:0; padding: 0; margin: 28px auto; display: block;"> </div> </span> </form> </div>


<p>Related posts:<ol><li><a href='http://ropox.net/archives/15662' rel='bookmark' title='Permanent Link: HTML5 and CSS3 Readiness Visualization'>HTML5 and CSS3 Readiness Visualization</a> <small>Paul Irish and Divya Manian have created a fun visualization...</small></li>
<li><a href='http://ropox.net/archives/7306' rel='bookmark' title='Permanent Link: YouTube and Vimeo turn on HTML5 video tag'>YouTube and Vimeo turn on HTML5 video tag</a> <small>At Google I/O the team showed a demo of YouTube...</small></li>
<li><a href='http://ropox.net/archives/3739' rel='bookmark' title='Permanent Link: IE 8 Launches at MIX09, probably without one of your features'>IE 8 Launches at MIX09, probably without one of your features</a> <small>You may have noticed that day 2 at MIX was...</small></li>
</ol></p>
<p><a href="http://feedads.g.doubleclick.net/~a/SHvmx6cmDQyJtrvUXrOsMjdIldw/0/da"><img src="http://feedads.g.doubleclick.net/~a/SHvmx6cmDQyJtrvUXrOsMjdIldw/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/SHvmx6cmDQyJtrvUXrOsMjdIldw/1/da"><img src="http://feedads.g.doubleclick.net/~a/SHvmx6cmDQyJtrvUXrOsMjdIldw/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=t3wAeyHv06g:_5Ks6YJ25Lg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=t3wAeyHv06g:_5Ks6YJ25Lg:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=t3wAeyHv06g:_5Ks6YJ25Lg:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?i=t3wAeyHv06g:_5Ks6YJ25Lg:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=t3wAeyHv06g:_5Ks6YJ25Lg:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=7Q72WNTAKBA" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ropox.net/archives/28258/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://ropox.net/archives/28258</feedburner:origLink></item>
		<item>
		<title>On The Go Διαγωνισμός!</title>
		<link>http://feedproxy.google.com/~r/ropox/jthb/~3/2uBFCUW-9wc/28115</link>
		<comments>http://ropox.net/archives/28115#comments</comments>
		<pubDate>Mon, 13 Dec 2010 08:36:32 +0000</pubDate>
		<dc:creator>ropox</dc:creator>
				<category><![CDATA[My Projects]]></category>
		<category><![CDATA[contest]]></category>
		<category><![CDATA[διαγωνισμός]]></category>

		<guid isPermaLink="false">http://ropox.net/?p=28115</guid>
		<description><![CDATA[Ξεκινάει σήμερα ο διαγωνισμός ON The Go !!. μπείτε στο www.onthego.gr και αρχίστε να ποστάρετε και αυτοί που ποστάρουν τα περισσότερα posts θα κερδίσουν διάφορα δώρα


Related posts:<ol><li><a href='http://ropox.net/archives/52' rel='bookmark' title='Permanent Link: business internet lines in greece'>business internet lines in greece</a> <small>Τόσα έχουν ακουστεί για τους παρόχους στην ελλάδα και τα...</small></li>
</ol>]]></description>
			<content:encoded><![CDATA[
<p>Ξεκινάει σήμερα ο <a href="http://www.onthego.gr/home" target="_blank">διαγωνισμός ON The Go</a> !!. μπείτε στο <a href="http://www.onthego.gr/" target="_blank">www.onthego.gr</a> και αρχίστε να ποστάρετε και αυτοί που ποστάρουν τα περισσότερα posts θα κερδίσουν <a href="http://www.onthego.gr/contest" target="_blank">διάφορα δώρα</a><br />
<br/><br/></p>
<p><a href="http://onthego.gr/home"><img class="aligncenter size-full wp-image-28117" title="onthegohome" src="http://ropox.net/wp-content/uploads/2010/12/onthegohome1.jpg" alt="" width="600" height="477" /></a></p>
<p style="text-align: center;"><a href="http://onthego.gr/contest"><img class="aligncenter size-full wp-image-28118" title="διαγωνισμός On The Go" src="http://ropox.net/wp-content/uploads/2010/12/onthegocontest.jpg" alt="" width="600" height="524" /></a></p>
<p style="text-align: center;"><a href="http://onthego.gr"><br />
</a></p>

<p><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://ropox.net/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/></a> </p>

<p>Related posts:<ol><li><a href='http://ropox.net/archives/52' rel='bookmark' title='Permanent Link: business internet lines in greece'>business internet lines in greece</a> <small>Τόσα έχουν ακουστεί για τους παρόχους στην ελλάδα και τα...</small></li>
</ol></p>
<p><a href="http://feedads.g.doubleclick.net/~a/UcmHrkbWN5IDAjaRpDaCUDHdl3s/0/da"><img src="http://feedads.g.doubleclick.net/~a/UcmHrkbWN5IDAjaRpDaCUDHdl3s/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/UcmHrkbWN5IDAjaRpDaCUDHdl3s/1/da"><img src="http://feedads.g.doubleclick.net/~a/UcmHrkbWN5IDAjaRpDaCUDHdl3s/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=2uBFCUW-9wc:9tEoX_de0tc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=2uBFCUW-9wc:9tEoX_de0tc:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=2uBFCUW-9wc:9tEoX_de0tc:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?i=2uBFCUW-9wc:9tEoX_de0tc:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=2uBFCUW-9wc:9tEoX_de0tc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=7Q72WNTAKBA" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ropox.net/archives/28115/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://ropox.net/archives/28115</feedburner:origLink></item>
		<item>
		<title>7 Essential Red Flags to Watch Out for in New Clients</title>
		<link>http://feedproxy.google.com/~r/ropox/jthb/~3/SKcyI17nYHo/28131</link>
		<comments>http://ropox.net/archives/28131#comments</comments>
		<pubDate>Tue, 07 Dec 2010 11:30:31 +0000</pubDate>
		<dc:creator>ropox</dc:creator>
				<category><![CDATA[Metabloging]]></category>
		<category><![CDATA[web 2.0]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[business]]></category>

		<guid isPermaLink="false">http://www.webdesignerdepot.com/?p=18345</guid>
		<description><![CDATA[Working with clients is one of the most difficult parts of being a web designer. It&#8217;s a challenge which we face each and every day, regardless of whether we work in-house, as freelancers, or as agency owners. Some clients are great, while others leave us tearing our hair our and wondering why we felt the [...]


No related posts.]]></description>
			<content:encoded><![CDATA[
<p><a rel="attachment wp-att-18357" href="http://ropox.net/?attachment_id=18357"><img class="alignleft size-full wp-image-18357" src="http://netdna.webdesignerdepot.com/uploads/2010/07/postimg.jpg" alt="postimg" width="200" height="160" /></a>Working with clients is one of the most difficult parts of being a web designer.</p>
<p>It’s a challenge which we face each and every day, regardless of whether we work in-house, as freelancers, or as agency owners.</p>
<p>Some clients are great, while others leave us tearing our hair our and wondering why we felt the need to subject ourselves to this line of work.</p>
<p>While some problems with clients can be put down to poor communication by both parties, many times we can identify clients which are going to be difficult before we even start working with them.</p>
<p>Today we’ll take a look at seven ways to make sure you don’t end up as a regular contributor to <a href="http://clientsfromhell.net">ClientsFromHell.net</a>. <span id="more-18345"> </span></p>
<h1>1. They Want To Argue on Price</h1>
<p><a rel="nofollow" href="http://www.flickr.com/photos/refractedmoments/223052548/"><img class="alignnone size-full wp-image-18350" src="http://netdna.webdesignerdepot.com/uploads/2010/07/1.jpg" alt="1" width="615" height="400" /></a></p>
<p>This is probably the most common of all red flags. A client who wants to argue on price is a client who doesn’t respect, understand, or value the work of a web designer. If you hear statements such as <em>“I have a nephew who can do the Photoshop for $50″</em> – run a mile.</p>
<p>Other common issues surrounding price and payment include not wanting to pay a deposit before the commencement of work and trying to get you to agree to payment clauses. For example: <em>“Our new website must receive X amount of traffic by X date in order for the final 25% to become payable.”</em></p>
<p>This is not acceptable. You are a professional providing professional services, so make sure you are polite but firm with the price which you have quoted. The only way to increase the perceived value of web design as a service is if we hold steady on this issue.</p>
<p>Some clients think that they should be able to pay whatever they feel like for services, because they aren’t products with fixed prices. This is memorably depicted in <a href="http://www.youtube.com/watch?v=R2a8TRSgzZY">The Client Vendor Relationship</a> by Scofield Editorial.</p>
<p><br class="spacer_" /></p>
<h1>2. They Need it Done Yesterday</h1>
<p><a rel="nofollow" href="http://www.flickr.com/photos/34419934@N03/3205000902/in/photostream/"><img class="alignnone size-full wp-image-18351" src="http://netdna.webdesignerdepot.com/uploads/2010/07/2.jpg" alt="2" width="615" height="400" /></a></p>
<p>Probably the next most common red flag encountered: clients who need their project completed yesterday, or at the very least by the end of the week.</p>
<p>Not understanding or caring about the amount of time needed in the web design process is another sure sign of a poor client. Not understanding, in principle, is OK. The not caring part is the real issue. Almost all clients with an immediately pressing deadline aren’t open to suggestion, their mind is made up.</p>
<p>Web design at any level beyond the most basic of sites takes a significant amount of time. The reality of the situation is that in the overwhelming majority of cases it wouldn’t even be possible to meet their deadline if you worked all day and all night.</p>
<p>I once left a client’s office at 8 PM on a Monday and had the client shouting at me on the phone at 9 AM on Tuesday asking why the next design revision hadn’t been completed. Needless to say, for that and other reasons, the project didn’t work out.</p>
<p><br class="spacer_" /></p>
<h1>3. They Have an Existing Website Which Sucks</h1>
<p><a href="http://theoatmeal.com/comics/design_hell"><img class="image-border" title="oatmeal" src="http://netdna.webdesignerdepot.com/uploads/2010/07/oatmeal.jpg" alt="" width="615" height="450" /></a></p>
<p>My own trademarked indicator of how to spot a nightmare client. It’s easy to think that if a client has an existing website which sucks, that they must have had a bad web designer. What is true much more of the time is that they had a good web designer and they screwed up the site all by themselves.</p>
<p>Here’s the thing, and The Oatmeal summed this up perfectly in their comic <a href="http://theoatmeal.com/comics/design_hell">How a Web Design Goes Straight to Hell</a>, clients often have an overwhelming knack for screwing up websites. Looking at their current website can often offer a pretty clear indicator of what sort of client they’ll be.</p>
<p>Along the same lines, also depicted in aforementioned comic, if the client has a poor relationship with their last web designer then it could be a pretty good indicator that they’re going to end up having a poor relationship with you. I’ve personally never met a client who complained about their last web designer and then turned out to be loads of fun to work with.</p>
<p>The best clients already have great websites. They researched what they wanted, they worked with a great designer, the website is great, and now they want to work with you to take it to the next level.</p>
<p><br class="spacer_" /></p>
<h1>4. The Person Managing the Project Built the Current Website</h1>
<p><a rel="nofollow" href="http://www.flickr.com/photos/irinaslutsky/2163545321/"><img class="alignnone size-full wp-image-18353" src="http://netdna.webdesignerdepot.com/uploads/2010/07/4.jpg" alt="4" width="615" height="400" /></a></p>
<p>A sure-fire way to doom a project before it ever gets of the ground. If the person who you’re working for is the person who created the website which you’re redesigning, then they’re going to take everything personally.</p>
<p>Not only are they going to take everything personally, but they are going to want to offer their input, advice, and opinions every single step of the way. This is never more true than if the marketing manager is the person who runs the current site. Statements such as <em>“can we make it flash”</em> and <em>“can we make the logo bigger”</em> were born from clients such as this.</p>
<p>The fact of the matter is that the person who is paying you needs to be at least slightly impartial about the website which you’re creating for them. If they have a personal connection or commitment then the chances are that their own personal preferences will get in the way of important decisions.</p>
<p>For designers in particular, this type of client is guaranteed to be a pain from the get-go. If this red flag is present, then nine times out of ten red flag number three will also be there.</p>
<p><br class="spacer_" /></p>
<h1>5. They Can’t Communicate</h1>
<p><a rel="nofollow" href="http://www.flickr.com/photos/camardella/4338208230/in/photostream/"><img class="alignnone size-full wp-image-18354" src="http://netdna.webdesignerdepot.com/uploads/2010/07/5.jpg" alt="5" width="615" height="400" /></a></p>
<p>One of the more sneaky red flags, this one can creep up on you and knock you down when you’re least expecting it. Poor communicators come in all shapes and sizes. A client who seems like a great communicator socially does not always translate into a client who is a great communicator professionally.</p>
<p>The best way to gauge this particular metric is through multiple channels of communication. Talking on the phone, talking in person, writing via email, writing via project management software. How well are they able to tell you what they want?</p>
<p>Some of the classic statements used by clients who can’t communicate are <em>“I don’t know what I want, but I’ll know it when I see it.”</em> and <em>“I want it to have more [pop/jazz/edge/whoosh/sex/shine/glint]“</em> – these people just don’t know how to say what they mean and as a result it’s almost impossible to please them.</p>
<p>Communication is the most essential part of the web design process and without it a working relationship cannot go smoothly.</p>
<p><br class="spacer_" /></p>
<h1>6. They Want Constant Meetings</h1>
<p><a rel="nofollow" href="http://www.flickr.com/photos/tiarescott/69821764/in/photostream/"><img class="alignnone size-full wp-image-18355" src="http://netdna.webdesignerdepot.com/uploads/2010/07/6.jpg" alt="6" width="615" height="400" /></a></p>
<p>The needy client is sure of only one thing, they don’t know what they’re doing and they don’t trust you to do it. To make up for their insecurities, they want to see you regularly so that you can hold their hand at every turn. With this client you’ll end up spending more time in meetings with them than you will on design or code.</p>
<p>The needy client will eventually drain you of all your time an energy. In extreme cases they’ll even ask you to work at their offices. They don’t trust you, they want to keep an eye on you and they want you to be right there whenever they have a question.</p>
<p>This red flag will often show itself in combination with the <em>“Can’t Communicate”</em> red flag. Their own inability to communicate leads them to believe that you don’t understand what they want, (this part is actually justified, most of the time you have no idea what they want because they themselves have no idea what they want), so they want to see you often to ask about more <em>‘pop’</em> and<em> ‘flare’</em>.</p>
<p><br class="spacer_" /></p>
<h1>7. They Want an Ongoing Relationship</h1>
<p><a rel="nofollow" href="http://www.flickr.com/photos/agautam2y/4245363882/in/photostream/"><img class="alignnone size-full wp-image-18356" src="http://netdna.webdesignerdepot.com/uploads/2010/07/7.jpg" alt="7" width="615" height="400" /></a></p>
<p>Finally, the ultimate red flag. A client who talks constantly about how they want an<em> “ongoing relationship”</em> is a client to avoid like the plague.</p>
<p>In a healthy professional relationship both parties know that if the project goes well, and if the opportunity presents itself, then they will work together again. A client who is insecure (number 6) and had a bad relationship with their last designer (number 3) wants to hang on to the next guy like he’s their holy savior.</p>
<p>In extreme cases these clients will talk about how they want to make you <em>“part of the team”</em> or <em>“part of the family”</em>. These are also the clients that are most likely to try to tempt you with offers of revenue or stock in the company in place of some part of your fee. They want to lock you in and own you.</p>
<p>This is the client who is going to call you at eleven at night because they had some great (read: awful) new idea that they just had to run past your urgently, just in case you were relaxing and going to bed instead of working on their site. Remember, you’re part of the family now, they own you.</p>
<p><br class="spacer_" /></p>
<h1>Conclusion</h1>
<p>Many of these issues <em>can</em> come down to uneducated clients, and as many other articles in the past have stressed: educating clients is extremely important. It’s your job to help them make the right decision, not laugh at them for not knowing what it is. Sometimes however, they can’t be helped.</p>
<p>We all have bills and mortgages to pay. Sometimes people say that they don’t have the luxury of choosing their clients in so much detail. Just keep in mind that a bad client will cost you money, not make you money. These are the types of people who will waste your time for two months and then with-hold payment.</p>
<p>This is just a blog post, these aren’t commandments written in stone. There are exceptions to every rule and it’s up to you to use your own judgement and common sense to identify the red flags as they come up. Hopefully, this post will have simply given you a few tips on things to look out for.</p>
<p><br class="spacer_" /></p>
<p><em>This post was authored exclusively for WDD by <a href="http://john.onolan.org/">John   O’Nolan</a>,  a seasoned web designer, writer and entrepreneur based in   Surrey in  the United Kingdom. John loves to talk to people, so why not <a rel="nofollow" href="http://twitter.com/johnonolan">@JohnONolan</a> on twitter too?</em></p>
<p><em><strong>Do you have any other essential red flags to watch out for in clients? Have you found any strong indicators to judge good and bad clients by?</strong></em></p>
<p><br class="spacer_" /><br />
If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S</p>
<p><a href="http://www.webdesignerdepot.com/2010/12/7-essential-red-flags-to-watch-out-for-in-new-clients/">Source</a><!-- p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;} --></p>



<p>No related posts.</p>
<p><a href="http://feedads.g.doubleclick.net/~a/0o3vv0qfPKKNMrFo8GjUl6OJs2c/0/da"><img src="http://feedads.g.doubleclick.net/~a/0o3vv0qfPKKNMrFo8GjUl6OJs2c/0/di" border="0" ismap="true"></img></a><br/>
<a href="http://feedads.g.doubleclick.net/~a/0o3vv0qfPKKNMrFo8GjUl6OJs2c/1/da"><img src="http://feedads.g.doubleclick.net/~a/0o3vv0qfPKKNMrFo8GjUl6OJs2c/1/di" border="0" ismap="true"></img></a></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=SKcyI17nYHo:6s-owKL7Oqw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=SKcyI17nYHo:6s-owKL7Oqw:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=SKcyI17nYHo:6s-owKL7Oqw:V_sGLiPBpWU"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?i=SKcyI17nYHo:6s-owKL7Oqw:V_sGLiPBpWU" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ropox/jthb?a=SKcyI17nYHo:6s-owKL7Oqw:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ropox/jthb?d=7Q72WNTAKBA" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ropox.net/archives/28131/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://ropox.net/archives/28131</feedburner:origLink></item>
	</channel>
</rss>

