Subcultural engagement for the 21st Century...
Barbelith is a new kind of community (find out more)...
You can login or register.

Underground > Art, Fashion & Design >

Web Design Roundtable

Page: 1 2(3)4

01:29 / 11.12.05

I link using http:// in general. I usually set up the link text to have some warning though.

ex.
Call-to-action
(rt-click or ctrl-click to save)

Granted, a regular click might start having the browser chew on the file, but I think there's fair enough warning to proceed and still no need to go exactly by the book and use ftp. I think there used to be a problem with ftp requests in browsers back in the day and one could only use a dedicated app for transfers. I doubt it's an issue in present times.

In terms of IE7, there is a Microsoft blog that details the structure and the process the team is using. Pretty interesting for MS to have that kind of transparency but I think they know that there's stakes in releasing browsers now and want to appear "on our side."

A few of the improvements will be:

PNG alpha-transparency - finally.
:hover on all elements
better css support and bug fixes

All I'm concerned about is the differences between IE6 and IE7 support and making sure that prior browser hacks won't throw off the new one. Don't need clients thinking that the work was faulty on older projects. We will be able to put the previous generation of browsers, IE5, etc., behind us for good though. I guess it's wait and see.

20:42 / 01.08.06

does anyone have any leads on good music playing options for a site?
ideally something unobtrusive.
i am looking for something it's relatively easy to add new files to, and something that looks like part of the page.

i'm going to have to use flash, arent i?

i hate flash.

20:46 / 01.08.06

i'm so glad we can start to see the back of IE's quirks. i wish it was just over now though, and we could forget about it already.
i havent seen much of it beyond the version i have, but i have disliked every one i've ever viewed the web through.

i hate IE like i hate socks with big holes in the toes.

04:06 / 03.08.06

On your music question, if you want something that's versatile enough to handle the input of audio tracks, you're looking at flash. Problem is, unless you do some tricky business w/ frames (to get around multiple page visits and refresh), you'll end up having to build an entire flash site.

Do the costs of accessibility, ease of site update and search engine optimization outweigh the need for it to be there? Unfortunately, the dividing line lies between having audio options like that and reconsidering its use entirely.

17:21 / 03.08.06

right...
there is a very limited budget, and the emphasis will be on setting it free to live in the wild, or rather the hands of a near-novice.

i was shying away from WMP, etc, because it looks so damn ugly.
i want something that looks nice, but i have never built a flash page in entirety.

if you were making a budget site that required a portfolio of music to be available, preferably looped and selectable(or even skippable), how would you go about it?

would you guess it's probably safe to assume anyone looking at a site for musical services would have quick time somewhere?

ORA ORA ORA ORAAAA!!

03:52 / 06.08.06

use delicious AJAX!

Which is easy to say, and maybe a little hard to actually implement.

But in theory you should be able to set up an embed object which quicktime or media player or whatever will handle, and feed new songs into it from forms or drop-boxes or links or whatever, through cunning use of javascript.

I, personally, could not do this right now (though I could probably figure it out after a while), but there's a couple of things you can use to make ajax stuff with much less effort on your part. And that might be the best way to go about it.

There's a bunch of stuff here and the Wiki has a good overview of the theory behind it.

I hope that helps. I can't think of a simpler way to do it that doesn't involve names frames and targeted links (which would be easy but messy).

actually, having re-read this, yeah, you want flash. But you can use flash pretty simply with javascript to do stuff like cue playlists, etc. The top couple of hits here look pretty useful.

13:54 / 06.08.06

I haven't messed with it myself, but I found this on sourceforge. It might suit your needs.

Any time I've had to make music available on a site, I've either embedded it in a page via quicktime or linked to the mp3 outright. My thinking was that if someone chose to download an mp3, the media player plug-in they use will handle it (Quicktime picks up the ball for me) or they can download it, open it in iTunes, etc. This obviously doesn't work for background audio or any other sort of playback while visiting a site, but it also doesn't force people into some proprietary method.

RFR... I've not messed with AJAX at all but it seems to be promising. If places like Flickr can get that kind of use out of it it has to be good. My web dev recently picked a book up on it to get an intro to it and see if there's anything there that we can fold into our process.

I keep an eye on all sorts of web technologies but I try not to pick up new things too quickly. Often times the tools that we have available can do quite a good job already. Beyond AJAX though, I've also been looking a bit at Ruby and Ruby on Rails. Anyone else here develop with any of these technologies or see anything cool on the horizon?

