Congratulations!

[Valid RSS] This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

Source: http://handmadecssdesign.com/feed/

  1. <?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
  2. xmlns:content="http://purl.org/rss/1.0/modules/content/"
  3. xmlns:wfw="http://wellformedweb.org/CommentAPI/"
  4. xmlns:dc="http://purl.org/dc/elements/1.1/"
  5. xmlns:atom="http://www.w3.org/2005/Atom"
  6. xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  7. xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
  8. >
  9.  
  10. <channel>
  11. <title>Handmade CSS Design</title>
  12. <atom:link href="http://handmadecssdesign.com/feed/" rel="self" type="application/rss+xml" />
  13. <link>http://handmadecssdesign.com</link>
  14. <description>:: ACCESSIBILITY - AJAX - CSS - SEO - XHTML - DESIGN - PHOTOGRAPHY</description>
  15. <lastBuildDate>Mon, 06 Feb 2017 16:05:12 +0000</lastBuildDate>
  16. <language>en-US</language>
  17. <sy:updatePeriod>hourly</sy:updatePeriod>
  18. <sy:updateFrequency>1</sy:updateFrequency>
  19. <generator>https://wordpress.org/?v=4.7.2</generator>
  20. <site xmlns="com-wordpress:feed-additions:1">14876710</site> <item>
  21. <title>Tutorial2: Safari support for rounded borders on an embedded image</title>
  22. <link>http://handmadecssdesign.com/blog/tutorial2-safari-support-for-rounded-borders-on-an-embeded-image/</link>
  23. <comments>http://handmadecssdesign.com/blog/tutorial2-safari-support-for-rounded-borders-on-an-embeded-image/#respond</comments>
  24. <pubDate>Fri, 14 Mar 2014 19:16:07 +0000</pubDate>
  25. <dc:creator><![CDATA[admin]]></dc:creator>
  26. <category><![CDATA[BLOG]]></category>
  27.  
  28. <guid isPermaLink="false">http://handmadecssdesign.com/?p=2373</guid>
  29. <description><![CDATA[Welcome to Handmade CSS Design’s second tutorial, we hope you enjoy it and find it useful. With more and more people making use of Safari on a PC, Mac, iPad or iPhone compatibility for this browser is all the more important. So the designer in your team has asked you to add an embedded image [&#8230;]]]></description>
  30. <content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-2376" src="http://handmadecssdesign.com/wp-content/medialibrary//img-border-for-safari-blog.png" alt="Image border for Safari" width="994" height="483" srcset="http://handmadecssdesign.com/wp-content/medialibrary/img-border-for-safari-blog.png 994w, http://handmadecssdesign.com/wp-content/medialibrary/img-border-for-safari-blog-250x121.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/img-border-for-safari-blog-640x310.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/img-border-for-safari-blog-460x223.png 460w" sizes="(max-width: 994px) 100vw, 994px" /></p>
  31. <p>Welcome to Handmade CSS Design’s second tutorial, we hope you enjoy it and find it useful.</p>
  32. <p>With more and more people making use of Safari on a PC, Mac, iPad or iPhone compatibility for this browser is all the more important.<span id="more-2373"></span></p>
  33. <p><img class="alignleft size-full wp-image-2377" src="http://handmadecssdesign.com/wp-content/medialibrary//white-crown.png" alt="Image of a white crown" width="216" height="216">So the designer in your team has asked you to add an embedded image (the one on the left here) into a paragraph so that it can be automatically updated via the client and their CMS. Cool, but we have a problem and it is called Safari, lets say we place it directly into a &lt;p&gt; tag with NO place for a div to wrap the image. Now lets say you need for this to be centered and then have rounded corners a background colour and a nice thick border.</p>
  34. <p>So this is simple you might think, till you go to debug in Safari and find that your image is nice and round but it is missing the border.</p>
  35. <p>Below I have written the code which solves this issue with an explanation to each part thereof&#8230;</p>
  36. <h3>HTML</h3>
  37. <p>&lt;div class=&#8221;textc&#8221;&gt;</p>
  38. <p>&lt;p&gt;&lt;img src=&#8221;path/to/image.png&#8221; alt=&#8221;Image of a Crown&#8221; /&gt;&lt;/p&gt;</p>
  39. <p>&lt;/div&gt;</p>
  40. <h3>CSS 3</h3>
  41. <p>Below we align our text to the center, as the image is in a paragraph this will be treated as text and be horizontally centered. We do this as we cannot know the size of the image as it can change</p>
  42. <p>.textc { text-align:center; }</p>
  43. <p>Below is a typical paragraph which will be set to 100% of the available width, add your padding or margin as you normally do.</p>
  44. <p>p { width:100%; height:auto; padding:0%; margin:100%; }</p>
  45. <p>Below we provide that nice blue background colour. Then and this is where the magic happens, instead of a border, we use the CSS3 property the box shadow and set all its values, the horizontal shift, vertical shift and spread to zero. We only apply a width to the size of the shadow, thereby producing a solid border around the image. Last but not least we give the image a border of 50% so that it will be converted into a circle.</p>
  46. <p>p img {&nbsp;background-color:#0A66B3; -webkit-box-shadow:0px 0px 0px 6px #FFFFFF; box-shadow:0px 0px 0px 6px #FFFFFF; -webkit-border-radius:50%; border-radius:50%; }</p>
  47. <p>NOTE: This will ONLY be supported by modern browsers IE9 and upwards. For backwards compatibility without the pretty rounded corners as they are not supported, you may add the following in the head of your site&#8217;s HTML&#8230;</p>
  48. <p>What the code below is stating is that if the browser is IE8 or less then apply a solid white border of 6px to the image in the paragraph.</p>
  49. <p>&lt;!&#8211;[if lte IE 8]&gt;</p>
  50. <p>&lt;style type=&#8221;text/css&#8221;&gt;</p>
  51. <p>p img { border:6px solid #FFFFFF; }</p>
  52. <p>&lt;/style&gt;<br />
  53. &lt;![endif]&#8211;&gt;</p>
  54. <p>And there you have it , a border that works in Safari.</p>
  55. <p>Leave your constructive comments, suggestions below and we will also gladly answer any questions you may have regarding the above.</p>
  56. ]]></content:encoded>
  57. <wfw:commentRss>http://handmadecssdesign.com/blog/tutorial2-safari-support-for-rounded-borders-on-an-embeded-image/feed/</wfw:commentRss>
  58. <slash:comments>0</slash:comments>
  59. <post-id xmlns="com-wordpress:feed-additions:1">2373</post-id> </item>
  60. <item>
  61. <title>Back in time!</title>
  62. <link>http://handmadecssdesign.com/portfolio/photography/back-in-time/</link>
  63. <pubDate>Sun, 26 Feb 2012 16:47:58 +0000</pubDate>
  64. <dc:creator><![CDATA[admin]]></dc:creator>
  65. <category><![CDATA[Photography]]></category>
  66.  
  67. <guid isPermaLink="false">http://handmadecssdesign.com/?p=1504</guid>
  68. <description><![CDATA[Creative Analogue Photography Over Christmas Santa brought me a Diana F+ from Lomography, which is a retro design analogue photographic camera. It was my first experience with a completely manual, medium format 120 camera! The lightweight plastic body, the simple shutter and the stylish retro 60’s design clip-on flash surprised me. Being accustomed to the [&#8230;]]]></description>
  69. <content:encoded><![CDATA[<h4>Creative Analogue Photography<span id="more-1504"></span></h4>
  70. <p><img class="alignnone size-medium wp-image-1505" title="Handmade CSS Design Christmas Tree photograph for the Back in Time Article" src="http://handmadecssdesign.com/wp-content/medialibrary//christmas-tree-blog-640x619.png" alt="Handmade CSS Design Christmas Tree photograph for the Back in Time Article" width="640" height="619" srcset="http://handmadecssdesign.com/wp-content/medialibrary/christmas-tree-blog-640x619.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/christmas-tree-blog-250x241.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/christmas-tree-blog.png 980w" sizes="(max-width: 640px) 100vw, 640px" /></p>
  71. <p><img class="alignleft size-thumbnail wp-image-1509" title="Image of the Diana F+ camera from Lomography" src="http://handmadecssdesign.com/wp-content/medialibrary//dianaf_large-250x121.jpg" alt="Image of the Diana F+ camera from Lomography" width="250" height="121" srcset="http://handmadecssdesign.com/wp-content/medialibrary/dianaf_large-250x121.jpg 250w, http://handmadecssdesign.com/wp-content/medialibrary/dianaf_large-640x310.jpg 640w, http://handmadecssdesign.com/wp-content/medialibrary/dianaf_large-460x223.jpg 460w, http://handmadecssdesign.com/wp-content/medialibrary/dianaf_large.jpg 904w" sizes="(max-width: 250px) 100vw, 250px" />Over Christmas Santa brought me a <a title="Lomography Diana F+ Micro Site" href="http://microsites.lomography.com/diana/cameras/dianaf" target="_blank">Diana F+ from Lomography</a>, which is a retro design analogue photographic camera. It was my first experience with a completely manual, medium format 120 camera!</p>
  72. <p>The lightweight plastic body, the simple shutter and the stylish retro 60’s design clip-on flash surprised me. Being accustomed to the digital format, it felt strange that I couldn’t see the results instantaneously before I had the photographs developed. The developed photographs which at times had a double or triple exposure on one photograph produced both incredible and surprising results, which were dreamy, colour-drenched, and basically mind-blowing images.</p>
  73. <p>In the last three photographs in this article, I experimented by allowing light into the camera by opening the rear door which contains the film for a split second. This in turn created the interesting burn effects on the photograph’s, as well as, parts of the letters from the processing are revealed, kind of cool, hey!</p>
  74. <p>It was a really fun and thrilling first fully analogue experiment, now shared with you to!</p>
  75. <p>I always chase perfection in my digital photographs, but in this case the opposite rings true, which is: imperfection matters!</p>
  76. <p> [<a href="http://handmadecssdesign.com/portfolio/photography/back-in-time/">See image gallery at handmadecssdesign.com</a>] </p>
  77. <h4>Technical Specifications:</h4>
  78. <p>Film format: 120, natural colour, 400 ISO, 12-shot (5.2&#215;5.2cm)<br />
  79. Size: 5&#8243; x 3.75&#8243; x 3&#8243; (12.5cm x 9.5cm x 7.6cm)<br />
  80. Variable shutter (daytime &amp; &#8220;B&#8221; for unlimited long exposures)<br />
  81. Variety of removable interchangeable lenses:</p>
  82. <ul>
  83. <li>75mm Standard Lens</li>
  84. <li>55mm Wide-Angle Lens</li>
  85. </ul>
  86. <p>Additional Lighting: <a href="http://microsites.lomography.com/diana/accessories/diana-flash-black">Diana F+ Flash</a></p>
  87. ]]></content:encoded>
  88. <post-id xmlns="com-wordpress:feed-additions:1">1504</post-id> </item>
  89. <item>
  90. <title>Fivess</title>
  91. <link>http://handmadecssdesign.com/portfolio/websites/fivess/</link>
  92. <pubDate>Thu, 03 Nov 2011 09:51:53 +0000</pubDate>
  93. <dc:creator><![CDATA[admin]]></dc:creator>
  94. <category><![CDATA[Websites]]></category>
  95.  
  96. <guid isPermaLink="false">http://handmadecssdesign.com/?p=1464</guid>
  97. <description><![CDATA[<img class="alignleft size-full wp-image-1471" title="Fivess Logo" src="http://handmadecssdesign.com/wp-content/medialibrary//fivess-index-logo.png" alt="Image of the Fivess Logo" width="201" height="68" />Recently we were approached by Fivess to carry out the design of their website. We were exceptionally excited to be able to partake in the design of this project and with the soft launch of the site having taken place we have taken the liberty to share a brief entry in our Portfolio regarding Fivess.
  98.  
  99. As soon as the project exits it's BETA stage of development we will update this entry and show you a whole lot more of the project's finer details, so go on what are you waiting for take a look and even better go create or purchase your Fivess.]]></description>
  100. <content:encoded><![CDATA[<h4>Site Design</h4>
  101. <p><span id="more-1464"></span><br />
  102. <img class="alignnone size-full wp-image-1465" title="Index Page of the Fivess Website Design" src="http://handmadecssdesign.com/wp-content/medialibrary//fivess-portfolio-post.png" alt="Image of the Index Page of the Fivess Website Design" width="638" height="1509" srcset="http://handmadecssdesign.com/wp-content/medialibrary/fivess-portfolio-post.png 638w, http://handmadecssdesign.com/wp-content/medialibrary/fivess-portfolio-post-270x640.png 270w" sizes="(max-width: 638px) 100vw, 638px" /></p>
  103. <h4>In short</h4>
  104. <p>We were asked to develop the Graphical User Interface for the site. The brief from the client was that the design be modern, cheerful, colourful and with large prompt to action buttons.</p>
  105. <h4>The details</h4>
  106. <p>We decided to use stick figures to represent the client&#8217;s community in the main promotional area of the index page with some of them holding the number 5 representing the fivess service which they had purchased. With a big bright Orange promt to action area asking you &#8220;What would you do for 5 Euro?&#8221; and then the video button right next to it to drive home the fivess concept.</p>
  107. <p><img class="alignnone size-full wp-image-1466" title="Fivess Main Promotion Area" src="http://handmadecssdesign.com/wp-content/medialibrary//fivess_index_main_promo_area.png" alt="Image of the Fivess Main Promotion Area" width="638" height="364" srcset="http://handmadecssdesign.com/wp-content/medialibrary/fivess_index_main_promo_area.png 638w, http://handmadecssdesign.com/wp-content/medialibrary/fivess_index_main_promo_area-250x142.png 250w" sizes="(max-width: 638px) 100vw, 638px" /><br />
  108. Further more the sidebar of the site becomes more minimal as you drill down and finally reach an individual fivess service where only the vital information is available so as not to distract the person viewing the page and allowing them to focus on the reason that they are there, to purchase a fivess or add a new fivess.</p>
  109. <p>We are pleased to announce that the site has now been soft launched in beta format and can be visited via the link below. We have been advised that the site should be out of BETA mode in the next month and we look forward to seeing this exciting site in it&#8217;s final form.</p>
  110. <h4>Link to the site:</h4>
  111. <p>Fivess &#8211; <a title="Takes you the Fivess Website" href="http://www.fivess.gr/" target="_blank">www.fivess.gr</a></p>
  112. ]]></content:encoded>
  113. <post-id xmlns="com-wordpress:feed-additions:1">1464</post-id> </item>
  114. <item>
  115. <title>iOS &#038; Android friendly Web Animations from Adobe Edge</title>
  116. <link>http://handmadecssdesign.com/blog/ios-android-friendly-web-animations-from-adobe-edge/</link>
  117. <comments>http://handmadecssdesign.com/blog/ios-android-friendly-web-animations-from-adobe-edge/#comments</comments>
  118. <pubDate>Fri, 05 Aug 2011 09:41:25 +0000</pubDate>
  119. <dc:creator><![CDATA[admin]]></dc:creator>
  120. <category><![CDATA[BLOG]]></category>
  121.  
  122. <guid isPermaLink="false">http://handmadecssdesign.com/?p=1454</guid>
  123. <description><![CDATA[Ever since CSS2.0 and the introduction of the semantic web, I have been opposed to the use of Flash internet animations, for all sorts of reasons, such as…
  124.  
  125. <ul>
  126. <li>Not being Search Engine Optimisation (SEO) Friendly</li>
  127. <li>Requires the Adobe Flash plugin in order to view the animation</li>
  128. <li>For more complex animations requires a lot of CPU (Central Processing Unit) power to drive the animations.</li>
  129. <li>This is a problem due to increased battery consumption on laptops, mobile devices and tablet pc’s such as the iOS (iPad, iPhone) and Android platforms.</li>
  130. <li>Incompatibility with the iPad and iPhone iOS.</li>
  131. </ul>
  132. ]]></description>
  133. <content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1455" title="ios-&amp;-android-friendly-web-animations-from-adobe-edge-blog" alt="Image representing the article - iOS &amp; Android friendly Web Animations from Adobe Edge " src="http://handmadecssdesign.com/wp-content/medialibrary//ios-android-friendly-web-animations-from-adobe-edge-blog.png" width="980" height="475" srcset="http://handmadecssdesign.com/wp-content/medialibrary/ios-android-friendly-web-animations-from-adobe-edge-blog.png 980w, http://handmadecssdesign.com/wp-content/medialibrary/ios-android-friendly-web-animations-from-adobe-edge-blog-250x121.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/ios-android-friendly-web-animations-from-adobe-edge-blog-640x310.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/ios-android-friendly-web-animations-from-adobe-edge-blog-460x223.png 460w" sizes="(max-width: 980px) 100vw, 980px" /></p>
  134. <p>Ever since CSS2.0 and the introduction of the semantic web, I have been opposed to the use of Flash internet animations, for all sorts of reasons, such as…</p>
  135. <ul>
  136. <li>Not being Search Engine Optimisation (SEO) Friendly</li>
  137. <li>Requires the Adobe Flash plugin in order to view the animation</li>
  138. <li>For more complex animations requires a lot of CPU (Central Processing Unit) power to drive the animations.<span id="more-1454"></span></li>
  139. <li>This is a problem due to increased battery consumption on laptops, mobile devices and tablet pc’s such as the iOS (iPad, iPhone) and Android platforms.</li>
  140. <li>Incompatibility with the iPad and iPhone iOS.</li>
  141. <li>Requires specialized skills and expensive software to develop the animations, increasing the end cost to the client.</li>
  142. </ul>
  143. <p>The problem was that as Internet Professionals we had no other option but to use Flash as there was no other viable alternative till now.</p>
  144. <p>A few days ago Adobe the creator the Flash technology introduced Adobe Edge which is a tool promising, as Adobe says…</p>
  145. <p>“Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.”</p>
  146. <p>Effectively this means that even a designer can now design and develop the animations and have them SEO friendly as the outcome will be based on the semantic web and make use of web standards like HTML5, JavaScript and CSS3, Yay!!!!</p>
  147. <p>Even more importantly this means that we finally get completely cross-browser and cross-platform animations without any plugins required which is fantastic news as the animations will also play on the renowned anti Flash animation Ipad and Iphone.</p>
  148. <p>Finally are you one of those people who believe that there is no substantial reasoning for the use of animation on the web other than for games? Well, some might argue that they just add unnecessary weight to a site and without any real need; they end up increasing download times. Most times I agree but if you are creating a website for i.e. children, then that little bit of magic adds to the experience such as… The Happy Hearts microsite or the Fairyland microsite.</p>
  149. <p><em><strong>Note:</strong> the animations are not made using the Adobe Edge animation tool but using the old fashioned Flash animation.</em></p>
  150. <p>All of the above is great so long as you do not need to have backward compatibility and pixel perfect layouts in older browsers such as Internet Explorer 6, 7 and 8.</p>
  151. <p>Finally… I am not entirely convinced that we need to have software such as Adobe’s Edge to create HTML5, CSS3 and JavaScript animations. The code it generates can be created using good old fashioned coding, but the argument is that it saves time and as time costs money the software might win in the end, time will tell.</p>
  152. <p>So… have you used Adobe’s Edge Animation tool? Why not tell us your opinion of it below, we would love to here what you think of it!</p>
  153. ]]></content:encoded>
  154. <wfw:commentRss>http://handmadecssdesign.com/blog/ios-android-friendly-web-animations-from-adobe-edge/feed/</wfw:commentRss>
  155. <slash:comments>2</slash:comments>
  156. <post-id xmlns="com-wordpress:feed-additions:1">1454</post-id> </item>
  157. <item>
  158. <title>Tutorial: Complex site backgrounds without CSS 3</title>
  159. <link>http://handmadecssdesign.com/blog/tutorial-complex-site-backgrounds-without-css-3/</link>
  160. <comments>http://handmadecssdesign.com/blog/tutorial-complex-site-backgrounds-without-css-3/#respond</comments>
  161. <pubDate>Wed, 20 Jul 2011 15:32:28 +0000</pubDate>
  162. <dc:creator><![CDATA[admin]]></dc:creator>
  163. <category><![CDATA[BLOG]]></category>
  164.  
  165. <guid isPermaLink="false">http://handmadecssdesign.com/?p=1420</guid>
  166. <description><![CDATA[Welcome to Handmade CSS Design’s first tutorial, we hope you enjoy it and find it useful.
  167.  
  168. CSS 3 is all the rage now and rightly so, but it has its drawbacks, one of which is a lack of support in older browsers. As we all know support for older browsers is sometimes imperative, so CSS 3 gets moved to the not so critical points in the development of a site.
  169.  
  170. Here I will be showing you how to create complex multi-image backgrounds for your sites that are even compatible in IE6!
  171.  
  172. This article comes following the recent development...]]></description>
  173. <content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1421" title="Tutorial1 - Complex Site Backgrounds without using CSS3" src="http://handmadecssdesign.com/wp-content/medialibrary//complex-site-backgrounds-without-css3-blog.png" alt="image of Tutorial1 - Complex Site Backgrounds without using CSS3" width="994" height="483" srcset="http://handmadecssdesign.com/wp-content/medialibrary/complex-site-backgrounds-without-css3-blog.png 994w, http://handmadecssdesign.com/wp-content/medialibrary/complex-site-backgrounds-without-css3-blog-250x121.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/complex-site-backgrounds-without-css3-blog-640x310.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/complex-site-backgrounds-without-css3-blog-460x223.png 460w" sizes="(max-width: 994px) 100vw, 994px" /></p>
  174. <p>Welcome to Handmade CSS Design’s first tutorial, we hope you enjoy it and find it useful.</p>
  175. <p>CSS 3 is all the rage now and rightly so, but it has its drawbacks, one of which is a lack of support in older browsers. As we all know support for older browsers is sometimes imperative, so CSS 3 gets moved to the not so critical points in the development of a site.</p>
  176. <p>Here I will be showing you how to create complex multi-image backgrounds for your sites that are even compatible in IE6!<span id="more-1420"></span></p>
  177. <p>This article comes following the recent development of an ultra-micro site over at <a href="http://www.expresspublishing.co.uk/elt/upstream/it/" target="_blank" title="Takes you to the Express Publishing Italian Microsite">Express Publishing for the Upstream Italian Educational Books</a>. For the more observant the site in the above link does make use of CSS 3 in the shadow around the main white container a not so critical requirement so can be lost in older browsers.</p>
  178. <p><img class="alignnone size-medium wp-image-1422" title="Screenshot of Upstream Italy" src="http://handmadecssdesign.com/wp-content/medialibrary//upstream-italy-screenshot-640x357.png" alt="Image of a screenshot of Upstream Italy" width="640" height="357" srcset="http://handmadecssdesign.com/wp-content/medialibrary/upstream-italy-screenshot-640x357.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/upstream-italy-screenshot-250x139.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/upstream-italy-screenshot.png 656w" sizes="(max-width: 640px) 100vw, 640px" /></p>
  179. <p>As you can see in the image above the site background would be impossible to create using only the &lt;html&gt; and the &lt;body&gt; tags as it has 3 background areas:</p>
  180. <ol>
  181. <li><strong>Top:</strong> orange and lighter blue area with a dark blue line directly below</li>
  182. <li><strong>Center:</strong> textured background</li>
  183. <li><strong>Bottom:</strong> darker blue area</li>
  184. </ol>
  185. <p>Even though we have 3 elements here in some situations where you have more than this you would simply rinse and repeat the process to obtain the desired results.</p>
  186. <p>One last thing before we get started, as we all know there are many ways in which you can achieve the same conclusion, this is simply one way that works for this case.</p>
  187. <h3>Let’s get our hands dirty then shall we:</h3>
  188. <p>The principles which we will be using today were first (that we know of!) discussed back in 2004 in an <a href="http://www.alistapart.com/articles/onionskin/" target="_blank" title="Takes you to A List Apart's articles">article by Brian Williams on A List Apart entitled Onion Skinned Drop Shadows</a>.</p>
  189. <h3>Step 1:</h3>
  190. <p>All html pages even HTML5 have the following two basic tags the &lt;html&gt; and the &lt;body&gt; which is nested within the &lt;html&gt; tag. So this allows for us to hook onto the &lt;html&gt; tag and start there and then add &lt;div id=”body2”&gt; just under the &lt;body&gt; tag as shown below, should you need more for your design then this is where it is done.</p>
  191. <p><strong> </strong></p>
  192. <p><code class="code-styles"><br />
  193. &lt;html&gt;<br />
  194. &nbsp; &nbsp; &lt;body&gt;<br />
  195. &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=”body2”&gt; &lt;!—for the extra image required --&gt;<br />
  196. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=”container”&gt;  &lt;!-- for the site’s body --&gt;<br />
  197. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=”header”&gt;<br />
  198. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!—in this container you place the sites header and navigation --&gt;<br />
  199. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br />
  200. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=”maincolumn”&gt;<br />
  201. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!—in here you place the code for the sites content --&gt;<br />
  202. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br />
  203. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=”footer”&gt;<br />
  204. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;!—in here you place the code for the sites footer --&gt;<br />
  205. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br />
  206. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br />
  207. &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;<br />
  208. &nbsp; &nbsp; &lt;/div&gt;<br />
  209. &lt;/div&gt;<br />
  210. </code></p>
  211. <p>and the CSS will look like this…</p>
  212. <p><code class="code-styles"><br />
  213. html {<br />
  214. &nbsp; &nbsp; background:#0a66b3 url(../images/site-bkg.png); margin:0 0 0 0; padding: 0 0 0 0;<br />
  215. }<br />
  216. </code></p>
  217. <p><img class="alignleft size-full wp-image-1423" title="Site background which is a repeating pattern" src="http://handmadecssdesign.com/wp-content/medialibrary//site-bkg.png" alt="Image of the site's background which is a repeating pattern" width="20" height="20" /><br />
  218. &lt;&#8211; the textured repeating background and the dark blue colour found in the background.</p>
  219. <p><code class="code-styles"><br />
  220. body {<br />
  221. &nbsp; &nbsp; background:url(../images/site-bkg-top.png) no-repeat top center; margin: 0 0 0 0; padding: 0 0 0 0;<br />
  222. }<br />
  223. </code></p>
  224. <p><img class="alignnone size-medium wp-image-1424" title="Site background top centered image" src="http://handmadecssdesign.com/wp-content/medialibrary//site-bkg-top-640x28.png" alt="Image fo the site's background top centered image" width="640" height="28" srcset="http://handmadecssdesign.com/wp-content/medialibrary/site-bkg-top-640x28.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/site-bkg-top-250x11.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/site-bkg-top-1024x45.png 1024w" sizes="(max-width: 640px) 100vw, 640px" /><br />
  225. <strong>Note:</strong> <em>This image is placed top and center, and 3000px wide (with a 2kb weight so it poses no problems with those whom have a slower connection to the internet) to ensure that even someone with a large screen will not have nasty gaps in the design.</em></p>
  226. <p><code class="code-styles"><br />
  227. #body2 {<br />
  228. &nbsp; &nbsp; background:url(../images/site-bkg-bottom.png) repeat-x bottom; margin: 0 0 0 0; padding: 0 0 0 0;<br />
  229. }<br />
  230. </code></p>
  231. <p><img class="alignleft size-full wp-image-1425" title="Site background bottom horizontally repeating image" src="http://handmadecssdesign.com/wp-content/medialibrary//site-bkg-bottom.png" alt="Image of the site's background bottom horizontally repeating image" width="10" height="160" /></p>
  232. <p>&nbsp;</p>
  233. <p>&nbsp;</p>
  234. <p>&lt;&#8211;  We need this horizontally repeating blue background to hide the textured background above</p>
  235. <p>Note: In this case we know the height of the footer will be fixed!</p>
  236. <p>&nbsp;</p>
  237. <p>&nbsp;</p>
  238. <p>This means that we now have a complete site background!</p>
  239. <h3>Step 2:</h3>
  240. <p>You will have noticed the &lt;div class=”container”&gt; this is the div we will use to center our design with the image we have placed top and center in our background (the &lt;body&gt; tag above) in this case the site’s CSS will look like this…</p>
  241. <p><code class="code-styles"><br />
  242. .container {<br />
  243. &nbsp; &nbsp; position:relative; top:0px; left:0px; width:956px; height:auto; margin: 0 auto;<br />
  244. }<br />
  245. </code></p>
  246. <p><strong>Note:</strong> <em>we have not placed any images here this is used to simply center the whole site to the background using the margin:0 auto; command.</em></p>
  247. <h3>Step 3:</h3>
  248. <p>That just leaves the footer, you will have noticed above that the image is repeated only horizontally and not vertically. This is because for this to work we need a fixed height for the footer which needs to be equal to the height of the…</p>
  249. <p><code class="code-styles"><br />
  250. .footer {<br />
  251. &nbsp; &nbsp; clear:both; position:relative; top:0px; left:0px; height:145px; padding:0 0 0 0; margin:0 0 0 0;<br />
  252. }<br />
  253. </code></p>
  254. <p><strong>Note:</strong> <em>The footer is the same height as the #body2 image this is important so that you do not have any gaps at the bottom of the page.</em></p>
  255. <p>So what happens if you think that things might change in the future?</p>
  256. <p>Well set the height to min-height:145px; overflow:hidden; and the height of your image to say 1000px this will mean that regardless of how much the footer grows, you will still be covered. Let’s say I have to date never seen a footer reach 1000px but you never know what the future may hold.</p>
  257. <p>And bobs yer uncle you have completed your complex CSS 2 site background! That works in all browsers from IE6 upwards.</p>
  258. <p>As you may have noticed we have not gone into to much detail as the subjects we will be covering are not for beginners.</p>
  259. <p>Leave your constructive comments below and we will also gladly answer any questions you may have regarding the above.</p>
  260. ]]></content:encoded>
  261. <wfw:commentRss>http://handmadecssdesign.com/blog/tutorial-complex-site-backgrounds-without-css-3/feed/</wfw:commentRss>
  262. <slash:comments>0</slash:comments>
  263. <post-id xmlns="com-wordpress:feed-additions:1">1420</post-id> </item>
  264. <item>
  265. <title>Power of Social Business Networks vs. old school marketing</title>
  266. <link>http://handmadecssdesign.com/blog/power-of-social-business-networks-vs-old-school-marketing/</link>
  267. <comments>http://handmadecssdesign.com/blog/power-of-social-business-networks-vs-old-school-marketing/#respond</comments>
  268. <pubDate>Thu, 07 Jul 2011 10:27:59 +0000</pubDate>
  269. <dc:creator><![CDATA[admin]]></dc:creator>
  270. <category><![CDATA[BLOG]]></category>
  271.  
  272. <guid isPermaLink="false">http://handmadecssdesign.com/?p=1403</guid>
  273. <description><![CDATA[Business Social Networks work in the same way a client recommends your business to a friend on Facebook, Twitter etc but because your client’s friends also have friends this then networks your company to them even if they do not want or need your business/product or service at this time they will remember that Jack their friend recommended a company for their need in the past, this is how trust is built, expanded exponentially and then converted to profits…
  274.  
  275. What are networks?
  276.  
  277. Networks for our purposes, on the internet, as in all aspects of life are the links between people which are]]></description>
  278. <content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1406" title="Yes, you've got a website, who hasn't? At Handmade CSS Design we can turn it into a powerful Business Social Network for you, helping you build relationships, engage your clients and see your business take off!" src="http://handmadecssdesign.com/wp-content/medialibrary//power-of-social-business-networks-blog-article.png" alt="Image stating Yes, you've got a website, who hasn't? At Handmade CSS Design we can turn it into a powerful Business Social Network for you, helping you build relationships, engage your clients and see your business take off!" width="980" height="475" srcset="http://handmadecssdesign.com/wp-content/medialibrary/power-of-social-business-networks-blog-article.png 980w, http://handmadecssdesign.com/wp-content/medialibrary/power-of-social-business-networks-blog-article-250x121.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/power-of-social-business-networks-blog-article-640x310.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/power-of-social-business-networks-blog-article-460x223.png 460w" sizes="(max-width: 980px) 100vw, 980px" /></p>
  279. <p>The power of word of mouth traditionally brought businesses valuable “client trust” before they even knew your business! All this because a friend who they trust recommended your business based on their experience of your business/product or service.</p>
  280. <p>Business Social Networks work in the same way a client recommends your business to a friend on Facebook, Twitter etc but because your client’s friends also have friends this then networks your company to them even if they do not want or need your business/product or service at this time they will remember that <em>Jack</em> their friend recommended a company for their need in the past, this is how trust is built, expanded exponentially and then converted to profits…<span id="more-1403"></span></p>
  281. <h3>What are networks?</h3>
  282. <p>Networks for our purposes, on the internet, as in all aspects of life are the links between people which are then directly converted into links between people on the internet. From a business point of view this translates to you handing over your business card to a person you met at an e.g. exhibition, seminar etc. and thereby expanding your network of clients. The difference being that a business card is easier to loose or forget. With a business social network, the link is more permanent and the reminder of your product, business or service is updated every time you update the content on your site.</p>
  283. <p>Some statistics to get us started, the average person on Facebook has 130 friends – <a href="http://www.facebook.com/press/info.php?statistics">http://www.facebook.com/press/info.php?statistics</a></p>
  284. <p>Basically the best way to describe this is to explain with an example, you have a Facebook Business Page and a satisfied client has a Facebook Personal Page and they find your Facebook Page say from your site / business card etc. and they decide to click the “like” button on your page to show to their friends that they like and use your business/product or service, they may even write something like “Outstanding service from company X, when I recently bought product Y” on their Facebook Wall.</p>
  285. <p>Let’s say that this person has 10 friends, now instantly all of these people are made aware of the fact that…</p>
  286. <ul>
  287. <li>Company X offers a high quality service</li>
  288. <li>You like company X</li>
  289. <li>You use their services or products</li>
  290. <li>They see all of your promotion messages and news in their timeline</li>
  291. <li>And the best for last you start to build trust, the most important word in business</li>
  292. </ul>
  293. <p>Now out of these 10 friends let’s say 2 people decide that they also like your business/product or service and decide to also “like” you. Now they also see all of the above in their timeline and your one happy client has just introduced you to 2 of their friends or put bluntly 2 prospective clients.</p>
  294. <p>If you reset this example to the beginning you now have a loop for success as sown in the diagram below…</p>
  295. <p>&nbsp;</p>
  296. <p><img class="alignnone size-medium wp-image-1408" title="The Power of Social Business Networks - network growth chart" src="http://handmadecssdesign.com/wp-content/medialibrary//power-of-social-business-networks-network-growth-chart-640x417.png" alt="Image of The Power of Social Business Networks - network growth chart" width="640" height="417" srcset="http://handmadecssdesign.com/wp-content/medialibrary/power-of-social-business-networks-network-growth-chart-640x417.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/power-of-social-business-networks-network-growth-chart-250x162.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/power-of-social-business-networks-network-growth-chart.png 721w" sizes="(max-width: 640px) 100vw, 640px" /></p>
  297. <p>In the example above you can see how this one client can bring you many more potential clients whom are in the beginning just following your company. As you continuously “remind” them of your brand with every new article/promotion/sales offer you continue to develop your relationship with your “friend”.</p>
  298. <p>A while later that “friend” needs your service or product, well they know you and their friend has recommended you after all.  Now think for yourself what would you do? Your company has been investing into this moment and here it counts the most… “the value of trust that has already been gained, nurtured and developed between you and your “friend”, now blooms and this “friend” now becomes a client, and if you look after your client as I know you will do correctly then they will become the 2<sup>nd</sup> client at the top of the example list above and will start a tree of their own.</p>
  299. <h3>It’s a matter of trust…</h3>
  300. <p>“Visitor traffic to the top 10 comparison sites grew on average 158%”</p>
  301. <p>So… what was the reason behind this phenomenal growth? In the Forrester Report of 2010 it stated…</p>
  302. <p>“92% of consumers said that they have more confidence in information found online than they do in anything from a sales clerk or other source.”</p>
  303. <p>and that…</p>
  304. <p>“75% of people don’t believe that companies tell the truth in advertisements.“</p>
  305. <p>That is a staggering statistic which is compounded by the fact that…</p>
  306. <p>“74% of online consumers are influenced by the opinions of others in their purchasing decisions.”</p>
  307. <p>Still not convinced, and want more…</p>
  308. <p>“67% of shoppers spend more online after recommendations from their online community of friends.”</p>
  309. <p>Why would a visitor leave a comment/review or share recommendations within their social network of online friends?</p>
  310. <p>Well… it is about social standing in the community, by sharing you are helping you friends and also it is an opportunity to brag about something that you have just invested in (not just financially but also physically and emotionally) and want to show to your friends and the percentages show that to…</p>
  311. <p>“34% have turned to Social Media to air their feelings about a company”</p>
  312. <p>“26% to express dissatisfaction”</p>
  313. <p>And finally…</p>
  314. <p>“23% to share companies or products they like”</p>
  315. <p>There are many aspects of Business Social Networking that will be of benefit to your company, such as…</p>
  316. <ul>
  317. <li>Increase in sales</li>
  318. <li>Bring your client closer to your business by gaining their trust and then retaining it, thereby developing long term relations with your clients.</li>
  319. <li>Improved perception in brand value through social recommendations, likes, follows etc.</li>
  320. <li>The ability to have fully measurable results from detailed analytics crucial to any business so as to measure the success of your online campaigns.</li>
  321. <li>The ability to harness the power of user.</li>
  322. <li>The most important thing is that following the above you will be able to tailor your products/services to the real needs of your clients.</li>
  323. </ul>
  324. <p>This will allow you to really harness and measure the word-of-mouth marketing in ways that you have never been able to before and help your business become all it can be!</p>
  325. <p>Yes, you&#8217;ve got a website, but we can turn it into a powerful Business Social Network for you, helping you build relationships, engage your clients and see your business take off!</p>
  326. <p>So why not let us here at Handmade CSS Design help you establish that trust and help you set yourself apart from your competitors. For further information or assistance, please feel free to contact Handmade CSS Design on (0030) 6936 266 644 or <a title="Contact Handmade CSS Design via email" href="../contact-us/">send us a quick email here</a>.</p>
  327. <h3>Something Extra</h3>
  328. <ul>
  329. <li>The Economist &#8211; <a title="Video Interview with Nic Newman on News and Social Media titled The new Gatekeepers" href="http://www.economist.com/node/21523685" target="_blank">Video Interview with Nic Newman (former head of future media at the BBC) on News and Social Media titled The new Gatekeepers</a></li>
  330. </ul>
  331. <h3>Sources:</h3>
  332. <ul>
  333. <li>Facebook Press Release – Usage Statistics</li>
  334. <li>Online marketing site – compete.com</li>
  335. <li>The Forrester Report 2010</li>
  336. </ul>
  337. ]]></content:encoded>
  338. <wfw:commentRss>http://handmadecssdesign.com/blog/power-of-social-business-networks-vs-old-school-marketing/feed/</wfw:commentRss>
  339. <slash:comments>0</slash:comments>
  340. <post-id xmlns="com-wordpress:feed-additions:1">1403</post-id> </item>
  341. <item>
  342. <title>BCAid</title>
  343. <link>http://handmadecssdesign.com/portfolio/websites/bcaid/</link>
  344. <pubDate>Fri, 10 Jun 2011 15:12:07 +0000</pubDate>
  345. <dc:creator><![CDATA[admin]]></dc:creator>
  346. <category><![CDATA[Websites]]></category>
  347.  
  348. <guid isPermaLink="false">http://handmadecssdesign.com/?p=1380</guid>
  349. <description><![CDATA[<img src="http://handmadecssdesign.com/wp-content/medialibrary//bcaid-white-logo.png" alt="White version of the BCAid Logo" title="White version of the BCAid Logo" width="430" height="100" class="alignnone size-full wp-image-1384" />
  350. A few months ago the Greek government opened up the Legal Profession here in Greece. With the opening of the Legal profession it also effectively meant that Greek Lawyers now faced even more completion.
  351.  
  352. The Law Office of Mr. Dionisios and Dimitrios Seloulis and Partners approached Handmade CSS Design to develop a Business Social Network for them whereby they could promote their services and develop a professional online community.]]></description>
  353. <content:encoded><![CDATA[<h4>Law Office of Mr. Dionisios and Dimitrios Seloulis and Partners<br />
  354. Business Social Network</h4>
  355. <p><span id="more-1380"></span><br />
  356. <img class="alignnone size-full wp-image-1382" title="The BCAid Index Page" src="http://handmadecssdesign.com/wp-content/medialibrary//bcaid-index.png" alt="Image of the BCAid Index Page" width="638" height="766" srcset="http://handmadecssdesign.com/wp-content/medialibrary/bcaid-index.png 638w, http://handmadecssdesign.com/wp-content/medialibrary/bcaid-index-208x250.png 208w, http://handmadecssdesign.com/wp-content/medialibrary/bcaid-index-533x640.png 533w" sizes="(max-width: 638px) 100vw, 638px" /></p>
  357. <h4>In short</h4>
  358. <p>A few months ago the Greek government opened up the Legal Profession here in Greece. With the opening of the Legal profession it also effectively meant that Greek Lawyers now faced even more completion.</p>
  359. <p>The <a title="Takes you to the site of the Law Office of Mr. Dionisios and Dimitrios Seloulis and Partners" href="http://bcaid.gr/" target="_blank">Law Office of Mr. Dionisios and Dimitrios Seloulis and Partners</a> approached us to develop a Business Social Network for them whereby they could promote their services and develop a professional online community.</p>
  360. <h4>The brief</h4>
  361. <p>We were requested to design the site making use of grey as the main colour and orange for the highlights and that the site was connected to their central LinkedIn Professional Account. Furthermore we were asked to add both RSS and Google Feed burner Email RSS, which would keep their visitors constantly informed the minute a new post was created.</p>
  362. <h4>The details</h4>
  363. <h4>Main Navigation</h4>
  364. <p><img class="alignnone size-full wp-image-1381" title="Close up of the Main Navigation in BCAid" src="http://handmadecssdesign.com/wp-content/medialibrary//bcaid-mainnav.png" alt="Close up image of the Main Navigation in BCAid" width="638" height="183" srcset="http://handmadecssdesign.com/wp-content/medialibrary/bcaid-mainnav.png 638w, http://handmadecssdesign.com/wp-content/medialibrary/bcaid-mainnav-250x71.png 250w" sizes="(max-width: 638px) 100vw, 638px" /><br />
  365. The current and hover states of the main navigation were developed using CSS 3 so as to reduce the amount of images used on the site whilst ensuring that the site was still fully functional in browsers that do not support this feature. The search field was designed to resemble a cut out revealing the site’s background.</p>
  366. <h4>Sidebar</h4>
  367. <p><img class="alignleft size-thumbnail wp-image-1385" title="Image of the Sidebar detail in BCAid" src="http://handmadecssdesign.com/wp-content/medialibrary//bcaid-sidebar-250x182.png" alt="Image of the Sidebar detail in BCAid" width="250" height="182" srcset="http://handmadecssdesign.com/wp-content/medialibrary/bcaid-sidebar-250x182.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/bcaid-sidebar.png 308w" sizes="(max-width: 250px) 100vw, 250px" /><br />
  368. <strong> </strong><br />
  369. The sidebar containers were generated using CSS 3 yet again, except for the orange detail and the horizontal line which are images.</p>
  370. <p>The Sidebar across the site changes according to the needs of the area it represents so as to minimise the clicks a visitor has to make to reach the content of interest.<br />
  371. <strong> </strong><br />
  372. <strong> </strong><br />
  373. <strong> </strong></p>
  374. <h4>Main Content Area</h4>
  375. <p>The <a title="Takes you to BCAid's Client Area" href="http://bcaid.gr/clients/" target="_blank">clients area</a> was developed with the assistance of <a title="Takes you to Desandro's Masonry" href="http://masonry.desandro.com/demos/infinite-scroll.html" target="_blank">David DeSandro’s jQuery Masonry</a> and the result creates an area filled with the law firms clients where there are no CSS float gaps getting in the way, we connected it to the database and the easily updateable results are evident.<br />
  376. <strong> </strong><br />
  377. <img class="alignnone size-full wp-image-1386" title="Image of the Client Area in BCAid" src="http://handmadecssdesign.com/wp-content/medialibrary//bcaid-clients.png" alt="Image of the Client Area in BCAid" width="638" height="738" srcset="http://handmadecssdesign.com/wp-content/medialibrary/bcaid-clients.png 638w, http://handmadecssdesign.com/wp-content/medialibrary/bcaid-clients-216x250.png 216w, http://handmadecssdesign.com/wp-content/medialibrary/bcaid-clients-553x640.png 553w" sizes="(max-width: 638px) 100vw, 638px" /></p>
  378. <h4>Forms</h4>
  379. <p>The forms were all styled using CSS 3 and as always degrade nicely for those using browsers that do not yet support these techniques. As forms are particularly tricky and hated by most we have used a hover state which helps define and identify the form area which you are currently using.</p>
  380. <p>The Captcha code for the site was developed so as not to be intrusive and can be read easily by human beings, who after all have to use it, whilst still offering the desired security against spam.<br />
  381. <strong> </strong><br />
  382. <img class="alignnone size-full wp-image-1387" title="Image of the forms found in BCAid" src="http://handmadecssdesign.com/wp-content/medialibrary//bcaid-forms.png" alt="Image of the forms found in BCAid" width="638" height="766" srcset="http://handmadecssdesign.com/wp-content/medialibrary/bcaid-forms.png 638w, http://handmadecssdesign.com/wp-content/medialibrary/bcaid-forms-208x250.png 208w, http://handmadecssdesign.com/wp-content/medialibrary/bcaid-forms-533x640.png 533w" sizes="(max-width: 638px) 100vw, 638px" /><br />
  383. There are so many more details that can be discussed here but the best for you is to visit their site and see it live.</p>
  384. <p>Within the next month we will have also developed the English version of the site, so keap an eye open on our <a title="See yah in Twitter @handmadecss" href="http://twitter.com/#!/handmadecss" target="_blank">Twitter page &#8211; @handmadecss</a> so as to be one of the first to be notified!</p>
  385. <h4>Link to the site:</h4>
  386. <p>Law Office of Mr. Dionisios and Dimitrios Seloulis and Partners – <a title="Takes you directly to the Law Office of Mr. Dionisios and Dimitrios Seloulis and Partners" href="http://bcaid.gr/" target="_blank">bcaid.gr</a></p>
  387. ]]></content:encoded>
  388. <post-id xmlns="com-wordpress:feed-additions:1">1380</post-id> </item>
  389. <item>
  390. <title>Oriental Expression</title>
  391. <link>http://handmadecssdesign.com/portfolio/photography/oriental-expression-2/</link>
  392. <pubDate>Sun, 17 Apr 2011 09:53:48 +0000</pubDate>
  393. <dc:creator><![CDATA[admin]]></dc:creator>
  394. <category><![CDATA[Photography]]></category>
  395.  
  396. <guid isPermaLink="false">http://handmadecssdesign.com/?p=1349</guid>
  397. <description><![CDATA[Conventional and Creative Photography Part 2: The Creative Shoot Oriental Expression Artistic Studio commissioned me to photograph their Tribal Dance Evening. This is the Second of a two part article of this photo shoot. The brief from the client was as follows: To create memorable photo’s of the event which the participants could retain as [&#8230;]]]></description>
  398. <content:encoded><![CDATA[<h4>Conventional and Creative Photography</h4>
  399. <h4>Part 2: The Creative Shoot</h4>
  400. <p><span id="more-1349"></span><br />
  401. <img class="alignnone size-full wp-image-1339" title="Dancer at the Oriental Expression Tribal Dance Enening" src="http://handmadecssdesign.com/wp-content/medialibrary//oriental-expression-dance.png" alt="Image of a dancer at the Oriental Expression Tribal Dance Enening" width="640" height="426" srcset="http://handmadecssdesign.com/wp-content/medialibrary/oriental-expression-dance.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/oriental-expression-dance-250x166.png 250w" sizes="(max-width: 640px) 100vw, 640px" /><br />
  402. Oriental Expression Artistic Studio commissioned me to photograph their Tribal Dance Evening. This is the Second of a two part article of this photo shoot.</p>
  403. <p>The brief from the client was as follows:</p>
  404. <ul>
  405. <li>To create memorable photo’s of the event which the participants could retain as a keepsake of the event.</li>
  406. <li>To generate creative photo’s which would depict the movement, expression, passion and elaborate clothing of the participants.</li>
  407. </ul>
  408. <p>The lighting conditions of the event were toned down so as to create the appropriate atmosphere for the evening. As a photographer I believe that lighting is the key to achieving the ideal photographic results. The fact that the show was live with its special lighting needs, made this the most exciting and challenging part of the shoot, as I had to adjust to the climate, so as to elevate and express the spectacle without making the subject seem setup or posed for as within a studio shoot.</p>
  409. <p>In the photography of a live subject matter and within a constrained shooting environment with specialised conditions such as this event, my interest is to assist the dancers, musicians and spokes persons convey their passion, movement and expression, and I always try to give each the individual attention and they deserve. The results are evident being both striking, memorable and passionate, with the individual themes as presented being depicted in the very best light possible.</p>
  410. <p> [<a href="http://handmadecssdesign.com/portfolio/photography/oriental-expression-2/">See image gallery at handmadecssdesign.com</a>] </p>
  411. <h4>Technical bits and pieces</h4>
  412. <p>The camera I used is a CANON EOS model 50D, making use of the onboard flash where I was permitted by the dancers and made use of a 17 – 85mm EFS wide angle lens, with a clear filter.</p>
  413. <h4>Cross-link</h4>
  414. <p>This will take you back to the first article of the <a title="Oriental Expression" href="http://handmadecssdesign.com/portfolio/photography/oriental-expression/">Oriental Expression Tribal Dance Evening Shoot</a></p>
  415. <h4>External Links</h4>
  416. <ul>
  417. <li>Oriental Expression &#8211; <a title="Oriental Expression Photo Gallery in Facebook" href="http://www.orientalexpression.gr/" target="_blank">Tribal Dance Evening Photo Gallery</a> ( Sorry no direct link available to the shoot, to view the Gallery,  hover over the &#8220;Gallery&#8221; link in the main navigation and select &#8220;ΒΡΑΔΥΑ TRIBAL FUSION DANCE (9-4-2011)&#8221;)</li>
  418. <li>Facebook &#8211; <a title="Oriental Expression Photo Gallery in Facebook" href="http://www.facebook.com/group.php?gid=170087299576&amp;v=photos" target="_blank">Oriental Expression Photo Gallery</a> with comments on the shoot</li>
  419. </ul>
  420. ]]></content:encoded>
  421. <post-id xmlns="com-wordpress:feed-additions:1">1349</post-id> </item>
  422. <item>
  423. <title>Oriental Expression</title>
  424. <link>http://handmadecssdesign.com/portfolio/photography/oriental-expression/</link>
  425. <pubDate>Sat, 16 Apr 2011 16:15:02 +0000</pubDate>
  426. <dc:creator><![CDATA[admin]]></dc:creator>
  427. <category><![CDATA[Photography]]></category>
  428.  
  429. <guid isPermaLink="false">http://handmadecssdesign.com/?p=1338</guid>
  430. <description><![CDATA[Conventional and Creative Photography Part 1: The Conventional Shoot Oriental Expression Artistic Studio commissioned me to photograph their Tribal Dance Evening. This is the first of a two part article of this photo shoot. The brief from the client was as follows: To create memorable photo’s of the event which the participants could retain as [&#8230;]]]></description>
  431. <content:encoded><![CDATA[<h4>Conventional and Creative Photography</h4>
  432. <h4>Part 1: The Conventional Shoot</h4>
  433. <p><span id="more-1338"></span><br />
  434. <img class="alignnone size-full wp-image-1350" title="A dancer at the Oriental Expression Tribal Dance Enening" src="http://handmadecssdesign.com/wp-content/medialibrary//oriental-expression-dance-2.png" alt="Image of a dancer at the Oriental Expression Tribal Dance Enening" width="640" height="517" srcset="http://handmadecssdesign.com/wp-content/medialibrary/oriental-expression-dance-2.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/oriental-expression-dance-2-250x201.png 250w" sizes="(max-width: 640px) 100vw, 640px" /><br />
  435. Oriental Expression Artistic Studio commissioned me to photograph their Tribal Dance Evening. This is the first of a two part article of this photo shoot.</p>
  436. <p>The brief from the client was as follows:</p>
  437. <ul>
  438. <li>To create memorable photo’s of the event which the participants could retain as a keepsake of the event.</li>
  439. <li>To generate creative photo’s which would depict the movement, expression, passion and elaborate clothing of the participants.</li>
  440. </ul>
  441. <p>The lighting conditions of the event were toned down so as to create the appropriate atmosphere for the evening. As a photographer I believe that lighting is the key to achieving the ideal photographic results. The fact that the show was live with its special lighting needs, made this the most exciting and challenging part of the shoot, as I had to adjust to the climate, so as to elevate and express the spectacle without making the subject seem setup or posed for as within a studio shoot.</p>
  442. <p>In the photography of a live subject matter and within a constrained shooting environment with specialised conditions such as this event, my interest is to assist the dancers, musicians and spokes persons convey their passion, movement and expression, and I always try to give each the individual attention and they deserve. The results are evident being both striking, memorable and passionate, with the individual themes as presented being depicted in the very best light possible.</p>
  443. <p> [<a href="http://handmadecssdesign.com/portfolio/photography/oriental-expression/">See image gallery at handmadecssdesign.com</a>] </p>
  444. <h4>Technical bits and pieces</h4>
  445. <p>The camera I used is a CANON EOS model 50D, making use of the onboard flash where I was permitted by the dancers and made use of a 17 – 85mm EFS wide angle lens, with a clear filter.</p>
  446. <h4>Cross-link</h4>
  447. <p>This will take you to the second article of the <a title="Oriental Expresion Tribal Dance Evening Shoot" href="http://handmadecssdesign.com/portfolio/photography/oriental-expression-2/">Oriental Expression Tribal Dance Evening Shoot</a></p>
  448. <h4>External Links</h4>
  449. <ul>
  450. <li>Oriental Expression &#8211; <a title="Oriental Expression Photo Gallery in Facebook" href="http://www.orientalexpression.gr/" target="_blank">Tribal Dance Evening Photo Gallery</a> ( Sorry no direct link available to the shoot, to view the Gallery, hover over the &#8220;Gallery&#8221; link in the main navigation and select &#8220;ΒΡΑΔΥΑ TRIBAL FUSION DANCE (9-4-2011)&#8221;)</li>
  451. <li>Facebook &#8211; <a title="Oriental Expression Photo Gallery in Facebook" href="http://www.facebook.com/group.php?gid=170087299576&amp;v=photos" target="_blank">Oriental Expression Photo Gallery</a> with comments on the shoot</li>
  452. </ul>
  453. ]]></content:encoded>
  454. <post-id xmlns="com-wordpress:feed-additions:1">1338</post-id> </item>
  455. <item>
  456. <title>What is HTML5 and why all the fuss?</title>
  457. <link>http://handmadecssdesign.com/blog/what-is-html5-and-why-all-the-fuss/</link>
  458. <comments>http://handmadecssdesign.com/blog/what-is-html5-and-why-all-the-fuss/#comments</comments>
  459. <pubDate>Thu, 17 Feb 2011 11:42:37 +0000</pubDate>
  460. <dc:creator><![CDATA[admin]]></dc:creator>
  461. <category><![CDATA[BLOG]]></category>
  462.  
  463. <guid isPermaLink="false">http://handmadecssdesign.com/?p=1282</guid>
  464. <description><![CDATA[To date HTML5 has been a “draft specification document” by the W3C and as I am sure all developers are glad that we will finally get to have an official release date announced which is July 2014. This will mean that the W3C will then officially recommend HTML5.
  465. <h3>Huh, why are you talking about this now, when the official launch date is so far away?</h3>
  466. Well to be honest most modern browsers already support most HTML5 specifications and with the use of graceful degradation we can get around the browsers that do not support HTML5 yet. Furthermore a more important date is that of July 14th 2010, which is the <a title="Takes you to the W3C Cut of date page" href="http://www.w3.org/2011/02/htmlwg-pr.html.en" target="_blank">cut of date announced by the W3C</a> by when no more additions to the new specification will be accepted.]]></description>
  467. <content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-1283" title="The HTML5 W3C Badge" src="http://handmadecssdesign.com/wp-content/medialibrary//html5-blog.png" alt="Image of the HTML5 W3C Badge" width="980" height="475" srcset="http://handmadecssdesign.com/wp-content/medialibrary/html5-blog.png 980w, http://handmadecssdesign.com/wp-content/medialibrary/html5-blog-250x121.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/html5-blog-640x310.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/html5-blog-460x223.png 460w" sizes="(max-width: 980px) 100vw, 980px" /><br />
  468. To date HTML5 has been a “draft specification document” by the W3C and as I am sure all developers are glad that we will finally get to have an official release date announced which is July 2014. This will mean that the W3C will then officially recommend HTML5.</p>
  469. <h3>Huh, why are you talking about this now, when the official launch date is so far away?</h3>
  470. <p>Well to be honest most modern browsers already support most HTML5 specifications and with the use of graceful degradation we can get around the browsers that do not support HTML5 yet. Furthermore a more important date is that of July 14th 2010, which is the <a title="Takes you to the W3C Cut of date page" href="http://www.w3.org/2011/02/htmlwg-pr.html.en" target="_blank">cut of date announced by the W3C</a> by when no more additions to the new specification will be accepted.<span id="more-1282"></span></p>
  471. <h3>What does HTML5 offer?</h3>
  472. <p>I think the best way to start explaining this is by explaining what HTML5 is not. It is not CSS3, SVG or JavaScript API’s even though the W3C has marketed it as such in the <a title="Takes you to the W3C HTML5 Site" href="http://www.w3.org/html/logo/" target="_blank">W3C site promoting HTML5</a> and this can only be best described as a marketing ploy.<br />
  473. What do the badges mean that you may find in some websites such as the badge shown here below…<br />
  474. <a href="http://www.w3.org/html/logo/"><br />
  475. <img style="background: #FFFFFF; padding: 10px;" title="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-css3-device-graphics-multimedia-performance-semantics-storage.png" alt="HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" width="357" height="64" /><br />
  476. </a></p>
  477. <h3>Semantics better known as the Semantic Web</h3>
  478. <p><img class="alignleft size-full wp-image-1291" style="background: #FFFFFF;" title="The W3C HTML5 Semantics" src="http://handmadecssdesign.com/wp-content/medialibrary//HTML5_Semantics_32.png" alt="Image of the W3C HTML5 Semantics" width="32" height="32" />According to the the W3C’s HTML5 website &#8211; Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.</p>
  479. <p>According to <a title="Takes you to Wikipedia" href="http://en.wikipedia.org/wiki/Semantic_Web" target="_blank">Wikipedia</a> &#8211; The key element is that the application in context will try to determine the meaning of the text or other data and then create connections for the user. The evolution of Semantic Web will specifically make possible scenarios that were not otherwise, such as allowing customers to share and utilize computerized applications simultaneously in order to cross reference the time frame of activities with documentation and/or data. According to the original vision, the availability of machine-readable <a title="Metadata (computing)" href="http://en.wikipedia.org/wiki/Metadata_%28computing%29" target="_blank">metadata</a> would enable automated agents and other software to access the Web more intelligently. The agents would be able to perform tasks automatically and locate related information on behalf of the user.</p>
  480. <h3>Offline and Storage</h3>
  481. <p><img class="alignleft size-full wp-image-1289" style="background: #FFFFFF;" title="The W3C HTML5 Offline Storage" src="http://handmadecssdesign.com/wp-content/medialibrary//HTML5_Offline_Storage_32.png" alt="Image of the W3C HTML5 Offline Storage" width="32" height="32" />Web Application’s (Apps) can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.</p>
  482. <p><strong> </strong></p>
  483. <h3>Device Access</h3>
  484. <p><img class="alignleft size-full wp-image-1287" style="background: #FFFFFF;" title="The W3C HTML5 Device Access" src="http://handmadecssdesign.com/wp-content/medialibrary//HTML5_Device_Access_32.png" alt="Image of the W3C HTML5 Device Access" width="32" height="32" />Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts &amp; events, and even video tilt orientation.</p>
  485. <h3>Connectivity</h3>
  486. <p><img class="alignleft size-full wp-image-1286" style="background: #FFFFFF;" title="The W3C HTML5 Connectivity" src="http://handmadecssdesign.com/wp-content/medialibrary//HTML5_Connectivity_32.png" alt="Image of the W3C HTML5" width="32" height="32" />More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.</p>
  487. <p><strong> </strong></p>
  488. <h3>Multimedia</h3>
  489. <p><img class="alignleft size-full wp-image-1288" style="background: #FFFFFF;" title="The W3C HTML5 Multimedia" src="http://handmadecssdesign.com/wp-content/medialibrary//HTML5_MultiMedia_32.png" alt="Image of the W3C HTML5 Multimedia" width="32" height="32" />Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!</p>
  490. <p><strong> </strong></p>
  491. <p><strong> </strong></p>
  492. <h3>3D, Graphics and Effects</h3>
  493. <p><img class="alignleft size-full wp-image-1285" style="background: #FFFFFF;" title="The W3C HTML5 3D, Graphics and Effects" src="http://handmadecssdesign.com/wp-content/medialibrary//HTML5_3D_Effects_32.png" alt="Image of the W3C HTML5 3D, Graphics and Effects" width="32" height="32" />Between SVG, Canvas, WebGL, and CSS3 3D features, you&#8217;re sure to amaze your users with stunning visuals natively rendered in the browser.</p>
  494. <p><strong> </strong></p>
  495. <p><strong> </strong></p>
  496. <h3>Performance and Integration</h3>
  497. <p><img class="alignleft size-full wp-image-1290" style="background: #FFFFFF;" title="The W3C HTML5 Performance and Intergration" src="http://handmadecssdesign.com/wp-content/medialibrary//HTML5_Performance_32.png" alt="Image of the W3C HTML5 Performance and Intergration" width="32" height="32" />Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.</p>
  498. <p><strong> </strong></p>
  499. <h3>CSS3 Styling</h3>
  500. <p><img class="alignleft size-full wp-image-1292" style="background: #FFFFFF;" title="The W3C HTML5 CSS3 Styling" src="http://handmadecssdesign.com/wp-content/medialibrary//HTML5_Styling_32.png" alt="Image of the W3C HTML5 CSS3 Styling" width="32" height="32" />CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.</p>
  501. <p><strong>Remember though, as always take things with a pinch of salt, as things are not as simple as they appear and just because the badge says it is built with HTML5 the browser that the user has on their PC may not support all or some of the specifications.</strong></p>
  502. <p>A final point of interest is that by July 2014 technology and browsers will have moved way beyond the HTML5 W3C specification so organizations’ such as the <a title="Takes you to the WHATWG Site" href="http://whatwg.org/html" target="_blank">Web Hypertext Applications Technology Working Group</a> (Phew! Better known as the WHATWG) have announced that the WHATWG HTML specification (Note: the version number is missing!) will now be considered a “living standard”. It’s more mature than any version of html specification to date, so it makes little sense to refer to it as a “draft”. They have abandoned the use of what is known as a snapshot model of specification (Obviously aimed directly at the W3C HTML5 Version).</p>
  503. <p>So what will the future hold? Well, as always the Internet is developing at such a phenomenal rate that in all honesty we will just have to wait and see.</p>
  504. <h3>Recommended reading:</h3>
  505. <p>NOTE! We do not have any affiliation to a List Apart/a Book Apart or any of their subsidiaries we are simply pointing out a book or series of books which we believe to be worthy of recommendation, because we have read or are currently reading them and deam them worthy.</p>
  506. <p>A Book Apart &#8211; <a title="Takes you directly to a book apart" href="http://books.alistapart.com/products/html5-for-web-designers" target="_blank">HTML5 for Web Designers</a></p>
  507. <p><img class="alignnone size-medium wp-image-1313" title="Image of HTML5 for Web Designers a book from a book apart" src="http://handmadecssdesign.com/wp-content/medialibrary//HTML5FWD-feature-640x294.png" alt="Image of HTML5 for Web Designers a book from a book apart" width="640" height="294" srcset="http://handmadecssdesign.com/wp-content/medialibrary/HTML5FWD-feature-640x294.png 640w, http://handmadecssdesign.com/wp-content/medialibrary/HTML5FWD-feature-250x115.png 250w, http://handmadecssdesign.com/wp-content/medialibrary/HTML5FWD-feature.png 1000w" sizes="(max-width: 640px) 100vw, 640px" /></p>
  508. <h3>Links of intrest</h3>
  509. <p>w3.org &#8211; <a title="HTML5 - The Next Open Web Platform" href="http://www.w3.org/2011/Talks/0216-html5-plh/" target="_blank">The Next Open Web Platform</a> by Philippe Le Hégaret</p>
  510. <p>WHATWG &#8211; <a title="Takes you to the WHATWG Web Developers HTML5 Specification" href="http://developers.whatwg.org/" target="_blank">HTML5 Web Developers Specification</a></p>
  511. <p>Woofoo &#8211; <a title="The Current State of HTML5 Forms" href="http://wufoo.com/html5/" target="_blank">The Current State of HTML 5 Forms</a></p>
  512. ]]></content:encoded>
  513. <wfw:commentRss>http://handmadecssdesign.com/blog/what-is-html5-and-why-all-the-fuss/feed/</wfw:commentRss>
  514. <slash:comments>1</slash:comments>
  515. <post-id xmlns="com-wordpress:feed-additions:1">1282</post-id> </item>
  516. </channel>
  517. </rss>
  518.  

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

  1. Download the "valid RSS" banner.

  2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

  3. Add this HTML to your page (change the image src attribute if necessary):

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//handmadecssdesign.com/feed/

Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda