Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2013-09-28 21:26:24

CodeWalker
Member
From: Hampshire, UK
Registered: 2010-01-08
Posts: 110
Website

Responsive Portfolio

Just rolled out a responsive & flat edition of my portfolio site and added a blog area this time around.

Comments welcome :)

James Steel

Offline

#2 2013-09-28 22:19:34

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: Responsive Portfolio

Nicely done, with refreshing color scheme, I like it! I would gladly comment on Javascript fails article, but having to enable JS to vote for progressive enhancement seems a bit strange. :)

Offline

#3 2013-09-29 03:39:17

jstubbs
Moderator
From: Hong Kong
Registered: 2004-12-13
Posts: 2,395
Website

Re: Responsive Portfolio

Looks very nice James, well done! Seems to be a rogue meta tag or something on your Journal Theme article though, shows at top left of the screen..

Offline

#4 2013-09-29 05:37:39

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

Re: Responsive Portfolio

I like it a lot James … but I suggest to change a:link on Work with something more appealing … with a:hover perhaps … !?

Offline

#5 2013-09-29 08:27:58

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Responsive Portfolio

Lovely stuff.

A few very very minor things, but worth doing if you have slight OCD tendencies like me…

For some reason your CSS and JS files are not being gzipped by your server (but your HTML is), maybe talk to your host about configuring mod_deflate properly if they are using Apache. This repo will help.

Also I think head.js can act as a loader for other JavaScript files such as Google Analytics, Google Web Font Loader and jQuery so might be worth looking into that instead of loading them further down the page. And shouldn’t head.js be in the <head> section of the page?

Put the favicon in your root and you can then remove the <link> tag that references it (since browsers look for a favicon in root anyway). Saves a few more bytes.

<script> tags and <link> tags don’t need a type attribute in HTML5, so again you can remove that and save a few bytes.

Your schema.org attributes are not being used correctly, they currently will have no benefit the way you have set them up. Either remove those entirely or use them how they are intended – otherwise they may actually have a detrimental effect on page rankings.

If you want some pointers on how schema.org markup works, let me know.

Offline

#6 2013-09-29 09:27:58

CodeWalker
Member
From: Hampshire, UK
Registered: 2010-01-08
Posts: 110
Website

Re: Responsive Portfolio

All – Thanks for the comments :)

I would gladly comment on Javascript fails article, but having to enable JS to vote for progressive enhancement seems a bit strange. :)

Oh the irony! That made me laugh etc.

Seems to be a rogue meta tag or something on your Journal Theme article though, shows at top left of the screen..

Thanks Jonathan, good spot. Ill fix that one up.

I suggest to change a:link on Work with something more appealing … with a:hover perhaps … !?

I am not sure what you mean RedFox, can you be more specific? Are you talking about the main menu or the image thumbnails, because they already do something on hover?!?

Phil, thanks for the thorough going over.

For some reason your CSS and JS files are not being gzipped by your server (but your HTML is), maybe talk to your host about configuring mod_deflate properly if they are using Apache. This repo will help.

I actually do have those rules in my .htaccess to trigger gzip but for some reason it doesnt actually seem to work. My host is Media Temple. The server has just been upgraded to run mod_pagespeed too so I may also enable that. The HTML is getting gzipped because i have aks_header installed in textpattern to strip the code.

Also I think head.js can act as a loader for other JavaScript files such as Google Analytics, Google Web Font Loader and jQuery so might be worth looking into that instead of loading them further down the page. And shouldn’t head.js be in the <head> section of the page?

Your quite right, it does act as a loader but i’m not using this feature of it for now. I have very minimal javascript on the site anyway. Its in the footer because im just using the feature detection parts of head.js and its html5 element enabler. therefor i have deferred it to the footer. If my JS gets much bigger ill put it back in the head and use the loader.

Put the favicon in your root and you can then remove the <link> tag that references it (since browsers look for a favicon in root anyway). Saves a few more bytes.

They do indeed but i’ve found older versions of browsers need the tag to see it, even if it is in the root. You can guess which one!

<script> tags and <link> tags don’t need a type attribute in HTML5, so again you can remove that and save a few bytes.

I am old dog and these are new tricks. Im always forgetting that one! Thanks.