ORA ORA ORA ORAAAA!!

13:36 / 07.08.06

I've recently installed ruby on my machine, actually, since finding out that my webserver can run it. I'm looking to make a little program that checks its email, and if there's a picture in it, posts it on the web with the accompanying text in the email (as long as it is from a sender it recognises, i.e. me). I'm doing this so I can take crappy pictures with my phone, and email them to myself, and get them uploaded without me having to do anything, particularly.

I'm the future of photoblogging, me! (just like everyone else who already has well-written backends to do this sort of thing... bah)

I was going to do this in perl, but the thought of mucking around with UUEncoding, or whatever awful thing my phone does, in perl, turns me off a bit. Maybe ruby will have a magic answer that makes things easier. We'll see.

A beautiful tunnel of ghosts

10:54 / 28.09.06

I'm trying to develop rollovers for a simple image gallery that, when the user mouses over the thumbnail, displays the image at a larger size.

I can do it in CSS, and with the JavaScript script that I've used, mousing over the image shows the larger image, but either disrupts the layout in doing so or only shows the larger image behind the other thumbnails.

I have two questions: is JavaScript or CSS the most effective method of doing this, and; with the JavaScript that I'm using, how can I achieve the same effects as the CSS, ie displaying the larger image over the thumbnail without disrupting the layout or 'trapping' the image behind the other thumbnails?

I'd be grateful for any information or advice, as I've only started learning JavaScript and want to be able to use my scripting powers for good, not evil.

00:35 / 29.09.06

Someone I do web dev with found this nice script to do web galleries with. It sits above the document structure which is good but it might not be the look you want.

Usually speaking, shifting sizes of images during a rollover will kick the content below it further down the browser. If the design accommodates this by not having anything below the image, you can avoid the visual shift.

A beautiful tunnel of ghosts

19:09 / 01.10.06

Thanks very much for your comments and for the link; I’ve recently been looking at different methods of presenting image galleries online, including Lightbox, but as a prewritten script, while it removes the need to write the code myself, it’s more fully functional than I need. I’ve been writing HTML sporadically for the last six years, CSS for the last two, and JavaScript for the last year; I’ve recently begun a web applications development course, although my current knowledge and understanding of JavaScript extends only to the customisation of prewritten image gallery and slide show scripts. I want to be able to write the functions that I need, or where necessary, import a prewritten script, for which I’d be able to read and understand the code.

My current image gallery script attaches behaviours to a set of links, which, when activated, load their destination into a display area on the same page; can JavaScript be used then to load a set of destinations as a gallery within the display area on the same page, or does such dynamic behaviour require the functionality of either AJAX or a server-side language like php?

I’ve seen a few layouts and behaviours online that achieve the effects that I want, including David Blanchet’s Hoverbox/Lightbox combo and Stu Nicholls’ multi-page photo gallery. However, I don’t currently understand the php in which the former is written, and the latter uses CSS to achieve its effect, which, as I currently understand, seems non-compliant with web standards. If I have to forego compliance in order to do what I want, I can rewrite the code later, but I’d prefer not to have to learn another language at the moment.

Stu’s gallery achieves its effect by floating a layer over the element with z-positioning, and I’d like to do the same with JavaScript using the DOM, but I’ve been unsure as to whether JavaScript or CSS is the most effective and efficient method of doing so using semantically correct, standards-compliant code. If neither offers the most efficient or effective way in which to do what I want then I’ll learn another language, but I’m trying to focus on what I’m learning at the moment and understand its potential; however, when all you have is a hammer, everything looks like a nail.

02:40 / 20.10.06

Well I guess it's whatever you're trying to get at for the moment. I usually lean more towards trying to express things that don't break standards-compliance and can degrade in a functional way. The php programmer I work with can handle much of this front-end consideration with added layers but these things still crop up.

If you're trying to be compliant, the javascript solution will do the job as long as it degrades into something that's works when javascript is disabled. If it tests well in CSS with the audience you're hoping to reach, then I would consider that another option. If it's not really either, then tackling the problem as a structural or design problem before you end up having to choose the better method is best. Unfortunately, it's a lot of trial and error.

Let me know how things work out.

Something else here... it appears that IE7 is available for download and I'm wondering if any barbefolk have given it a shot yet. Since I only have one Win2k PC at home running IE6 and a machine running IE6 at work that I can't mess with, I don't have the option to install it.

