francine87

Hi guys, http://goodlifefilms.co.nz I'm currently working on a site that uses fancybox to display vimeo video which works great in the FF/Chrome/IE but in Safari it stutters / lags badly EXCEPT in full screen mode??But by default my client doesn't think people will enable fullscreen, which is fair enough. Appears to work fine on iPad1 and 3 and iphone/iOS4 which is strange as it also uses Safari? Maybe it's different for handheld devices.. I've tried it on both Windows 7 (laptop) and a Macbook pro laptop. Tried it on a 24" Mac desktop and it worked fine,but not sure if that was just a one off. Also does not seem like a fancybox issue but the embedded code via vimeo (as when playing these videos in vimeo site works fine)...but I am still a beginner in the industry and if anyone could help out (whether if it's checking or pointing me in the right direction with my newbish code skills or whatever that would be great!) Please help! Else wise will be seeking elsewhere to upload his work...(Youtube was the only other one I was thinking of, but requires a re-upload of 60+ videos and changing everything to work with youtube!) ATTEMPTS TO FIX: I've spent the past couple days trying many suggestions/recommendations http://vimeo.com/forums/topic:18488 and vimeo.com/help/faq#stuttering and vimeo.com/forums/topic:60048 (whereby I have updated to Safari 5.1.2 and Flash 11.2.202.233 with no changes whatsoever on safari, have nothing else running etc...but on all these different machines it's the same issue/ same exact problem as this guy http://vimeo.com/forums/topic:45291 but it appears his is fine... have contacted vimeo but they didn't want to help as it they said it was outside of their realm (ie., using fancybox to display their videos)

Because I'm at uni on IE8, that's also what I see unfortunately! Have opened up Firefox now..it's very clean and professional. I think some subtle use of texture in the main nav and some subtle gradients could work quite nicely with the icons in the footer, just to lift them off the page a little. A friend's sites here works quite nicely in terms of balancing texture/gradients. Not too keen on how the type/font looks in the <h3>, just to be picky! p.s.-mobile version is looking great!

Bump! I just got asked by a client to do this as well but I'm pretty new to web dev (i.e., he currently has a flash website that he wants to work on his iPhone & iPad specifically). I've only had some experience in building sites with RWD from scratch but haven't ever dealt with redirecting sites. @Ste Hughes: CSS Tricks < I've been looking around to see what options there are... and was wondering if doing what you suggested ie.,create a mobile sub domain then redirecting the site as CSS Tricks suggested would make sense?

