7 replies [Last post]
ucdc
ucdc's picture
Offline
newbie
Cape Town, South Africa
Last seen: 7 years 9 weeks ago
Cape Town, South Africa
Timezone: GMT+2
Joined: 2013-05-31
Posts: 3
Points: 5

Hi All

I am new to this forum. I am a Senior Front-end developer based in Cape Town, South Africa. I have built my first portfolio site.
I would appreciate it if you could take a look and let me know what you think. The url is: http://www.ucdc.co.za

Many thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Some nits to pick

I don't consider myself qualified to comment on the artistic merits of the site, so I won't.

Let me address three areas that have annoyances: accessibility, usability and readability.

There is a lack of contrast where the text color is a light blue against the light blue-gray background color. My vision is not bad, and I found the color combo difficult to read on my laptop's lcd display.

I am not a fan of scroll down single page sites. In this case, the usability is poor. There is no way to navigate other than returning to the top to access the main menu. There should be links within each segment supporting further exploration of the site.

I haven't looked under the hood at the code, nor have I opened a screen reader to see how the multicolumn works. Generally, multicolumn articles are not user-friendly except for very short columns. After scrolling down to read the end of one column, you must scroll back up and find your place in the next column. Since the columns are not flowed, I wonder whether screen readers treat the text seamlessly.

Over all, I find the page attractive, but with developmental flaws.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hmm yes nice design more

Hmm yes nice design more design than development though.

Was going to say quite a nice adaptive / responsive layout but then realised you've used bootstrap so sadly can't praise any front end development work as it letting bootstrap handle 90% of the work isn't development, bootstrap is fairly ghastly frankly, if you have to get pre built code to handle the front end development side of things then try something like Zurb.

Your use of the 'section' element ( or is it bootstraps use of it? ) is wrong check the specs for correct usage of this element - which is confusing at best and best not used that often.

But again I do like the design just not the approach as I can't call that frontend development it's web design not development.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

ucdc
ucdc's picture
Offline
newbie
Cape Town, South Africa
Last seen: 7 years 9 weeks ago
Cape Town, South Africa
Timezone: GMT+2
Joined: 2013-05-31
Posts: 3
Points: 5

I completely disagree with

I completely disagree with you. How does bootstrap make you any less of a front-end developer? Bootstrap isn't perfect but it buys you a ton of organization(sanity) in the insane css/sass world.

Not using it? Congratulations on your half million dollar decision.

You have not presented any actual data to back your claims.

A framework is a framework.. If you are using one guess it makes you not much of a front-end developer.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 53 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Try a little tenderness

OK, I looked under the hood (bonnet for you Brit speakers). You may be a bit harsh, Hugo. For a grid based layout, it is considerably less bad than most. There are still the non-semantic IDs and classes, and the (in my view) nonsensical empty containers throughout. E.g.

      <div class="row-fluid" style="margin-top:90px;">
        <div class="divider span2"></div>
        <div class="title span3">What I do</div>
        <div class=" divider span7"></div>
      </div>

For sure it doesn't suffer from the deluge of WP classes and awkward plug-ins and widgets. Wink The bootstrap stylesheet is a cluster-[bleep]. The less sheet is ridiculously formatted. While this is your personal page, Lyndsay, in the wild, developers seldom end up maintaining the sites they build. The sorry truth is that documentation and raw source for the preprocessing often get lost in the shuffle. The maintainers can be heard throughout the land cursing their mothers for bringing them into such a world. They wander the halls muttering,"wtf?"

While under the hood, I took a look at your images' alternative content. You convey a lot of info in a couple of those images, and your alt values fall short. Using the img may be the wrong element. The object element provides for fully marked up alternative content. For example:

