Geronimo89.dk

A blog about me, my doings and everything I think deserves attention.

New NoMA website

I really appreciate, that my academy is remaking the website, anyways, there is room for improvement in following areas:

  1. design consistency
  2. semantics
  3. readability

Design Consistency:

In the menu on the left, there are rounded boxes and dropshadows, nowhere else, the background image varies for widget boxes on the right and the overall background. The style of the icons (compare top right to social media) and also the headlines to the right vary a lot. Some of them are type, some are images.

Semantics:

The whole left main navigation is one picture. It is not optimizeable for search engines and uses an image map. No HTML5 elements are used at all, which would also improve machine readability. Headlines are not in <h1> to <h6> tags.

Readabilty:

The font for the headlines is very thick and not easy to read, especially not when it gets below 30px. In the lower corner there is even some “webfont” logo, I recommend checking out fontsquirrel.com. The background image is very noisy and too intense for good readability.

Conclusion:

I’m not mad about that my portfolio is not featured, I just point out the things that really struck me. I hope my critique is perceived in the respectful way it is meant to be.

2 comments already

HTML5 Workshop

HTML5 Logo 128 HTML5 Workshop
Monday and Tuesday we had some great lessons with our external teacher Jeremy Keith from clear left. He stripped the lessons down to the changes in elements and semantics of the web and specifically HTML5.

We did some exercises on document outlines and how <section> and <hgroup> influence them. Also the theories behind HTML5 as a living standard (as proposed by the whatWG and HTML5 as a standard as formerly shaped by the w3c were discussed. We had a complete workshop how to use HTML5 with its new semantics right now and how to provide complete backward compability.

I’ll get into that in another post, because my time-shedule is a little tight right now.

Thank you very much Jeremy for clarifying and also taking a look at our portfolios for improvement!

Only 1 comment so far

pretty video hosting: vimeo

Intro: vimeo, but there is youtube?

Youtube is for the masses, it’s fast, works like a charm, except on mobile devices and supports a bit of styling of your channel. Recently they’ve also started a beta for html5 video. On vimeo you don’t have instant uploads if you’re not a premium user, your HD videos are limited to 1 per week and a much smaller community. This does not sound good as a starting point? Let me explain why, in my opinion, it’s still a good service to use and a community worth diving into.

vimeo’s key features

As vimeo is more aimed at creators and not just at everyone having audio-visual data like video blogs or anime AMVs, they implemented a really nice function for crediting people who also have a vimeo account. They are listed below the viewed video. Also the player offers you more flexibility and even in the standard settings looks just better than youtubes old grey interface.

Another reason to use vimeo is the community. If you take a look at the comments on some of the videos you might find a lot more constructive criticism and interesting statements compared to youtubes communities one-liners and flames.

vimeo’s user page

vimeo user profile pretty video hosting: vimeo

This is the user page of Angeline Gragasin, I can recommend her videos. The design of the user pages is simple, withholds a lot of information, but not in simple values but in easily accessible and sexy layout. Again some of the functions are limited for non-premium members, but design and feel of the site are maintained through any type of user account.

non plus user limitations

  • low priority of converting video on upload
  • 500MB of uploads per week
  • 1 HD video per week
  • 1 group membership
  • 1 channel creation

If you’re not into extensive film making and upload a lot of content at once, the normal account should work for you. Also you need some patience when you upload a video, cause it can take hours for a video of seconds to be uploaded and available. A vimeo plus account is 59.95$ a year and you can find more information on it on vimeo.com/plus

So if you are creating audio-visual content, if you’re a director, 3D- or 2D-animator I can strongly recommend you to take a look around vimeo.

2 comments already

first animation trials

As promised I’ll show my first trials on the field of animation now. The first was an assignment for school, the second is just what happens when you go out to have a drink with me. icon wink first animation trials

[vimeo clip_id="19363030" width="570" height="314" html5="1"]
(If your browser does not support html5 video, try the direct link)

This was my first assignment at school, it was only supposed to be 10 seconds, but I wanted to try to play with the sound effects a little.

[vimeo clip_id="19519089" width="570" height="314" html5="1"]
(If your browser does not support html5 video, try the direct link)

In this I wanted to time the different still images according to the music, please tell me if I failed icon wink first animation trials

Give me the first comment

HTML class 1: The Beginning

Thanks to Miss Ragno from Merox.dk as our host for the first little web class we had together and of course everybody that participated.>
I want to put up a quick sum-up what we did for everybody that is interested or who couldn’t come.

Concept and Technique

Concept Technique
Sender You or your client Webserver
Message Do / buy something HTML
Receiver User Browser

Clean Code

What you should think of when starting to write a website is that you should use native html elements if possible, like h1, h2, blockquote and so on. Also very important that you devide content and style.
Bad:

<body background="#ff0000">

good:

<body> and additionally in .css file: body {background:#ff0000;}

Comments

Comments are extremely supportive when it comes to coding and learning at once, here the comment markup for HTML and CSS comments:

<!– navigation section, this is a HTML comment –>

/* multi row comments in CSS
for example: this not working in IE */

Validation

Validation is useful to get used to common guidelines. It’s not the ultimate solution, but sticking to the W3C rules is a good starting point. You can always add a browser switch for single browsers after that. (Eyeballing IE here)
Links for validation:

Also very important: remember your Doctype! (HTML5 not listed)

Sketches

webdesign sketch HTML class 1: The Beginning

Make sketches, in hand or digitally, just very roughly to define elements and layout. This will help you not to overload the page and stay focussed on your goal along the process.

Inspiration

Gathering inspiration is not really a big deal when it comes to web design. Check out the category for Web Interfaces on deviantART for example.

Resources

Editors

text wrangler syntax highlightning screenshot HTML class 1: The Beginning

Important when you choose your editor is that it supports syntax highlightning.
I recommend Notepad++ for Windows and Text Wrangler for Mac OS. Linux users: You know where to go, your packet manager gives you tons of possibilities.

Browser Extensions

Really useful, they help you debug, increase your workflow (and some of them actually look pretty sexy icon wink HTML class 1: The Beginning ).
My beginner recommendations:

Tutorials

Examples for great websites that have massive collections of tutorials and knowledge:

CSS References

Just a must-have for looking up how things are done and what can be done with different elements.

Vocabulary:

  • HTML = HyperText Markup Language
  • CSS = Cascading Style Sheets

Thank you for reading! Leave a comment with wishes for future lessons and general feedback please!

Give me the first comment