New site design

Well this is what I've been working on this week - a new site design for Sudoku Xtra. (if you have come straight to the forum, try the 'main Sudoku Xtra site' link above!) It isn't finished yet, because I still plan to add a much nicer ordering process than a set of 'buy' buttons that take you straight to PayPal. In fact that was what I started out to do, but then I ended up spending all my time on the layout and graphics instead. There is at least one adjustment I've spotted I want to make, but having worked on it all week I thought I had better get something online now rather than wait until it was 'complete'!

If you spot a problem (something not working as you think it should) do please post here and let me know.



Edited 1 time(s). Last edit at 02/14/2010 02:38AM by gareth.

Looks pretty good! My favorite part is the demo area at the bottom.

The demo area at the bottom could be done a bit more efficiently though using a stylesheet since many of the div elements use the same formatting.

Current:

...
<div id="puzz6" style="position: relative; visibility: visible; width: 170px; height:170px; background-color: #404040; -moz-opacity:0.70; opacity: 0.80; filter:alpha(opacity=70)">
<div style="padding: 0px 4px 0px 4px; position: relative; background-color: black; width: 162px; top: 10%; color: white; -moz-opacity:1.0; opacity: 1.0; filter:alpha(opacity=80)">
<span style="font-size: 140%; color: #c0c0ff">
...

Better:
Add this stylesheet once...

<style type="text/css">
.outerbox { position: relative; visibility: visible; width: 170px; height:170px; background: #404040; -moz-opacity:0.70; opacity: 0.80; filter:alpha(opacity=70); }
.innerbox { padding: 0 4px; position: relative; background: black; width: 162px; top: 10%; color: white; -moz-opacity:1.0; opacity: 1.0; filter:alpha(opacity=80); }
.innerbox span { font-size: 140%; color: #c0c0ff; }
</style>

...then change your div tags to use classes.

...
<div id="puzz6" class="outerbox">
<div class="innerbox">
<span>
...

Have a good day!

You're absolutely right of course. To be honest I haven't quite decided what to do with that area yet. I started off doing a single row of images just to fill the page up, and then I decided to add another row... then I added another... etc. But then I decided I needed some puzzle names to get indexed by search engines (and it was too big to just be a 'dead' image anyway) so I put in the puzzle name roll-overs. Since I initially failed to nest the divs I spent too long trying to stop the roll-over making it flicker in Internet Explorer, that by the time I got it working I was happy to leave it as-was.

Anyway, the plan is to make each puzzle link to its own page eventually (so at that point I'll rewrite it anyway), a little like I started to do with the puzzle types from the sidebar on puzzlemix - each expands out into a tree of further samples, except this isn't necessarily as obvious as it could be. (The format is 'top level puzzle type' -> 'sub-type page' -> 'showspecific side-bar samples', with the option to link to a book or online player version). I want to make puzzlemix just about online puzzles, but I want to keep the puzzle text for indexing so will probably need to write fresh text for here.

Back to the topic here, the extra bytes of download is tiny compared to the background image used for the page, so I don't think it really matters. If I was reading the HTML I'd comment on the lack of an array for the elements and the long list of x.style.visible='hidden' in the javascript. (=get it working ASAP, fix it later!)

I understand the "make it work, then optimize" mentality.

As for the JavaScript portion, you could actually utilize the jQuery library to do the heavy lifting. If all of the elements had the same class, you would just call one line and be done:

$(".outerbox" ).hide();

(And, not to get all preachy about web stuff, but instead of <span> tags for the puzzle names, you should use <h#> tags like <h5> or <h3>; Google looks to those for keywords on sites. )



Edited 2 time(s). Last edit at 02/16/2010 03:44AM by davmillar.

Interesting idea about the h headings - you're right, I should do that. It doesn't hurt to change it in any case. In fact I'm not really a fan of span at all, and I guess it would look a lot better in Lynx! (or other text browsers). So that's a second good reason to change it.

I know I can use jQuery, but jQuery (UI) is one of those things that works - up to a point. Whenever I've tested it I've found that it didn't actually do what it promised. Sure, it mostly worked on most browsers, but some bits of the effects failed nastily on then-current browsers (this was late 2008 I last tried). I ended up spending longer trying to fix what was broken about it than actually using it. Plus whilst it may be a relatively small payload it's still substantially more wasted space to load and run all that Javascript than to have some duplicated style attributes, for example. (incidentally I think my server's set up to gzip content anyway, so with most clients genuinely duplicated content essentially doesn't add to download size)

But you're right of course. I was actually planning to use jQuery when I update my product pages, so you can hide/reveal details with a smooth slide up/down. Incidentally you're the second person to say this to me - I showed my brother the front page before I uploaded it and he pointed out I could use jQuery.



Edited 1 time(s). Last edit at 02/16/2010 01:07PM by gareth.

I give U a grade of A, Gareth.

u might give a try to Firefox and Opera, if U seek different browsers. Safari is APPLE.

jeff

Okay, so it seemed people had trouble finding the yellow 'Forum' button at the top-right of the main site, so I've moved it back into a text link on the top bar.