<!DOCTYPE html>
<html>
  <head>
    <meta content="HTML Tidy for Linux (vers 25 March 2009), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>"
          name="generator">
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type">
    <title>
      test document
    </title>
    <base href="http://www.ucdc.co.za/">
    <style type="text/css">
 
    html, body {
      font: 100%/1.5 sans-serif;
      margin: 0;
      }
 
    h1 {
      text-align: center;
      }
 
    h1 span {
      display: block;
      font-size: 1rem;
      }
 
    h2 {
      text-transform: uppercase;
      }
 
    </style>
  </head>
  <body>
    <h1>
      <object data="assets/img/logo2.png"
          type="image/png">
        UCDC <span>Web Designer | Front-end Developer | Dork</span>
      </object>
    </h1>
 
    <p>
      Now let&#39;s break the link.
    </p>
 
    <h1>
      <object data="xassets/img/logo2.png"
          type="image/png">
        UCDC <span>Web Designer | Front-end Developer | Dork</span>
      </object>
    </h1>
 
    <p>
      Again with another image.
    </p>
 
    <h2>
      What I do
    </h2>
 
    <div>
      <object data="assets/img/what-i-do.png"
           type="image/png">
        <p>
          Web design using a variety of technologies …
        </p>
 
        <ul>
          <li>Bootstrap
          </li>
 
          <li>Sass
          </li>
 
          <li>Javascript/jQuery
          </li>
 
          <li>HTML5
          </li>
        </ul>
 
        <p>
          … and more, to create responsive web sites.
        </p>
      </object>
    </div>
 
    <p>
      Now the broken image
    </p>
 
    <h2>
      What I do
    </h2>
 
    <div>
      <object data="xassets/img/what-i-do.png"
           type="image/png">
        <p>
          Web design using a variety of technologies …
        </p>
 
        <ul>
          <li>Bootstrap
          </li>
 
          <li>Sass
          </li>
 
          <li>Javascript/jQuery
          </li>
 
          <li>HTML5
          </li>
        </ul>
 
        <p>
          … and more, to create responsive web sites.
        </p>
      </object>
    </div>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: There are still the

Quote:

There are still the non-semantic IDs and classes, and the (in my view) nonsensical empty containers throughout

And that is one huge reason why there are those - not just me - that beg people not to use the likes of bootstrap. and @ucdc btw sorry I was not really focussing my harshness on yourself per se just the notion of frameworks and the manner in which they have inveigled themselves into web development promoting a huge band of people not really able to code without 100 different helper apps doing work for them Smile Now if you no your craft then choosing to use a variety of tools to make your work flow more productive and faster is something can understand - however comments like in the insane css/sass world. leave me puzzled, what's so insane ? SASS might be but that not pure coding but a choice to use a further app to try to make things ? 'easier'

Thing with frameworks is that one can roll ones own, using the likes of Bootstrap, Boilerplate, Zurb, et al can just tend to add a lot of cruft, case in point grid layout makup and classes, must try to find a rather good article imploring people not to use grid based systems that pepper markup with meaningless and confusing classes.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

One little point as oddly

One little point as oddly Gary hasn't raised it although touching on grid and non semantic classes, the predominant thrust of CSS over the last decade has been to impart the importance of separation of presentation from content, and to this end Style sheets provided for this in a particularly elegant manner where we structure our documents semantically for content and then apply visual styles to present that data, and in a truly flexible way that allowed us to simply flip a couple of lines in stylesheet to completely change our layouts while still maintaining the integrity of the markup and it's content classed with semantic names describing the data rather than the layout. Grids then came along and attempted to undo this major principle by littering markup with non-semantic presentational classes forever fixing the markup to one particular layout, so essentially dragging us right back to table layouts.

However in truth there are grids or at least LESS/SASS stylesheets that avoid that and I guess do some of the work in creating those nice even gutters and padding for sections, such as: http://semantic.gs/

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

tweedsolutions
tweedsolutions's picture
Offline
newbie
Scotland
Last seen: 6 years 43 weeks ago
Scotland
Timezone: GMT+1
Joined: 2013-07-31
Posts: 2
Points: 2

Are you aware that there are

Are you aware that there are no [ to ] tags on your frontpage?