I should also warn (from my understanding) that installing IE7 will remove your older version unless there's a reliable way to make multiple versions of IE present on a PC.

10:15 / 24.10.06

would anyone be up for having a look at this here website and telling me what especially sucks about it?
i know it's rubbish on safari due to the images overlapping. i'm going to look into tweaking that first, probably making the centre image smaller.
criticism or advice as to how i can better it would both be good, and if you have any other thoughts i'd be glad to hear them.
stuff about design or code or anything that comes to mind, really.

11:17 / 24.10.06

Toksik, I'm not a designer or a programmer but I used to work for an Internet consultancy producing websites for people like M&S. I just looked at your site and two things struck me. The first is that you can hardly read the copy because of the background image and the choice of type colour. Second is that there is no consistency in the copy. If you're going to write ©opyleft with the © sign, then you must always do that. Simlarly, if you are going to capitalise the beginning of some sentences then you should capitalise them all.

I know that's not programming help or design advice really, but it's important if you want to present the band as professional and not amateur.

11:33 / 24.10.06

no, that's fair.
looking at it, i think i have accidentally uploaded an old version.
the text was in small caps before, and i think the missing capitalisation is a hangover from that, and the missing circle-c is a cut and paste error from source text to site.

i'm also noticing spelling mistakes and typos now that i look at the link, which clearly makes it look ridiculous.
i'm kind of annoyed at myself, and i wish i was home to fix them.

curses.

ORA ORA ORA ORAAAA!!

12:53 / 24.10.06

I've got to second the "I can't read it".

Also, the google audio thing you're using (what is that? - it looks promising) doesn't work for me.

Also, if you've got stylesheets disabled (some of us do! I don't, except when I am checking this), it degrades disgracefully. In that none of the actual content is available before the fold. It also doesn't deal well with smaller window sizes, due to the positioning of the background graphic and the logo. They overlap, and it's not good.

The side graphic has visible artifacting in it, you should probably get rid of that.

All the complaints in the world, me. I want the moon on a stick.

Something you might be able to do, in order to get your images to play nicely together (might fix your safari problems, too):
Put one big div box around everything, positioned as relatively as you like. Width = 100%. Inside this div, build three more.

One is your sidebar, with the image. Give it an absolute width, and probably an absolute position (absolute/relative positioning always breaks for me, so don't listen to me about it - but this is how I'd start it). Absolute, relative to the box it's in, right?

Second one is your content. This box should be variable width. Fixed position, too, starts at the end of the first box. Set the div background to be the copyleft logo. You probably do want to make it smaller, though.

Third one, music links, is an absolute-width, relative position thing. Or something like that. Play with it a bit.

you could make a fourth one, if you needed it, to carry copyleft information and general footer stuff, just position it so it's a big wide box inside the biggest outside box.

That may be the most unclear thing I've ever written, feel free to pm me if it's not making any sense. Or if it doesn't work out at all. Or... anything.

ORA ORA ORA ORAAAA!!

12:56 / 24.10.06

something quick that would make it better for the non-css crowd, and for screen readers and the like: just move the main content to the top of your code, and then put the music link part, and then the logo. You're positioning everything with css anyway, so it doesn't matter, but it'll make it degrade in a more graceful way, and make things easier for people with disabilities.

07:31 / 11.07.07

Hey, I'm trying to get into web design again, and will eventually need Photoshop, Illustrator and Flash, but I'm short on money for the time being. Does anyone know of places that sell any or all of these programs at good prices?

MattShepherd: I WEDDED KALI!

13:55 / 11.07.07

Te, have you tried the GIMP? It's an excellent open-source image manipulation program -- it doesn't do what Photoshop does, but it's fine for basic image stuff.

12:25 / 12.07.07

Yeah I've tried that before and it's cool, but I'm kind of imagining the scenario where I want to get properly into web design, and the time when I'll actually have to try and find the money for the proper programs I'll need. I think I can get away with having photoshop, illustrator and flash, but knowing the way things work there'll be one or two other programs that I'll need too.

It's probably a way off yet anyway though, so I'll get the basic css + html learning sorted before I end up buying anything. Just thought I'd check incase there was a decent place to buy these crazily priced (if you're broke.) programs a bit cheaper than most other places.

08:30 / 13.07.07

