Hi,
sorry I’ve been the last few days away drinking too much beer at the Fronteers Front-End Conference which was awesome even if it did involve Paul Irish showing us sharks with lasers coming out of there eyes for some reason…
Anyway:
I have made some changes to the alt text on the site but assume this whole aspect is subjective as the tests mentioned in the survey seemed to be contradicted . Also on some aspects the survey was quite close in its results.
Yes, because people are all different, but one thing to remember with that particular question is, that was also a clickable logo (so some people preferred “home page” was mentioned somewhere as link destination text). I don’t remember if your logo was clickable before (I thought it wasn’t) but now that it is, adding “home page” or “main page” or something to the alt text isn’t a bad idea, esp now that it’s clickable to home while underneath is a link in the navigation to Home as well.
The other one though is perfect: the purpose of the image is solely to convey that important information and I can get it from the alt text without strange text about boxes it’s in or anything.
Also I have put a number of images as background images (as per your suggestion), how do I add alt text to them.
You don’t. The purpose of putting decoration in the background is so those images can’t possibly be confused as “content”. This is why a webmaster has to think quite a bit to determine if they think their images are content or decoration. The purpose of alt text is to make sure whatever content-images are saying is not lost when the image either doesn’t load or isn’t viewable by the user (which may be a person or may be a robot/script/machine). If you believe the content of the site really is “blue-skinned woman looking jawsome” then you don’t have her as a background image… to me, she was decoration. But it is your site and even if you are learning, ultimately you are the author of that page.
Oh, there’s one “exception” to the “background images don’t have alternative text”… and that’s when you’re using something like Gilder-Levin… there, the images “have text” (they are covering real text).
when I change the header menu as suggested it seems to work but there is a slight change to the positioning of the navigation bar in that it moves left on all pages by about 10% so it no longer looks central. I’m not sure why it was central and whether that was just on the screens I am using. How can I make it look central again the right way.
Well it’s not the clearing, but your header is 100% wide (fine) and inside your ul is like a thousand pixels wide and centered with auto-margins (also fine) but inside the li’s are floated; this also isn’t a “problem” but because the total widths of all those li’s together is less that 1000px, and they try to align left because they are floats, they all cling to the left. So the easiest way to solve this is to measure the total width of all the li’s together and set the width of your ul to that.
http://stommepoes.nl/anna-menu.png
Not something I’d normally do to a menu (set a width in px) but because you’re using images, your text in those will not grow so no actual need to expand.
Wee!
http://stommepoes.nl/anna-top.png
(remember that that screenshot isn’t affecting the blind with AT or the googles, just sighted users with CSS on)
Also how can I make the rest of the boxes further down always be central, I have tried to do it but it no longer looks central not sure if that is because of these changes or whether it was never really central to start with
You see what I did above with your menu. While I’m at the point where a lot of the time I can “see” what a page is doing by code alone, I still use this technique to see boxes; especially when I’m dealing with floats n stuff.
If you add a background colour to your wrapper, you’ll see it’s got a set width and centered with auto-margins… the stuff inside has set widths but are not auto-margined. They’re sitting to the left a bit.
Sometimes you’ll add a background colour and won’t see it (like your menu ul). This is because of floats not automatically getting contained by static containers; while a lot of the time they don’t have to contain their floats, but I’ll usually throw overflow: hidden on them to make containers enclose floats just so I can see what’s going on (sometimes overflow will cut off stuff you have spilling out of the container but for testing it’s pretty much always ok because you’re just trying to see box dimensions).
Another great article about Image replacement, and an off topic question but will CSS3 fix problems like this?
Hm, well looking at YOUR menu, most of the stuff you have on your text, yes, can all be done with CSS3. But right now there’s not enough browser implementation, and while I know most of that stuff (the rounded edges, the slight text-shadow, the colours edging the letters (font-stroke) etc) are supported by many of the newest browsers, I just was reminded yesterday at the conference that IE9 so far still has no plans for text-shadow. Currently only webkit (Safari and Chrome) support the stroke lines.
Also anyone who for whatever reason doesn’t regularly update their browser of choice isn’t going to have this CSS3 effects available (like older Operas, Firefoxes or whatever). K-Meleon is a version of Firefox that’s leaner because it’s just for Windows (doesn’t have all that other code to be cross-platform compliant) which gets updated regularly but still uses the same Gecko engine Firefox2 used (so, has most of the bugs of that engine).
In fact that’s why I have it on a copy of Windows here: it’s way easier to have a whole separate browser than to try to use profiles to keep an old version of Firefox on my machine (Opera was easy but Firefox really wanted to override my other versions).
As a developer you’ll want as many browsers on as many platforms as you can reasonably keep around for testing… this may include mobiles and PDAs, screen readers, and either extra machines or virtual boxes with other Operating Systems on it. For when it’s just not possible, something like browsershots.org can help fill the gaps (but developing with it is impossible: I wait sometimes an hour for a screenshot, so no way could I debug something with it).
I have tried to do the image replacement technique but just can’t seem to make it work, do you know if there is a more detailed tutorial anywhere.
I don’t know of one personally, but I’ll see if I have the thread still bookmarked where deathshadow did it for pixelcommander and explained it line-by-line. It is indeed tricky and when I first started, I actually copied Deathshadow’s code and changed dimensions and text to fit my own menus… now I can just write them myself.
Oh awesome, just by remembering pixelcommander’s name, I could find it:
http://forums.digitalpoint.com/showthread.php?t=427632&page=2
That’s page 2 but read that whole thread: Dan Schulz and deathshadow give out some really excellent advice there… those two guys are probably the reason I didn’t start building web sites in tables (seeings how if I had just started viewing>source of pages and tried to copy what I saw, I’d be learning really nasty habits). RIP Dan.
Anyway, the important part is seeing the sprite:
http://battletech.hopto.org/for_others/pixelcommander/images/navigation.jpg
So, a single image (a single call to the server) but each anchor (I prefer using the anchors and not the li’s because it prevents some weird IE bugs that sometimes appear) has their span hold different coordinates of the same image.
So you’d
#menu li {
display: inline;
}
to keep IE6 and 7 happy (7 likes to staircase undeclared li’s for some reason)
and
#menu a {
float: left;
etc.
}
so the anchors would have position: relative and their span children would have position: absolute to cover the anchors’ text.
If after reading that digitalpoint thread and Deathshadow’s code and playing with it that way still just makes you lose hair, then ask and if I have time I’ll do a quick one myself. They do get easier as you do more of them, but even so I often still get hit with my first link not showing the image (because I can’t remember where to make the px number negative etc). So whenever I’m not seeing my image I set the coords to 0 0 so I at least know I’ll get the first part of the image and can use small increments from there to see where I’m going.
Not sure how I came across building in the hover state but never saw anything about : focus
I would imagine because many many sites don’t deal with :focus either. Many developers still think in terms of “mice” and “desktops” and “sighted users”. They need to remember “keyboard”, “mobiles”, “touch” and some day we’re all going to be sad sad losers with internet-enabled refrigerators letting us know we’re low on milk : (
@media kitchenAppliance { ...
Regarding the Div List I have moved it to the ul but when I do that it is not working. The list is no longer then being styled which I assume is the way I have done it (is this the same problem for the menu div mentioned earlier?)
[b].list ul[/b]{
position: absolute;
margin: 0 0 0 0;
padding: 0 0 0 0;
top: 130px;
right: 10px;
width: 600px;
font-family: "trebuchet ms", helvetica;
font-size: 100%;
}
Is it because your CSS still had .list ul instead of .list? I dunno. I just see the div called .list isn’t doing anything, so the ul itself can do that work.
<ul class=“list”>
blah blah…
</ul>
.list {
list styles you have (except the absolute positioning, don’t see where that’s being a Good Thing there…)
*edit I know why the header’s overlapping, I don’t have the font you expect… see below
I suppose it might be good to see a graphic showing how it should look. It certainly does look like it’s getting styles.
Does the reduction in code make a difference or is this more to do with trying to get best practice for when I build gigantic websites because then it will make a difference.
Well code reduction itself is good because lower filesizes anywhere are “generally” a Good Thing.
But yes the best reason is maintenance. Gary Turner (a member here and other forums) likes to say “Code as if the guy coming after you to maintain the code is a psychopath who knows where you live. In many cases that will be you.” : ) It’s easy enough to forget what you were thinking when you come back to unclear code a few months later.
The float problem has not appeared that you were discussing with Paul O’B but I haven’t tried it in IE6 or 7 and the float boxes are the same size. Do I need to do anything regarding this?
I’m not sure. Since the boxes are all the same height, the lack of clearing and the fact that they are ALL floating should mean that, so long as .wrapper remains “tight” enough around them that they can’t fit three in a row, they should look alright.
If the boxes were different heights, instead of the clearing float starting the rest on a new line, IE would let them ride up as high as they could go instead of staying at the height of the new line. Which is what happens when you don’t clear floats in other browsers too. Now, it is possible to use the width of the container (wrapper) to keep it impossible for floats to go to three in a row and so you’ll always have float drop and the equal heights means you won’t have any float snagging… so possibly you could get away with NOT clearing these boxes because they are same-dimension floats in a fixed-width container. I still would, but I guess you’ll have to see if IE is a b*tch with this or not. If it’s a problem then we may have to do some other solution.
.newprice{
background-position: 0 0;
background-image:url(images/paying.gif);
background-repeat: no-repeat;
}
You can make even less code by using the background shorthand: background: url(images/paying.gif) 0 0 no-repeat;
Also I think it has twigged that I need to look through my code to see what is the same throughout and then just have it linked to one class to again to reduce code bloat, is that right?
twigged got me confuzled but then I am not the brightest marker in the pack but yeah, looking to see where stuff can be grouped together is generally a good thing for a web developer to do… BUT
It’s a biggish But.
This is the thing: we say, build for the future. Make it like CSS Zen Garden so you don’t have to change HTML when a new style is requested by the client.
In the real world this rarely happens: often HTML changes as well (mostly because content often changes when style changes). So, it’s more like a wishful ideal we build towards, while knowing it’s a sort of myth in reality. Not that it doesn’t have its benefits, as I said earlier: smaller filesizes etc.
You’ll notice however that when you group things as much as possible, you are making the code less flexible. Take a look at the basic Drupal theme. It’s awful: a bazillion classes on everything, every bit of text has 15 containers around it, always a bazillion times more code than necessary for what you see on the screen. Why? Because it’s a template; it’s flexible. If you are building something that you KNOW will be changed, and changed a lot by someone else (this happens when you’re building a “theme” for something, like WordPress, or often if your client will be using a CMS (with built-in WSYIWYG editor) to manage the content. They’ll come up with content you didn’t have access to when you were setting up the design, and your code won’t have any native way to deal with that when it’s optimised code for the content you do have).
So, if you will be the only one dinking with the front-end code of this site, then it’s a good thing to make it as lean as possible. If this were a theme for others to download and use, you can’t write like that. You have to write like more code == more money or something… write like we’re saving the universe by filling it with as much code as possible. Your bandwidth provider will thank you for the higher payments you’re making : ) but that’s how those things work as I understand it.
The area covered problem was because your browser wasn’t working with the leaguegothic font, this is a @fontface set up so not sure what caused the problem, have you any idea?
Ah, yes: I’m not allowing @font-face, because for some reason on my browser it seems to need Javascript to run even though @font-face itself is CSS.
http://stommepoes.nl/anna-1.png
http://stommepoes.nl/anna-2.png
Some users won’t be able to accept @font-face (even though I now see you’re using pie.htc… that’s good for IE but it will get missed by IE without Javascript and it will not do anything for older versions of the Modern browsers), so even when calling “leaguegothic” you’ll want a regular font stack behind it (I see now you have “arial narrow” but that’s not necessarily common either… I don’t have it). Do a whole font-stack with common web fonts and just check your page in them to see what the damage is. LeagueGothic looks like a narrow font so this would be why everything fits when that font is able to be rendered. I’m not sure what you can do there other than either:
let users without a narrow font on their systems get text popping out a bit (this could be seen as artsy on this page, so not necessarily a horrible problem except where text covers text) OR you could possibly choose to use Javascript to change the font-size so users without JS (likely also not having LeagueGothic appearing either) get a smaller font-size while those with JS on get the size that works with League Gothic.
Or, you could let the h2’s height push down the list. If the list weren’t absolutely positioned, it would go down further when the font was shown bigger, and would ride back up when League Gothic was appearing. This way, it wouldn’t matter at all if League Gothic worked or not. This means #mainbox would have to have" min-height" instead of “height” (and then a special message for IE6, who does not understand min-height).
Basically this is a classic decision web builders make every day: how much work do you consider worthwhile to support things you want that are not universally supported?
I don’t support Netscape 4 or 7, Mosaic, or IE5 for Mac (I don’t even have access to those browsers for testing anyway), and that’s a place where I’ve drawn my lines. Often I don’t support IE5 (sometimes I do, for fun or whatever). I support javascript-disabled all the time (I have not ever built a page whose only purpose was showing off cool design things, movies, games, or other Javascript-dependent content… those pages of course have no point in supporting non-js user agents, do they?), IE6 and up, and lack of things like newer CSS3 properties.
With CSS3 I often just use it to add a little extra “for those who can”. This means I do not allow the lack of CSS3 support to break the page. There’s a page done by John Allsopp which I like to look at because of how it degrades without scripts or CSS3 (it used to break layout when you didn’t have Javascript because of the jQuery slideshow but that’s been fixed): http://ampedweb.org/
Check that page out in IE8 or IE7 (I didn’t look to see if he bothered supporting 6). It’s a little dull, but fairly awesome. Again, the font at the top is set to a large font-size; this means in my browser it’s too big and goes slightly off the screen, but it’s still readable and can be forgiven by being “artsy”. That art-fart argument can be a great excuse if the site it right for it. Yours certainly qualifies: anyone seeing text where maybe one would think it doesn’t belong may well rationalise that it must be part of the design. Nothing wrong with that necessarily.
Anyway, you the developer will be deciding what you support… some devs actually tell clients they’ll charge more for IE6 support. Everyone has their limit. I don’t believe it should be much or any extra work to build pages that work without Javascript, the latest CSS, or images… it should not be more work (other than some testing) to make pages accessible in general either. If it’s a lot more work then you’re probably making it more work than necessary (however in your case you are starting out… everything will be more painful for you at the moment. Later, you’ll be whipping these things out easily).
The Here we go should only show for a few seconds whilst the google map is loading, does that mean the google map didn’t appear for you?
When I go to a browser that has all Javascript on, yes. When scripts for YOUR domain are allowed but not google, I do get boxes spilling out of the pink box… however I wouldn’t worry about half-scripts showing up (except to make sure all your scripts are getting loaded, no typos or whatever).
The google map was just something I stumbled upon when trying to find how I would add the map to show a boundary, do you know what the best way is to add it?
Well, I think the best way to add it is to use the GoogleMaps API where users without JS get an image of a map, but while my colleague did that on our sites, I dunno nothin about how the whole GoogleMaps API thing works. So maybe you could hack a version yourself: have an image of the maps, and lets the Google Maps just cover it up by absolutely positioning it over the box holding the image or something. Also, if you have written directions somewhere, you should provide those somewhere. If that breaks the “look” you’re going for, make a small link somewhere… takes users to another page that does have the directions in plain text. This way, those who don’t have images get directions and an address; those who have images but no Javascript get directions, an address AND a map (they can also go to google themselves and type in the address: you do get some crappy low-grade map you can use if you don’t have JS on); those with everything on get what you were shooting for: the whole interactive map thing (and directions as an option and an address of course).
For max-width, you’d be changing some things in .wrapper mostly, but since the header’s not in the wrapper you’d have to address the header separately.
Often developers will have a whole-page wrapper thing which allows them to set total page width and any side margins or whatever, and if they set max-width on it, after the browser is wider than that, there’ll be space growing on either side… if they set a min-width, browsers smaller than that get a scrollbar. Some of the mobile browsers suck balls with their scrollbars.
