Hey all,
There's a joke in the interactive industry that many people and companies get so busy that they never take care of updating their own websites. I seem to have fallen into that group of people over the last couple years.
Last Thursday I made it my new mission to get a new portfolio site up and running within a week... It is still a little buggy, especially for those on lower resolutions (~1024x768 will give you some trouble with the music player and album info). Your connection will probably choke if you aren't on broadband.
I just thought I would share. Comments and bugs are appreciated!
link
 Toronto, Ontario, Canada
About me
My Gear
Mixer:
Allen & Heath GS3V - 24 Channel Sound / MIDI Interfaces: MOTU 828 MKII MOTU MIDI Express 128 Samplers: Akai S5000 w/ 168MB, EB20, VOX64, USB, 16 OUTS, CF Reader mod Yamaha SU700 w/ 68MB, ASIB1, SCSI CF Reader Mod Akai MPC1000 w/ 128MB, JJOS2, Pad Upgrade Korg Electribe ESX Analog Synthesizers: 2 Voice PAIA 2700 / 4700 Modular (21 modules, regulated power). Analog Modelling Synthesizers: Novation A-Station Digital Synthesizers & Drum Machines: E-MU XL7 w/ X-Lead, Composer, Orchestral 1 & 2 ROMs Electribes EMX, ER1 MKII Casio SK1 & SA5 Rack Effects: Electrix Filter Factory & MOFX TC Electronic M300 Microphones & Field Recording Tools: Shure SM57 & SM58 Zoom H4 Guitars: 1991 Mexican Stratocaster Takamine EG523SC DeArmond M65 Guitar Pedals: Zoom 3030 Boss NS-2 Amplifiers: Marshall VS30R Fender PR241 Studio Monitors: Adam A7 MIDI Controllers: Akai MPD32 M-Audio Radium 49 Computer Mac Pro 2x 3Ghz Dual-Core Intel Xeon 8GB 667 MHz DDR2 FB-RAM OSX 10.7.4 Dual RAID arrays. Displays: 30" Apple Cinema Display Software Used: Audacity Live Reaper Reason Recycle iPad Running: Tabletop Rebirth iMS-20 Bassline Funkbox BeatMaker 2 Animoog StepPolyArp DJ Setup: 2x Gemini PT-1000 Technics SH-EX1200 battle mixer +Most Recent Blogs
|
Electronic Music personal: New portfolio website
Store
Written November 30 2009 , Tags: web design, development, portfolio
Comments
Page 1 | 2
I'm running K-Meleon @ 1024x768 and it looks fine to me.
Load time is OK (I've got broadband). Only weird behavior is that I can page down and am just left looking at background, but when I page up the rest of the interface is visible. There's no vertical scrollbar visible except when I expand the portfolio entries beyond the lower edge of the page. This is minor, though, and If I didn't hit page down I wouldn't have noticed anything. The subpixel shading on the larger fonts is too much. I've wondered how to remedy this, it seems that Adobe fonts in Illustrator always end up like this when rendered... I don't suppose there's a way to render the MS Office ClearType fonts? They're the best screen fonts, and ClearType is the best subpixel shading algorithm, IMO. MS got that right at least. Also, the small fonts are too small. The page looks better to me when zoomed in one level. Other than that, it looks a little too much like iGoogle for my taste. I don't mean to sound overly critical, it's a nice page. And I don't know how to make web sites, so who am I to criticize anyways? link ( It's my day off - I got bored and fixed the alignment and kerning and exported as a <3kb PNG: link ) The larger font is Iwona Light 18pt ( link ) - which I'm not totally sold on, since it was designed as a print font rather than a screen font, but it is reminiscent of the font you used, and it really is a well designed font. The smaller font is Calibri 9pt from MS Office, which is the one I wanted you to see. It was rendered in MS Paint, since Paint uses ClearType subpixel shading, unlike Adobe.  really nice and clean page. i like it a lot!
Really nice. I like the Shadowbox. Really cool how you implemented the mp3's in it. Shadow box loading is a bit slow tho
This is slick, man. I am having no trouble loading anything so far and my connection is only 56 kB/s.
I am running in 1650 x 1050 by the way and it looks great. It would be nice if you could listen to music while still browsing, though... just a suggestion.
Recent blogs: A secret admirer?
the design is nice but gimme some HD!
I agree. Larger type! I like it too. It's very simple but very strong.
btw, totally agree with Mechanism about being able to still listen to music while browsing the site.
Hey all,
Thanks for the comments! @eyesnine I actually didn't touch Illustrator for this, it was all Photoshop, that said I agree that Adobe doesn't render text anti-aliasing too well. I quite like the Din font family though, I was trying to carry over some of the design elements from my last album which also used Din. I agree that the fonts are a wee bit small, but I actually moved them down 1px to make sure that the page would mostly fit on 1024x768 when the drop-downs are expanded. I'm not too concerned about a vertical scrollbar, it's only horizontal ones I'm concerned about. That said, the page does look much nicer on anything over 1024x768 when no scrolling is required. I really don't care about users running anything less than that. Do you think you could render that image for me on a transparent background? I wouldn't mind throwing it in there and seeing how it looks! Thanks for taking the time to do that. I assume by the smaller font you mean the one in the heading image? Unfortunately there aren't a lot of options to use as live text when it comes to websites. It should be displaying Helvetica if you have it, if not Arial, if not that then Verdana, if not that then any Sans-Serif. @Fant00m The only reason Shadowbox should be loading slowly is on the portfolio pages. Those are all high res .png, most are above 300kb. I can't really do anything about that without sacrificing the quality of the images. @Mechanism & Fredo The idea there was to try to get people to download. Also, to avoid having additional windows popup for the player. I really don't expect people to sit there and listen to the whole album or EP in a shadowbox when there is a free download link right there for everything. @Spark HD? Huh what? --- Other than that the only bug I've found (thanks to pextris on his netbook) was that on resolutions smaller than 1024x768 (he was running 1024x600) is that the shadowbox on the audio sections wont introduce a scrollbar when the box is too small to display the album info (tracklisting and download link). I am currently using an iframe shadowbox to bring that content in but just may move that all to inline content. That would also remove the problem of watching the album art load on load of the shadowboxes. Anyway. Thanks for all the feedback! I hope you enjoyed listening to some tunes as well! No expert on picture format, but wouldt it be better to use plain JPEG? IE hates PNG's, they tend to get really scrambled
JPEG is lossy, so it's terrible for rendering text. A lossless format like PNG works much better.
I'll see what I can do about rendering with transparency. I may have to go outside of MS Paint. Actually, if the ClearType algorithm works like I think it does, I'm pretty sure it won't look as good. Maybe I could just match the colors? I'm not sure if you knew this or not, but ClearType is quite different than anti aliasing (which is what I believe Adobe products implement). Check out the Wikipedia entry if you're interested to see how it works, and why I think changing background colors and transparency might mess things up. link
@Fant00m
There are many ways to get IE to render png in IE6+. IE 5.X is a bit of a different story, but I believe it is achievable. Nobody codes for anything under 6 anyway. The main reason for PNG is so I can show full size screen caps of my design work. It's very important as it's the design and dev work that pays for my living. I use the DD_belatedPNG.js PNG fix for anything ~IE7 like so: <!--[if lt IE 7]> <link href="css/ie6.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('.heading,#biography,#discography,#portfolio,#events'); </script> <![endif]--> There are various methods to achieve this but I've tried them all and DD_belatedPNG.js does the job best. That said, it takes a little more work to set up as you have to specify the ids and classed that it will use. @eyesnine Oh yeah, ms paint huh! If you could render it on top of the following image that would be awesome (this is just a 1px sliver but its what I use for the header bg - it is a gradient as you know): link I will definitely read up on that wiki article when I have a moment. Thanks for that! link I couldn't make the text render on top of the gradient, it worked fine on top of a screen capture, though (MS Paint :S). I believe there's a pixel missing at the top - for whatever reason, it's only 65 pixels high. I tried downloading Din, but I couldn't find it. It's a good font for screen - I like the veritcal / horizontal lines. Oh, there also seems to be a vertical line of white on the very right side.
I think it looks really classy, though. Typography is fun!Page 1 | 2
Signup to comment
|