Musician Website for opera singer

[tinacious]

Hey everyone. I've created another screencast for a ProcessWire site I developed. Another you ask? My first one was of my own site, here. 

I developed this website for a Toronto-based opera singer from Norway. Nils needed a website where clients could go to learn about him, listen to his music, watch his videos, look at pictures and see where he'll be performing.

The website features custom Responsive Design and a separate mobile image gallery for phones and devices.

Read about the project and see some screenshots here, visit the website here, or view the

.

The admin theme used is a modified version of an older version of the Teflon admin theme.

[pwired]

How long did it take to find those colors for the menu, text bar, backgrounds and fonts ?

They all fit well together.

[Manfred62]

Hi Tina,

nice site. Also like your screencasts. But there's something to mention (from a semantic and validation fan)...

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnilsnilsen.com%2F

All the link-images (facebook, mail etc.) are better placed as background in the css.

There's a side-moving of the text when clicking other links in top navigation. Test this by changing between Repertoire and Gallery. Wanted effect?

On biography: maybe use overflow for the p's? So paragraph text will not creep under the picture.

[tinacious]

Hi Tina,

nice site. Also like your screencasts. But there's something to mention (from a semantic and validation fan)...

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnilsnilsen.com%2F

All the link-images (facebook, mail etc.) are better placed as background in the css.

There's a side-moving of the text when clicking other links in top navigation. Test this by changing between Repertoire and Gallery. Wanted effect?

On biography: maybe use overflow for the p's? So paragraph text will not creep under the picture.

Manfred, the slight shifting looks like it shows up because of the active state indicator. Good eye. Oops on forgetting alt tags for social media icons. I'll address these as well as other things you passed through the validator...

 

I'm not sure what you're suggesting with the image on the biography page—I intended to have the text wrap around the image, not show up in columns, so as to avoid a large area of unused white space.

 

As for your suggestion for using icons as background images, I chose to use images as elements instead of using them as background images because background images show up pixelated on retina displays (iPhone, iPad, retina MacBooks). I initially wanted to use icon fonts but found that the ones I chose were not compatible with older versions of IE. In an effort to keep up with the times and support retina display all the while still thinking about Accessibility and supporting older versions of IE, I opted for using images as elements instead of background images. If I went with your proposed solutions I'd have one too many fuzzy images for mobile users. No thanks!

How long did it take to find those colors for the menu, text bar, backgrounds and fonts ?

They all fit well together.

Thanks, I'm not sure how long it took. There was some iteration to get the colours to work with the photography but eventually these were the colours we went with.

[WillyC]

site.grate it is.very good !

 what kind singer.man smoken tobaccos  ?

-----------

editamos: 

[Manfred62]

I'm not sure what you're suggesting with the image on the biography page—I intended to have the text wrap around the image, not show up in columns, so as to avoid a large area of unused white space.

for me it just looks a little bit unnatural (left to right writing). See screenshot.

Test with Firebug, give .featured-image img float:right, so it looks ... cleaner?

regards Manfred

[tinacious]

I'll take your suggestion into consideration, thanks.

[kongondo]

Beautiful site Tina, good job!

/k

[tinacious]

Beautiful site Tina, good job!

/k

Thanks! 

[Basil]

great website!!!