Posts
This feed has moved and will be deleted soon. Please update your
subscription now.
1 year ago
Wednesday, December 23, 2009
Tuesday, December 22, 2009
photoshop colour for web design
really important article on how to setup photoshop properly for web
http://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/
drupal links - compact login block etc
compact login block - but IE7 has problem looks like
http://drupal.org/node/146023with jquery but theres problems cross browser with form prefilling
how to add function to change the text of the labels or submit button
this looks like a good drupal module to use for compacting the login block
----
other drupal stuff
----
a module makes the code formatting look good and can remove ms word tags put in by content adders.
-----
login or register link...
Thursday, December 17, 2009
white background flickering in IE, chrome
dark css background, wordpress install, when switching/loading between 2 pretty much empty black pages, i see an offensive white flash, nowhere do i have background-color:#FFF in my css, what gives!...
Wednesday, December 9, 2009
swfobject 2 and great examples of use code
http://pipwerks.com/swfobject/
swf as a background image examples... not using z-index, just absolute positioning
this example dosnt use z-index, but position relative on a wrapper, inside which the overlay content is given position absolute... source order of overlay and content not important as long as all in the wrapper...
reckons tested in Firefox 3, IE 6, and Safari 4
Tuesday, December 8, 2009
Flash Preloaders
Here are some preloaders I want to try out, just need a simple thin line with cutomisable colour, or full page wipe.
AS2
full page line, looks slick. dosn't work for some people.
http://activeden.net/item/fullscreen-ultra-thin-preloader/full_screen_preview/10734
good helpful comments, can be made to go fullscreen... no complaints.
http://activeden.net/item/full-custom-preloader-component-v1/8343
customisable lines and percents
another line loader- colours customise with changing movieclip manually.
this is cool it goes from middle outwards, not many purchases or info about it, but its nice and a bit different... hopefully can turn off the auto fade-out... no complaints yet, not much feedback. it might just blend ok with the other lines in the file...
AS3
looks good, fullscreen, customisable by code, all features, includes a fade into the flash file... new not much feedback.
this looks ok thought check ffox3 on PC see if it works...
JQuery Slideviewer and Supersized (lg bkrnd img) and fancy thumbnail
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/fancy thumbnail hover effect with JQuery - great for a little portfolio - would work cool as a massive grid....
JQuery Supersized-for large background image slideshows. adjusts the size of the image proportionally. )
-i might just use for that function, not for slideshow.
JQuery Slideviewer
This is worth a second look.
-from unordered list
-Has slide across transition, including customisable easing if desired.
-dont need to set width and height.
-Click image for next or use pagination (no thumbnails)
-preloading
-recently updated
-tooltips on pagination if required
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
Wednesday, December 2, 2009
Tuesday, December 1, 2009
New typography links and examples.. for great body copy, . and css font stacks research
is it just me or is it hard to find a fully sans serif website these days? everyone has jumped on the serif is ok as a headline trend like a rash... and serif does look nice, but it think it still looks too classic and antiquated for some brands.
my 2 cents, the next big thing in web - is making it look like print. clean, spacious, grid based print.
anyway looking for type inspiration examples.... and typography reminders
im thinking the key to elegance is NOT having liquid body copy... body copy should have set width for good line length... i think it butchers readability to stretch body copy. think between 450px and 500px seems to be good... and text should never wrap around a body image or thumbnail, but stay columned... (dont know how to do this in drupal css... )
(remember to post that bike shop, had amazing use of times new roman uppercase... )
and this little note about off white and dark grey instead of black and white... from pretty good primer / reminder, good ref of css sizing of fonts.
The best thing to do (in my opinion) is to utilize an off-white (#F8F8F8) font on a black background and a dark gray (#252525) font on a white background. It helps the contrast become minimal and doesn’t strain the eyes as much for your visitors when they’re reading your content.
also - font size 13px, line height 18px, p margin bottom 18pxis good.
reminder about fonts... surely it cant be true that windows dosn't have helvetica... cry... might be time to try the new windows fonts cambria, etc etc...
and a testing page and grid of whats installed in what
except- calibri here, tested against helvetica, its smaller x height, looks really different. the abovelink i noticed 'microsoft sans serif...' looks like arial..
survey of serif fonts for win/osx/linux, remember it good to include a unix font as cheap school computers might run linux etc... corbel, calibri etc are only rated at 50%... so for sans serif, microsoft sans serif is the go...
this site http://www.ars-informatica.ca/article.php?article=89 reccomends this font stack for arial/helvetica, includes the unix font too: (yuk, arial is preferrenced, why cant everyone get helvetica dammit..)
font-family: Arial, "Microsoft Sans Serif", Tahoma, "Nimbus Sans L", Helvetica, sans-serif;
and this for verdana based (more open letters, better at smaller sizes)
font-family: Verdana, "Lucida Grande", "Lucida Sans Unicode", Geneva, "URW Gothic L", sans-serif;
it looks like corbel is useful for replacing verdana, and its much nicer looking, calibri is ok, guess its a nice change form arial, but using these means testing different typefaces on different systems... i dont want a mac and windows sseparate stylesheet, i cant use calibri because of the x height problem mentioned above.
or simply...
- The ‘wide’ sans serif stack: Verdana, Geneva, sans-serif
- The ‘narrow’ sans serif stack: Tahoma, Arial, Helvetica, sans-serif
heres a cool interactiv font stack builder...
helvetica/arial based stack, except i would not include calibri it is small than others. theres an explaination of this font stack here. http://articles.sitepoint.com/article/eight-definitive-font-stacks/3 personally, i think its too much, i already have to test my site for zooming, resolutions, oss, browsers, text resizing, if i throw in these font choices, then i need to also test for different combinations of font installations... each variation multiples the testing by itself. bar that, id reverse this list, except for a headline or something for a designer audience if it has a fancy headline with adobe fonts. i want to see each font in action on each o/s on my sites before i approve of its use.
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
verdana based stack. except i would delete corbel it is smaller.
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
this list at the bottom has a good examples of sans serif font stacks.
some sites on this list are using lucida, for body text. must check this out, never considered it.
MAJOR RESOURCE POOLS
this is really the source...
SANS SERIF SITES
i think this is my favourite body copy so far...
all...
"Helvetica Neue",Helvetica,Arial,sans-serif
and 471px wide body copy...
but think the size is going to be too small for the job im researching. shame. its really nice.
this body copy is good too...
unexpected body copy font stack... verdana??
Helvetica,"Helvetica Neue","Lucida Grande","Lucida Sans Unicode",Sans-Serif,Verdana,Arial
but generally, type colour and line length good... 450px wide box...
sizing is probably the smallest i can get away with.
Font stack: “Helvetica Neue”, Helvetica, Arial, sans-serif;
just helvetica. (designers audience)
example of a lucida font stack for body copy.
just arial
i like this... lucida for body copy, helvetica for headings...
body copy... font-family:"lucida grande","lucida sans unicode",geneva,arial,sans-serif;
headings... font-family: helvetica,arial,sans-serif
(interesting the css property 'capitalise....' i hvant sen it before... good for cms's)
also like the block highlighting rollovers...
purely arial body copy but i quite like it, more condensed...
font-family:Arial,Helvetica,sans-serif
like this too... the r/ship of body copy and header / intro text... , although too small for my users. also really like the no nonsense clean sidenav.
everything..., font-family: Helvetica,Arial,Verdana,sans-serif
wow, just using font-family: sans serif! let the computer decide!! just have great type heirachy and leave the rest to whims of the o/s....
this does ok for 14px body copy... 570px ish column width, guess to incorporate the larger size... bit gappy though not that elegant.
er good.
all arial... except some lil italics in georgia... and some column headings they have done as a picture... especially liking the 12px all caps footer headings... good example of a 'nodes' type styling... and just black.
just nice type heirachy, small text (11px) is holding up well. good example of san-serifs being still good to use.
actual post width is 580px, 14px type isze.. i prefer the 12px excerpt size... actual post copy isnt that great.... but readable...
this site has mackin body copy, bit light though.
font-family: Arial,Helvetica,sans-serif
wtf, line height is set to normal... hmmm... font size 75%, no margin bottom. is it a fluke..??
i really dont get how they have differentiated the top page header from the blurb, they look like completely different thicknesses, but nothing fancy inthe css, just 10% larger... think im missing comething... its really minimal actually on the css... tricky... anyway heartening that arial can look ok, its going to be my entire font choice.
580px line length for the body copy area..
also, look at the news pages, good example of what to do if they sometimes add node images, sometimes not...
this is good too
its another ludica for body copy, helvetica neue for headings... 388px wide body copy, nice, narrow...
gotta find out if lucida is on pc and mac... it could be nice feeling change from all arial.. and looks great with helvetica headings.
a good reminder to notice, to get the headings looking sleek , not fat and ugly, they need font-weight-normal... otherwise they default to an ugly bold. also, i think verdanas bold is ugly, lucidas is much nicer... helveticas is a bit shitty too, at small sizes, arials is better.
actually, im hating on verdana for body copy now, too gappy... shit bold, only good for small footer text etc. sleek = arial, helvetica or lucida...
----
on a very side note, this is an awesome design test
swf as a background image (or seemingly) using swfobject and z-index
this looks like the solution... but needs testing...
Subscribe to:
Posts (Atom)
