New Website Designer Site (wishingwebs.co.uk)

[learning_brain]

Hi everyone.

I'm busy developing a new business to live my dream as a web-designer.

the site is www.wishingwebs.co.uk

If you have a minute, I'd really appreciate any feedback you have on this test page @ www.wishingwebs.co.uk/test.php

The concept design has been done in Illustrator and is unique.

Not all inks work yet - just getting an idea how the design looks/feels. Does it look pro?

Thank you

Richard

[essellar]

'T'ain't bad at all. I was sure for a moment that you'd used images for the headings; the Montez font is loading much faster than most fonts do under an @font-face rule. Limited character set, I suppose?

It looks nice with the pagination you have now. I just wonder how the design will hold out with real content—I can imagine it working well with, let's call it "curated content", but a little less well with more random article lengths. I guess that translates as "good magazine/bad blog" in the common tongue. I'm guessing that you're testing several different page types there on one HTML page, and that the breaks in the background panels indicate the separation of the various page types. Just a little question: do you anticipate maintaining the "print page" layouts for longer articles to make multicolumn work? Again, that makes content curation more important, so the site would be a lot more "hands on" than most designs. (At least until the new CSS methods get wider acceptance and implementation).

The only real qualm I have is with the depth of the header. I haven't gone through looking for @media rules, though, and I'm using a rather large screen, so it may be just fine as it is. If it looks like more than a splash page on netbooks and mobile devices, you're golden.

[Sharky]

Looks good but when I click Menu on my iPad it redirects to a page that doesn't exist - I can't see the source but I think convention is to redirect to the # symbol.

Yes, it goes to index.html.

iPad screenshot

[learning_brain]

'T'ain't bad at all.

Thanks

I was sure for a moment that you'd used images for the headings; the Montez font is loading much faster than most fonts do under an @font-face rule. Limited character set, I suppose?

Glad you like it - I didn't want to miss out on the SEO opportunities... and yes, its limited (file size only 76kb).

It looks nice with the pagination you have now. I just wonder how the design will hold out with real content—I can imagine it working well with, let's call it "curated content", but a little less well with more random article lengths. I guess that translates as "good magazine/bad blog" in the common tongue. I'm guessing that you're testing several different page types there on one HTML page, and that the breaks in the background panels indicate the separation of the various page types.

The content will not be as text heavy - in fact I only intend to include limited textual content and heavier on graphics. And yes, you're right in that I'm trying out several html tags in one page to test page architecture and css. In reality, there won't be a fraction of the quantity.

Just a little question: do you anticipate maintaining the "print page" layouts for longer articles to make multicolumn work? Again, that makes content curation more important, so the site would be a lot more "hands on" than most designs. (At least until the new CSS methods get wider acceptance and implementation).

The print.css styling sheet will split out the multicolumns (which I'm pretty proud of) into single columns - as will the mobile.css file. In fact, the print.css file will cut out most of the spurious content (such as header, footer etc.). My only reservation here is that FF doesn't react well to print formats.....

The only real qualm I have is with the depth of the header. I haven't gone through looking for @media rules, though, and I'm using a rather large screen, so it may be just fine as it is. If it looks like more than a splash page on netbooks and mobile devices, you're golden.

Good point. The background image was designed to suit the minimum 1024 all the way up to 1920, but the key dandelion and night stars appear strongly in the 1024 resolution. The height is more of a concern and I've crushed the design so the grass line is half way up the screen at 768. This means that the first h1 title sits just above the base of the fold with at least two lines of text. I can crush it down a bit more but I'm keen to keep the overall feel.

Oh - and mobile devices comes next. I have a nice low-load php device detection script using user-agents. This works better than @media rules IMHO and is easier to change content as well as css.

Looks good but when I click Menu on my iPad it redirects to a page that doesn't exist - I can't see the source but I think convention is to redirect to the # symbol.

Yes, it goes to index.html.

As I said, the links (or inks as I actually put in my post) aren't active yet, but yes, I take your point on the hash symbol (#nogo).

I just want to get the pagination right first, then split off headers and footers into includes before duplicating the pages.

iPad screenshot

Nice to know Chrome works on iPad - thanks - also good example of 1024 resolution!

[Sharky]

Nice to know Chrome works on iPad - thanks - also good example of 1024 resolution!

1024?? It's 2048x1536!

If you have an iPad you can jailbreak I and set chrome as the default browser. I like the extra features, but it doesn't sport the faster JavaScript engine - apple have decided that nobody else can use it (only the basic safari browser) which if it had been Microsoft would have landed them in trouble for being anti-competitive...

And I think you're better off just putting # by itself - not sure whether the browser will complain about being pointed to an existent URL like #nogo (unless you define that bookmark I suppose...) either way, I believe it works with just #.

[learning_brain]

1024?? It's 2048x1536!

Ooops... sorry - didn't realize it would pick up on the wrapper size and display at that resolution... I stand corrected!

If you have an iPad you can jailbreak I and set chrome as the default browser. I like the extra features, but it doesn't sport the faster JavaScript engine - apple have decided that nobody else can use it (only the basic safari browser) which if it had been Microsoft would have landed them in trouble for being anti-competitive...

Cool - but being an Android man myself - I wouldn't know these things lol.

And I think you're better off just putting # by itself - not sure whether the browser will complain about being pointed to an existent URL like #nogo (unless you define that bookmark I suppose...) either way, I believe it works with just #.

Good to know - thanks!

Just finishing off the finer css details now.....

[Sharky]

Cool - but being an Android man myself - I wouldn't know these things lol.

I'm not a fan of either. I only really use it for movies and tapatalk. And RDP'ing in to my desktop computer.

[Skizzerz]

Using @media rules to do detection based on screen size is much safer than trying to do detection based on user agent because you cannot guarantee that 1) a user agent is being spoofed, and 2) the underlying screen size for various desktop user agents (someone might have a small window, or have it docked to a sidebar in Metro's IE10 for instance). With rules based on screen size, you can generalize things in order to preform a good layout for the size the user is actually using, instead of trying to force a layout based on possibly-incorrect detection of the browser.

[learning_brain]

Using @media rules to do detection based on screen size is much safer than trying to do detection based on user agent because you cannot guarantee that 1) a user agent is being spoofed, and 2) the underlying screen size for various desktop user agents (someone might have a small window, or have it docked to a sidebar in Metro's IE10 for instance). With rules based on screen size, you can generalize things in order to preform a good layout for the size the user is actually using, instead of trying to force a layout based on possibly-incorrect detection of the browser.

Thanks for the heads up.

I have another site where changing the structure of the site was critical, so the user-agent detection was useful to create conditional content (such as inclusion of memory-heavy scripts/images...or not for mobile); however, on this site, I take your comments on board and have switched to a combination of the meta viewport tag and 3 style sheets for screen: less than 1000 and less than 480.

Only works on http://www.wishingwebs.co.uk/test.php at the moment while I'm developing and ironing out the bugs, but it seems to work pretty nicely. Normal structure for 1024 and above. Below 1000, it will switch to a similar, but fluid layout (columns merging into auto-width blocks). At below 480, the main menu will change structure and a number of other changes to make it as mobile-friendly as possible. I still need to develop the mobile menu element...

I've also now ironed out the IE bug with the menu so it runs pretty smoothly across the board.

Any other tips?

Richard

[learning_brain]

Only works on http://www.wishingwebs.co.uk/test.php at the moment...

Ooops - just realized the link was broke.... fixed now...sorry.

I have also now completed the mobile menu and made a different body background image for mobile viewing.

Now rolling it out across the site.

Next is getting the content right!