<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
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/"
> <channel><title>HTML5 Gallery &#187; Portfolio</title> <atom:link href="http://html5gallery.com/category/portfolio/feed/" rel="self" type="application/rss+xml" /><link>http://html5gallery.com</link> <description>A showcase of sites using HTML5 markup</description> <lastBuildDate>Thu, 02 Feb 2012 22:10:02 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.3</generator> <item><title>Always data</title><link>http://html5gallery.com/2012/01/always-data/</link> <comments>http://html5gallery.com/2012/01/always-data/#comments</comments> <pubDate>Mon, 02 Jan 2012 09:00:49 +0000</pubDate> <dc:creator>Gerard Druiven</dc:creator> <category><![CDATA[Portfolio]]></category> <category><![CDATA[canvas]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7695</guid> <description><![CDATA[Website of Styro, a graphic designer and front-end developer based in Paris, France. Good clean use of semantic HTML5 elements in this layout, although the &#8220;content&#8221; section element should probably use a div instead. The article element is used to enclose each entry and the time element is used for the post date, although the [...]]]></description> <content:encoded><![CDATA[<p>Website of Styro, a graphic designer and front-end developer based in Paris, France.</p><p>Good clean use of semantic HTML5 elements in this layout, although the &#8220;content&#8221; <code>section</code> element should probably use a <code>div</code> instead. The <code>article</code> element is used to enclose each entry and the <code>time</code> element is used for the post date, although the <code>small</code> element probably shouldn&#8217;t be used here. The <code>canvas</code> element is used to draw a diagonal red line in the page background.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/12/styro-alwaysdata-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://styro.alwaysdata.net">http://styro.alwaysdata.net</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2012/01/always-data/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>cssgirl.com</title><link>http://html5gallery.com/2011/11/cssgirl-com/</link> <comments>http://html5gallery.com/2011/11/cssgirl-com/#comments</comments> <pubDate>Fri, 11 Nov 2011 23:05:25 +0000</pubDate> <dc:creator>Gerard Druiven</dc:creator> <category><![CDATA[Blog]]></category> <category><![CDATA[Personal]]></category> <category><![CDATA[Portfolio]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7465</guid> <description><![CDATA[The portfolio and blog of freelance web design and delopment professional Lindsey Di Napoli. Lindsey&#8217;s site is well structured, making use of some new HTML5 elements such as header, nav, section, article and footer. There is one untitled section used to contain the main content which would be better as a div, and time with [...]]]></description> <content:encoded><![CDATA[<p>The portfolio and blog of freelance web design and delopment professional Lindsey Di Napoli.</p><p>Lindsey&#8217;s site is well structured, making use of some new <abbr>HTML</abbr>5 elements such as <code>header</code>, <code>nav</code>, <code>section</code>, <code>article</code> and <code>footer</code>. There is one untitled <code>section</code> used to contain the main content which would be better as a <code>div</code>, and <code>time</code> with the <code>pubdate</code> attribute would be a better choice for marking up the blog posts&#8217; published dates. Otherwise a pretty nice HTML5 site.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/09/cssgirl-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://cssgirl.com">http://cssgirl.com</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/11/cssgirl-com/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Rockstar Working</title><link>http://html5gallery.com/2011/10/rockstar-working/</link> <comments>http://html5gallery.com/2011/10/rockstar-working/#comments</comments> <pubDate>Mon, 10 Oct 2011 08:00:06 +0000</pubDate> <dc:creator>Ian</dc:creator> <category><![CDATA[Personal]]></category> <category><![CDATA[Portfolio]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7530</guid> <description><![CDATA[Website of Egyptian web designer and front-end developer, Ahmad Ali. The header contains am unnecessary section element to contain the social media links. The content area is split up into separate areas which are ideal for using the section element, but use divs instead. Remember that the type attribute is no longer required in the [...]]]></description> <content:encoded><![CDATA[<p>Website of Egyptian web designer and front-end developer, Ahmad Ali.</p><p>The <code>header</code> contains am unnecessary <code>section</code> element to contain the social media links. The content area is split up into separate areas which are ideal for using the <code>section</code> element, but use <code>divs</code> instead.</p><p>Remember that the <code>type</code> attribute is no longer required in the <code>link stylesheet</code> element.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/10/rockstarworking-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.rockstarworking.com/">http://www.rockstarworking.com/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/10/rockstar-working/feed/</wfw:commentRss> <slash:comments>5</slash:comments> </item> <item><title>Gimme Money I Can Do It!!</title><link>http://html5gallery.com/2011/10/gimme-money-i-can-do-it/</link> <comments>http://html5gallery.com/2011/10/gimme-money-i-can-do-it/#comments</comments> <pubDate>Sun, 09 Oct 2011 08:00:40 +0000</pubDate> <dc:creator>Ian</dc:creator> <category><![CDATA[Commercial]]></category> <category><![CDATA[Portfolio]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7526</guid> <description><![CDATA[Website of a small independent web design studio based in Buenos Aires, Argentina. This site suffers a bit from &#8220;div-itis&#8221; and using section elements for the sake of using them rather than semantically. The work area sub-navigation links shouldn&#8217;t be contained within a nav element as they&#8217;re not the main navigation of the site. The [...]]]></description> <content:encoded><![CDATA[<p>Website of a small independent web design studio based in Buenos Aires, Argentina.</p><p>This site suffers a bit from &#8220;div-itis&#8221; and using <code>section</code> elements for the sake of using them rather than semantically. The work area sub-navigation links shouldn&#8217;t be contained within a <code>nav</code> element as they&#8217;re not the main navigation of the site. The duplicated navigation in the footer should also not be contained within a <code>nav</code> for the same reason.</p><p>The contact form could have made use of some of the new <code>input types</code>, and for some reason it also uses a <code>table</code> for the <code>textarea</code> which is disappointing.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/10/gimmemoneyicandoit-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.gimmemoneyicandoit.com/">http://www.gimmemoneyicandoit.com/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/10/gimme-money-i-can-do-it/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>Navin Soni</title><link>http://html5gallery.com/2011/10/navin-soni/</link> <comments>http://html5gallery.com/2011/10/navin-soni/#comments</comments> <pubDate>Wed, 05 Oct 2011 08:00:25 +0000</pubDate> <dc:creator>Gerard Druiven</dc:creator> <category><![CDATA[Personal]]></category> <category><![CDATA[Portfolio]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[css3]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7459</guid> <description><![CDATA[Personal website of tech enthusiast Navin Soni, based in Kolkata, India. The h1 doesn&#8217;t need to be contained within a hgroup as it&#8217;s on its own, and the same goes for the single h1 elements contained within a header. There are also a number of section elements being used as styling containers where div elements [...]]]></description> <content:encoded><![CDATA[<p>Personal website of tech enthusiast Navin Soni, based in Kolkata, India.</p><p>The <code>h1</code> doesn&#8217;t need to be contained within a <code>hgroup</code> as it&#8217;s on its own, and the same goes for the single <code>h1</code> elements contained within a <code>header</code>. There are also a number of <code>section</code> elements being used as styling containers where <code>div</code> elements would be more appropriate. The <code>article</code> elements in the left <code>aside</code> don&#8217;t make semantic sense, and a <code>div</code> would have sufficed.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/09/navinsoni-thumb3.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://navinsoni.in/">http://navinsoni.in/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/10/navin-soni/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item><title>Edir Pedro</title><link>http://html5gallery.com/2011/09/edir-pedro/</link> <comments>http://html5gallery.com/2011/09/edir-pedro/#comments</comments> <pubDate>Wed, 28 Sep 2011 08:00:16 +0000</pubDate> <dc:creator>Gerard Druiven</dc:creator> <category><![CDATA[Personal]]></category> <category><![CDATA[Portfolio]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[docytype]]></category> <category><![CDATA[elements]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7455</guid> <description><![CDATA[Website of Brazilian based web designer and developer, Edir Pedro. A good example of the nav element being used to contain a number of links rather than a list. The article elements should all have a semantic heading, otherwise a div should be used. The small element could have been used to enclose the main [...]]]></description> <content:encoded><![CDATA[<p>Website of Brazilian based web designer and developer, Edir Pedro.</p><p>A good example of the <code>nav</code> element being used to contain a number of links rather than a list. The <code>article</code> elements should all have a semantic heading, otherwise a <code>div</code> should be used.</p><p>The <code>small</code> element could have been used to enclose the main <code>footer</code> copyright information</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/09/edirpedro-thumb3.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://edirpedro.com.br/">http://edirpedro.com.br/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/09/edir-pedro/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>Joey Rabbitt</title><link>http://html5gallery.com/2011/09/joey-rabbitt/</link> <comments>http://html5gallery.com/2011/09/joey-rabbitt/#comments</comments> <pubDate>Tue, 13 Sep 2011 08:00:30 +0000</pubDate> <dc:creator>Gerard Druiven</dc:creator> <category><![CDATA[Portfolio]]></category> <category><![CDATA[charset]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[two elements]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7322</guid> <description><![CDATA[Website of web designer and front-end developer Joey Rabbitt. The nav element shouldn&#8217;t contain social links as in this context they&#8217;re not really main navigation links, unlike the home, portfolio, bio and contact links. Also the logo shouldn&#8217;t be within the nav either, as the one home link is sufficient. The main content div could [...]]]></description> <content:encoded><![CDATA[<p>Website of web designer and front-end developer Joey Rabbitt.</p><p>The <code>nav</code> element shouldn&#8217;t contain social links as in this context they&#8217;re not really main navigation links, unlike the home, portfolio, bio and contact links. Also the logo shouldn&#8217;t be within the <code>nav</code> either, as the one home link is sufficient.</p><p>The main content <code>div</code> could use a <code>section</code> element here as it would be semantically correct and the <code>h1</code> and <code>h2</code> elements within it could be enclosed within a <code>hgroup</code> element.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/09/joeyrabbit-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://joeyrabbitt.com">http://joeyrabbitt.com</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/09/joey-rabbitt/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>eastley &#8211; Dan Eastley</title><link>http://html5gallery.com/2011/09/eastley-dan-eastley/</link> <comments>http://html5gallery.com/2011/09/eastley-dan-eastley/#comments</comments> <pubDate>Thu, 01 Sep 2011 08:00:42 +0000</pubDate> <dc:creator>Gerard Druiven</dc:creator> <category><![CDATA[Portfolio]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <category><![CDATA[style]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7248</guid> <description><![CDATA[Personal website of Dan Eastley. The simpler HTML5 charset defintion is used but so is the HTML 4.01 style one. Only one should be used. The section elements each have their own heading, so the HTML5 outliner is happy. Remember that the type attribute is no longer required in the script and link stylesheet elements. [...]]]></description> <content:encoded><![CDATA[<p>Personal website of Dan Eastley.</p><p>The simpler HTML5 charset defintion is used but so is the HTML 4.01 style one. Only one should be used. The <code>section </code>elements each have their own heading, so the HTML5 outliner is happy. Remember that the <code>type </code>attribute is no longer required in the <code>script </code>and <code>link stylesheet</code> elements.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/07/eastley-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.eastley.net">http://www.eastley.net</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/09/eastley-dan-eastley/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>The Remedy</title><link>http://html5gallery.com/2011/08/the-remedy/</link> <comments>http://html5gallery.com/2011/08/the-remedy/#comments</comments> <pubDate>Sun, 28 Aug 2011 14:00:35 +0000</pubDate> <dc:creator>Gerard Druiven</dc:creator> <category><![CDATA[Agency]]></category> <category><![CDATA[Portfolio]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7246</guid> <description><![CDATA[The Remedy designs and builds websites. There is an opportunity to use hgroup for the sites subtitle. Arguably header is overused because it only contains a single heading in many cases. Projects have been placed within a list item with a section inside each; this isn&#8217;t required, the section is enough on it&#8217;s own. URL: [...]]]></description> <content:encoded><![CDATA[<p>The Remedy designs and builds websites. There is an opportunity to use <code>hgroup</code> for the sites subtitle. Arguably <a
href="http://html5doctor.com/avoiding-common-html5-mistakes/"><code>header</code> is overused because it only contains a single heading</a> in many cases. Projects have been placed within a list item with a <code>section</code> inside each; this isn&#8217;t required, the <code>section</code> is enough on it&#8217;s own.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/07/theremedy-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.theremedy.be/">http://www.theremedy.be/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/08/the-remedy/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Manuel Bieh</title><link>http://html5gallery.com/2011/08/manuel-bieh/</link> <comments>http://html5gallery.com/2011/08/manuel-bieh/#comments</comments> <pubDate>Thu, 25 Aug 2011 14:24:11 +0000</pubDate> <dc:creator>Richard Clark</dc:creator> <category><![CDATA[Portfolio]]></category> <category><![CDATA[doctype]]></category> <category><![CDATA[elements]]></category> <guid
isPermaLink="false">http://html5gallery.com/?p=7399</guid> <description><![CDATA[Personal site of Manuel Bieh. Shows an OK understanding of the new elements but does include some unnecessary sections that appear to be purely presentational. I would argue that the content within the footer may be more appropriate as an aside also. URL: http://www.manuel-bieh.de/en/]]></description> <content:encoded><![CDATA[<p>Personal site of Manuel Bieh. Shows an OK understanding of the new elements but does include some unnecessary <code>section</code>s that appear to be purely presentational. I would argue that the content within the <code>footer</code> may be more appropriate as an <code>aside</code> also.</p><p> <img
src="http://html5gallery.com/wp-content/uploads/2011/08/manuel-bieh-thumb.jpg" alt="Website Screenshot" /></p><p>URL: <a
href="http://www.manuel-bieh.de/en/">http://www.manuel-bieh.de/en/</a></p>]]></content:encoded> <wfw:commentRss>http://html5gallery.com/2011/08/manuel-bieh/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