Your schema.org attributes are not being used correctly, they currently will have no benefit the way you have set them up. Either remove those entirely or use them how they are intended – otherwise they may actually have a detrimental effect on page rankings.

This is something i’m curently learning and trying to implement properly but im getting confused with it tbh. I have picked through your Hive theme to get some pointers which has helped, but i have no idea how properly add schema to the home page, or anything thats not an individual article. If you could offer some help here i would be most grateful :)

Last edited by CodeWalker (2013-09-29 09:30:34)

Offline

#7 2013-09-29 21:30:56

RedFox
Member
From: Netherlands
Registered: 2005-03-25
Posts: 805
Website

Re: Responsive Portfolio

I suggest to change :hover on thumbnails … e.g. change :link into :hover … and :hover into :link … ;-)

Offline

#8 2013-09-30 09:39:53

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Responsive Portfolio

OK, I’ll give you an example of schema.org structure and proper semantics for part of your homepage.

Currently you a section like this:

<article class="recently">
    <ul>
        <li>
            <a rel="bookmark" href="#">Article title</a>
            <div class="excerpt" style="height: 108px;">
                <p>Article excerpt.</p>
            </div>
            <p class="filed">filed in <a rel="tag" href="#">category1</a> <a rel="tag" href="#">category2</a></p>
            <p class="filed">XX days ago</p>
        </li>
        <li>
            <a rel="bookmark" href="#">Article title</a>
            <div class="excerpt" style="height: 108px;">
                <p>Article excerpt.</p>
            </div>
            <p class="filed">filed in <a rel="tag" href="#">category1</a> <a rel="tag" href="#">category2</a></p>
            <p class="filed">XX days ago</p>
        </li>
        <li>
            <a rel="bookmark" href="#">Article title</a>
            <div class="excerpt" style="height: 108px;">
                <p>Article excerpt.</p>
            </div>
            <p class="filed">filed in <a rel="tag" href="#">category1</a> <a rel="tag" href="#">category2</a></p>
            <p class="filed">XX days ago</p>
        </li>
        <li>
            <a rel="bookmark" href="#">Article title</a>
            <div class="excerpt" style="height: 108px;">
                <p>Article excerpt.</p>
            </div>
            <p class="filed">filed in <a rel="tag" href="#">category1</a> <a rel="tag" href="#">category2</a></p>
            <p class="filed">XX days ago</p>
        </li>
    </ul>
</article>

Which would be better like this:

<section role="region" itemscope itemtype="http://schema.org/CollectionPage">
    <h2 itemprop="name" class="doc-outline">Recent articles</h2>
    <div itemprop="mainContentOfPage">
        <ul>
            <li role="article" itemscope itemtype="http://schema.org/Article">
                <h1 itemprop="name"><a itemprop="url" rel="bookmark" href="#">Article title</a></h1>
                <div itemprop="description" class="excerpt" style="min-height: 108px;">
                    <p>Article excerpt.</p>
                </div>
                <p class="filed-category">filed in <span itemprop="keywords"><a rel="tag" href="#">category1</a> <a rel="tag" href="#">category2</a></span></p>
                <p class="filed-time"><time datetime="<txp:posted format="iso8601" />" itemprop="datePublished">XX days ago</time></p>
            </li>
            <li role="article" itemscope itemtype="http://schema.org/Article">
                <h1 itemprop="name"><a itemprop="url" rel="bookmark" href="#">Article title</a></h1>
                <div itemprop="description" class="excerpt" style="min-height: 108px;">
                    <p>Article excerpt.</p>
                </div>
                <p class="filed-category">filed in <span itemprop="keywords"><a rel="tag" href="#">category1</a> <a rel="tag" href="#">category2</a></span></p>
                <p class="filed-time"><time datetime="<txp:posted format="iso8601" />" itemprop="datePublished">XX days ago</time></p>
            </li>
            <li role="article" itemscope itemtype="http://schema.org/Article">
                <h1 itemprop="name"><a itemprop="url" rel="bookmark" href="#">Article title</a></h1>
                <div itemprop="description" class="excerpt" style="min-height: 108px;">
                    <p>Article excerpt.</p>
                </div>
                <p class="filed-category">filed in <span itemprop="keywords"><a rel="tag" href="#">category1</a> <a rel="tag" href="#">category2</a></span></p>
                <p class="filed-time"><time datetime="<txp:posted format="iso8601" />" itemprop="datePublished">XX days ago</time></p>
            </li>
            <li role="article" itemscope itemtype="http://schema.org/Article">
                <h1 itemprop="name"><a itemprop="url" rel="bookmark" href="#">Article title</a></h1>
                <div itemprop="description" class="excerpt" style="min-height: 108px;">
                    <p>Article excerpt.</p>
                </div>
                <p class="filed-category">filed in <span itemprop="keywords"><a rel="tag" href="#">category1</a> <a rel="tag" href="#">category2</a></span></p>
                <p class="filed-time"><time datetime="<txp:posted format="iso8601" />" itemprop="datePublished">XX days ago</time></p>
            </li>
        </ul>
    </div>