Also : What type of program would people usually use to make fonts if they did web design professionally, illustrator? If so, is there anything else that would make them as well as that program?

15:52 / 14.07.07

The only way I can imagine you getting those adobe products on the cheap, would be to purchase someone's license, factory discs and manuals if they put them up for sale (ebay, etc.) or to get an educational version if you're enrolled in studies at university or something.

You can run 30-day trials of the software if you download it from Adobe's site, but 30 days really isn't all that long... especially if you're trying to get a good grasp of how to use these programs for web design.

As far as font creation is concerned, do you intend to create your own font that you wish to distribute or do you mean hand-done fonts that you want to use like graphics? The reason I ask is that there's quite a distinction between the two. Also, if you intend to create a font library and use it as web text in html, people won't be able to see that font if they don't have it already running on their system.

The only fonts that you are guaranteed to have show up on both windows and mac systems as web text (safe fonts, if you will) are the following:

Arial | Arial Black | Comic Sans MS | Courier New | Georgia | Impact | Times New Roman | Trebucher MS | Verdana

An awesome type tool that you could use to look at type styling can be found here. It'll also generate the css for you.

Illustrator would be a good place to create and/or modify current typefaces (create an outline of the font you want and tweak it), but it doesn't make it a font you can distribute.

I'm not currently familiar with what software packages are out there at the moment to create font libraries, but Adobe (maybe even Aldus at the time) used to have something called Font Maker Pro, I believe. In that program you could adjust the spacing and kerning between letters and letter combinations, ligatures, baseline, etc. Then you publish it as a library and you have your own type face.

I'll do some digging around to see if I can find a modern equivalent of it.

22:50 / 03.08.07

Waaa, sorry I forgot all about this thread! I rarely visit this forum and have been concentrating more on content for a site lately than I have been with the design side of things.

Yeah I downloaded the 30-day trial from Adobe, and I'm waiting until I have a decent amount of time spare to learn a bit before installing it. Buying a second-hand version does seem like the best idea aswell, agreed. It's not exactly hard to get one copied from a friend, etc, but I want to make sure I have a legit version if I'm looking at properly applying the things I'm learning and putting them sites, so I'll probably go for the second-hand option if I'm still looking to start using it and have the money at somepoint.

The fonts would be for site graphics too, yeah, but thanks for that font tool link, that's great! I've been a lucida fan for a decent while now, but I've been forgetting that it might not show up on quite a lot of pc's, so I'll have to add more fonts into the css asap. So I guess when you see things like : font-family : lucida console, verdana, trebuchet, etc, etc, the fonts after the first are there as a back-up for the people that can't see your preferred font? If so I'll have to get that sorted out. I've been using lucida console mainly, but after checking that link lucida sans unicode (think it was that.) might be something to try out instead, because it looks neat. Being able to see the difference when they're side by side easily makes that a useful resource.

Thanks again for the help!

23:19 / 03.08.07

The only fonts that you are guaranteed to have show up on both windows and mac systems as web text (safe fonts, if you will) are the following

Century Gothic!

Century Gothic!

CENTURY Gothic!

23:23 / 03.08.07

Goodness, but that's a useful typesetting tool.

04:10 / 05.08.07

grant - those be some useful links too. I've stuck with the standard list of fonts I provided for the last few years, but it's probably time to include some more. Over time, even the majority can move up a notch or two on the technology ladder and provide us some more options.

It's surprising what you can do with the standard typefaces if you spend time messing with line-heights and word spacing. As any good, old school typographer will tell you, it's good practice to stick with 3 styles of the same font when doing a layout or working with two distinct typefaces without too much variation. Each style can be considered its own typeface, in a sense, so it's good to avoid distracting the eye with too much visual excess.

The name of the type creation application I tried to come up with before is Fontographer. The main site is currently down (figures), so I listed the wikipedia page for reference. As the page mentions, it's the tool for typefaces. I know people who ran OS9 on their macs for the longest time just to support this application (not even quark). Type foundaries like House Industries to use it, last I heard.

16:41 / 06.08.07

Immediately after posting what I did, I started mucking around with Century Gothic as a small-uppercase font - it's like a whole new typeface (and somewhat lovely).

I just wish it worked better on Firefox or IE pre-7 as a body text font. Too jaggedy, I think. Looks lovely on Macs, though.

And makes for great titles & headers. If you like old-fashioned elementary school textbooks.