Hi joenutz! I really like the logo and the color palette (but not too sure about that red, which isn't as subtle) and nice use of type! Also agree that the logo would work better if it doesn't split (as it doesn't align correctly, and horizontal scroll bars are permanently visible on mine [Firefox 9.0.1] which I'm not sure if it's intentional or not) I understand it's not finished yet but was just having a nosy with http://validator.w3.org/, and just from my experience with tutors/industry panel/interviewers commenting on our portfolios, they were quite harsh with people who had invalid html coding practices (not necessarily CSS properties that won't validate, unless they're obvious mistakes), and cross-browser compatibility (was just checking on IE9, and the logo is hidden completely-except the bottom 1/2) p.s. the majority of errors are easy to fix like some of the <li></li> not being wrapped in a <ul> or <ol>, and img tags missing alt tags , '&' missing & and so on. Else wise, really liking the look of it!

01 02 03 < messy as it was a group project, but oh well. 04 < working on currently

mediaquer.ies - loads of awesome examples for you to choose from there.

..this bit. I've done a few RWD (combining fluid w/ responsive elements) as a client wanted it done-and I started by doing what you did (going through Ethan M's book and his respond script)-really good stuff. I did download some template grids like the 1140 just to see what things were doing/how to handle things, but never used it. The only thing I still use from them is their 1140 grid psd template to design in Photoshop, so when you do start coding it's very easy to work with (ie., working out perfect margins, as everything is pretty much done in percentages for containers/em for fonts etc). I could see how doing an existing site not RWD would be a nightmare to change-but if starting from scratch it's pretty sweet. As suggested by Ethan M. use min-width/max-width in pixels for the outer most container-then everything within these wrapper(s)-then everything within this can be worked out in % (which is where the usefulness of the psd grid comes in). Then eventually use media queries to target the specific size/orientation you want and change the size/% of the containers to the sizes you want it to look like on mobile. Some suggest doing it from mobile 1st -which I haven't tried but either way it seems to work fine. Don't forget that important meta tag with device width!(it's all in the book really). Good luck! p.s. you can start coding your html like normal (wrapper as max-width:960px;/2 columns within this would be both float left then 48% each etc)-i.e., get the skeletal structure down in block colors, then change them into % in css to see what happens.

Hi! Just looking @ your CSS briefly with view source and looks like you want these guys to show up in your main-nav? And looking at firebug, they aren't even showing up (which I have a feeling is because you may be targeting things incorrectly or elements are cascading...) Haven't tried it-but looking at the your css/html for the nav which seems to be made up of lots of <ul></ul> with 1 <li></li> per nav link (except the dropdown)could be easier to work with if you tried something like... <ul class="main-nav"> <li><a href="index.html">HOME</a></li> <li><a href="page1.html">PAGE1</a> <!--start drop down--> <ul class="dropdown"> <li><a href="#">DROPDOWN1</a></li> <li><a href="#">DROPDOWN2</a></li> </ul> <!--end drop down--> </li> <li><a href="page2.html">PAGE2</a></li> <li><a href="page3.html">PAGE3</a></li> </ul> ...to target things/the entire ul much more easily I reckon, as ul(s) are generally used with more than 1 item as I understand it! But firebug also says: 'failed to load image' so perhaps try this as well in your css: #navMenu ul li a { background-image:url(../images/menubar.png); //ETC }

sorry to bump- but wasn't sure if I should start a new topic for this or not... Having Flexslider issues! I've used it a couple times before and it's always worked perfectly. This should be simple (but for the life of me...it's just not working, and I've tried for ages trying to figure out what's wrong-including using the demo, and just can't get it... http://francine-chong.com/njoy I've put alerts,and things are definitely hooked up and loading. Images show when they're not in the .flexslider ...Argh! Even had to copy & paste the entire D:

...that's really good advice. Love this forum. Here's a nice example here

Thanks again guys! Agreed with pretty much everything that's been said and working on them now. @Perdo: Great spotting with the bg! Didn't mean to make it responsive-it just happened lol.. As for the logo & packaging design...I have no say in it-but I know.....I know.... D:|

http://francine-chong.com/njoy Currently trying to finish off the design/static prototype of a Juice site by Friday ... it would be helpful to have any critiques (work in progress-as you can see all the images/info are virtually the same). Also still working on IE fall backs/fixes for css3 effects once I finish layout)-sorry IE users. So far I'm worried about: -is the green (which I've taken from the leaf in their logo) a blinding 'poo-green'? At first it felt like lime..but now that I keep staring at it.... O_o" -I HATE the splash page -still unfinished-(requested by client-who wants the 2 bg images fading in & out with that (the other of a family picnic with their products-but I feel like it's a waste of time/space?) (also is it weird that it takes you to the about page 1st when you click into it since they dont have a 'home page'? It might work better going to the products page perhaps?) -is the shopping cart/checkout link prominent enough? -does it feel 'juicy' enough? lol.. I realize it's a little boring at the mo. But am thinking of incorporating more imagery but everything I have to work with off their original site is a little difficult to work with..( www.njoydrinks.co.nz/ ), but they're willing to purchase more stock imagery. Thanks in advance!

Ahh crap-forgot to mention the design aspect. The course also includes (approx. 2-3 weeks) an intense crash course in: Photoshop Illustrator Fireworks/Reader (pdf) for creating interactive prototypes from design mockups + group critques with all formatives/summatives (on design/functionality/UX/interactivity) + awesome community of like-minded individuals during & after the course. But yeah-agreed with the comments above regarding the move to HTML5 + CSS3 with fallbacks. A great course if you're up for it/nearby! (really selling it here..you'd think I was paid to lol).

@brightonmike Yeah fair enough. I probably wouldn't have spent/put the same amount of effort on my own (coming from a fine arts degree). I do realize it can be quite costly to study in NZ for foreigners (high school/regular course at uni here would cost you around £12,000 per year as international students). As a local I paid around £4000 so it wasn't too bad. We did have a few who came over from the UK/Switzerland to come to this school-apparently it's quite well-known for new media/design institutions (but not if you're aiming to attend a well known university over a diploma course-in all fairness I wish I did a Comp Sci degree in addition to this course). However, the people I know who did this course were graphic designers/art + comp sci graduates (a few who have worked in back end/IT for awhile who want to move to front end design/development)-not a course to become a hard core developer if you're not a natural unfortunately, but a great starting point if you're like me!

I really like it! It has quite a different feel from your portfolio site that it was linked to though (awesome color palette/use of illustrations/type choices of your portfolio btw)! But it suddenly goes from a dark mood to a lighthearted feel-not sure if that matters though. Equally lovely.