Fri, 2013-05-31 22:43
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!
Fri, 2013-05-31 23:53
#1
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
Sat, 2013-06-01 12:53
#2
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.
Sun, 2013-06-02 07:54
#3
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.
Sun, 2013-06-02 13:32
#4
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.
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'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
Sun, 2013-06-02 16:22
#5
Quote: There are still the
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 
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.
Sun, 2013-06-02 17:14
#6
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/
Fri, 2013-09-20 17:41
#7
Are you aware that there are
Are you aware that there are no [ to ] tags on your frontpage?