Anyway, font-variation: small-uppercase is kinda cool.

I seem to remember Chank Diesel praising Fontographer on his site.

20:00 / 15.08.07

I think I designed my site to work on small monitors to appeal to the biggest audience. i say 'think' as it's a while since I looked at it from any other computer and mine is the poor mans work horse with a small monitor. It's a site to promote my art work and I am thinking about putting a slideshow instead of a single static image on the first page. I tried using code I found to create a slideshow but it didn't seem to work, can anyone help out with some slideshow html that I can cut and paste in dreamweaver? www.timlebreuilly.co.uk

15:20 / 17.08.07

I don't have any code on hand, but I recommend heading over to script.aculo.us and looking around. I've used the lightbox feature in a few projects before and have seen some slideshow functionality around there.

13:32 / 22.08.07

I've worked my way up through one of the biggest digital creative agencies in London for the last three years - I'm a designer and front-end developer. Last year I upgraded my standard screen size to fit a 1024 x 768 monitor - 980px x 550px (for information you want to be above the fold).

Ideally, you should always design/code for all circumstances, so even if you set youy main width to fit 1024, your website should still work in 800 x 600.

Good luck!

09:41 / 14.09.07

A bit of a general question here, but does anyone know any helpful, friendly, good-all-rounder Flash sites?

I've just changed roles and am basically starting from scratch with Flash and Actionscript, and I would appreciate anyone pointing me in the direction of any resources that are good for beginners (with Flash, I mean - I'm up to speed with a fair few other languages, so I don't mind a bit of technical talk).

Cheers!

MattShepherd: I WEDDED KALI!

13:15 / 14.09.07

I'm sort of caught between a rock and a hard place with my site right now. As it stands, I think it scrapes the lower border of OK: it's fast, functional, and easy to navigate. It's nearly-entirely HTML, which means it's easy for me to monkey with (I don't know anything else).

But as my writing sidelines drift more towards being my writing mainline, I wouldn't mind a more professional presentation and better "look" to the whole thing. I just get stuck by the idea of, well, changing it.

At the risk of sounding like a grumpy old man, I have the unshakeable conviction that you can produce simple, stylin', fast-loading and easily navigable Web sites with HTML and a small splash of Java.

But I'm a little stuck on where to go from here. I've got LOADS of content I could add, but not much point until I get to a redesign. I guess I'm fishing for suggestions.

14:32 / 15.09.07

mkt - if you're starting to learn flash, are you going to be working with the most recent version, Flash CS3? I would recommend that you start with the most up to date tech so that you can start off with fresh tools and use the most recent actionscript coding methods.

The CS3 version has a number of features that make it a really nice upgrade. Specifically, it's so much easier when building and importing elements into flash from the CS3 versions of Photoshop and Illustrator. No more converting files so that they play nice with Flash. It's a huge time saver.

Places to begin? Kirupa's been offering all sorts of useful tutorials for a number of years, so I would suggest taking a look at his site. Flashkit and Actionscript.org used to offer some useful tutorials.

I've found that books and desk references seem to be the biggest help. It's been a while since I've had to pick up a beginner's book, so I can't speak to what's available at that level. It's probably worth paging through a bunch of books at your local book store and seeing what works for you. Once you've gotten some skills underneath your belt though, I can't recommend O'Reilly's books highly enough.

03:24 / 16.09.07

Here are some great resources with free Flash tutorials that I've found very helpful:

http://www.echoecho.com/flash.htm
http://www.newtutorials.com/flash-tutorials.htm
http://www.webwasp.co.uk
http://www.gotoandlearn.com/download.php

gotoandlearn has only downloadable flv tutorials at the moment and I found that I had to convert some of them to Quicktime files to get them to play on my Mac, but they are excellent and well worth the effort.

10:21 / 21.09.07

Cheers for the pointers!

At work, I'll be using Flash 8 for the forseeable future - much as I'd like to get stuck into CS3, it's probably best to put that to one side for now.

I've got a copy of O'Reilly's Essential ActionScript 2.0 and I'm very impressed with it, but to be honest, ActionScript is the least of my worries! After two weeks of working with Flash, I'm still struggling with the front end - a general guide to Flash itself is what's required, I think, and it doesn't look like O'Reilly do one of those.

I shall certainly have a root around the recommended sites, though. Thanks again!

Page: 1 2(3)4