</section>

In that example I’ve put a <h2> heading tag on the <section>, which is requited for a proper document outline (you can hide it with CSS targeting the .doc-outline class). The same for <article> tags, they require a heading tag for correct outline. You could probably lose a few classnames and target role and itemprop attributes instead to keep your code minimal – up to you really (I like to remove classes where I can). I also threw in a txp:tag to show how to implement <time> in the CMS.

There are also other semantic improvements your could make, like using HTML5 <header>, <footer> and <nav> tags along with their associated role attributes.

It’s debatable whether tweets come within the role of article, I’d maybe use a <section> tag here, like so:

<section role="region">
    <h2 class="doc-outline">Recent tweets</h2>
    <ul class="arc_twitter">
        <li style="min-height: 116px;">
            A tweet
        </li>
        <li style="min-height: 116px;">
            A tweet
        </li>
    </ul>
</section>

Offline

#9 2013-09-30 18:13:09

CodeWalker
Member
From: Hampshire, UK
Registered: 2010-01-08
Posts: 110
Website

Re: Responsive Portfolio

Blimey, thanks Phil! Ill look at updatting those. fourtunatly that bar is a form so it should be a doddle to throw your suggestions in there and the rest of the site will update.

That big heading i have on the home page above those. what would be the most appropriate way to add schema to that?

Thanks again, this is really helpful :)

Offline

#10 2013-09-30 19:00:53

CodeWalker
Member
From: Hampshire, UK
Registered: 2010-01-08
Posts: 110
Website

Re: Responsive Portfolio

Phil im unsure of the bc <div itemprop=“mainContentOfPage”>

Surely this part of the page is kind of an aside, its not the main page content, that would be the big bold text above my recent articles?

I have implemented your suggestions, thanks :)

Offline

#11 2013-09-30 20:13:50

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Responsive Portfolio

Hi James,

The mainContentOfPage is within the scope of the CollectionPage not the entire page of your site. itemprop attributes only relate to the itemtype they are within and nothing more.

You can also have further itemtypes as nested children of your itemtypes, if you want to get really granular.

You don’t need to add schemas to everything, so I don’t think there’s a need to add anything to your homepage h1. These schemas only exist to help tell browsers (or web apps or whatever) how to interpret chunks of content within a page. Certain parts of a site’s page structure can be quite adequately handled by the semantic HTML tags such as header and footer.

Also have a look at WAI-ARIA landmark roles sometime, and aria attributes.

So in summary, to create a best practice web page you need to think about…

  1. semantic HTML
  2. proper document outline
  3. semantic CSS class names
  4. describing content with Schema.org attributes
  5. adding landmark roles for those with assistive technologies (which allow things like keyboard navigation to sections of a page)
  6. adding WAI-ARIA attributes where needed to describe interaction states of UI elements to those with assistive technologies (e,g. whether a menu is open or not, whether a button is in pressed state or not)

It depends how far you want to go really, some of this can seem a bit pedantic I guess. I actually find this stuff pretty interesting to learn and implement.

I should get out more!

Offline

#12 2013-09-30 20:28:26

CodeWalker
Member
From: Hampshire, UK
Registered: 2010-01-08
Posts: 110
Website

Re: Responsive Portfolio

Very helpful again, thanks.

What you told me to to do certainly did the trick. Right after I added your suggested code, i ran the page through webmaster tools and got to to crawl the home page. I kid you not, i have gone up 4 place in google since this morning when the schema code was not there. Hats off to you sir.

Offline

Board footer

Powered by FluxBB