Register - Login
Views: 99368023
 Main - Memberlist - Active users - Calendar - Wiki - IRC Chat - Online users
Ranks - Rules/FAQ - Stats - Latest Posts - Color Chart - Smilies		 04-23-22 05:13:03 PM
Jul - Projects and Creations - Web design as an art? New poll - New thread - New reply
Next newer thread | Next older thread
— BlackRose —
Transforming cats into robots since 1989!
Posted on 01-16-10 05:56:18 AM (last edited by Lain at 01-21-10 07:24 AM) Link | Quote

Lain's post №458

Earlier today, I finished making a web page with semantic classes and CSS, and just now I thought to myself, "Is web design an art?"

I am kind of assuming "yes," but at the same time, I know that there would be at least a few people who would say "no."

When I say "web design as an art," I don't mean just the output that you see on your screen, but the structure of the page as well.

The page in question (http://blackcat.dalnet.ca/html/brackets/).

When I write the markup for my web pages and sites, I try to make the markup as clean as I can, but I also try to make it understandable, by using classes and ID's.

The only thing is that I am not sure whether what (at least) I output could be considered elegant. It is certainly clean though, for sure.

Edit: “Yels?” … How did that even happen? Fixed. Also, added in URL to the anchor text.

____________________
[21:28:41] <@Lain> ikachan, cat
[21:28:44] <@Ikachan> Lain: Where's the cat? Oh shit. Fluffy's frozen.
Drag
2640
Level: 99


Posts: 1514/2641
EXP: 9981292
For next: 18708

Since: 07-03-07


Since last post: 4.2 years
Last activity: 3.3 years
Posted on 01-16-10 11:07:09 PM (last edited by Drag at 01-16-10 08:08 PM) Link | Quote
1514
My only criticism is the overabundance of white space. It's hard to line up the posts to the authors, because the brackets are on seperate lines, and there's just so much space everywhere. Especially with that one-liner post. I think they actually get out of alignment further down.

That is, of course, unless it's because I'm using a super-outdated version of FireFox.

____________________
— BlackRose —
Transforming cats into robots since 1989!
Posted on 01-17-10 05:10:50 PM Link | Quote

Lain's post №467

Originally posted by Drag
My only criticism is the overabundance of white space. It's hard to line up the posts to the authors, because the brackets are on seperate lines, and there's just so much space everywhere. Especially with that one-liner post. I think they actually get out of alignment further down.

That is, of course, unless it's because I'm using a super-outdated version of FireFox.


Not for me. (Firefox 3.5 and Chrome 4 beta) I checked in IE 5 thru 8, and big problems only occur with 5/6.

____________________
[21:28:41] <@Lain> ikachan, cat
[21:28:44] <@Ikachan> Lain: Where's the cat? Oh shit. Fluffy's frozen.
— BlackRose —
Transforming cats into robots since 1989!
Posted on 01-21-10 10:26:03 AM Link | Quote

Lain's post №486

Well, here's a screenshot of what I see in Chrome 4 beta. → tinyshit/300dsmo.png

This is ideally what it should look like (as well in Firefox.)

____________________
[21:28:41] <@Lain> ikachan, cat
[21:28:44] <@Ikachan> Lain: Where's the cat? Oh shit. Fluffy's frozen.
paulguy

Green Birdo
Level: 93


Posts: 479/2294
EXP: 8025167
For next: 27643

Since: 09-14-07

From: Buffalo, NY

Since last post: 9.7 years
Last activity: 9.6 years
Posted on 01-21-10 12:23:05 PM Link | Quote
Paulguy's Post configuration
Looks nice, other than the previous complaints about lots and lots of empty space. Also, the braces appear italicized here, which I'm not too crazy about and the "handcrafted by yours truly" is next to impossible to read... though I suppose it's not as important, in which case it should just be smaller, I think. I hate having to squint at low contrast text.

I like the colors; browns and tans I think are always good decisions for a more formal page, since they're easy on the eyes. Much better than straight black text on white background, which is a strain to look at for a while.

____________________
Kas
Member
Level: 28


Posts: 87/145
EXP: 128106
For next: 3232

Since: 07-28-07

From: Sheffield, UK

Since last post: 1.2 years
Last activity: 1.2 years
Posted on 02-16-10 08:26:46 PM Link | Quote
It is absolutely an art. There's a very high degree of subtlety and detail that goes in to the best websites, and it makes me love what I do.

One of my favorite sites recently is the Think Vitamin website. It's been plagiarised an awful lot, but this is the original. Carsonified are one of my favorite agencies, and definitely among the top in the UK.
Think Vitamin

Another I really like is Boagworld. They do an awesome podcast, by the way.
Boagworld

My absolute favorite in the past year has to be We Bleed Design. It's not one of the best on pure artistic merit, I just love how it works and it's so inspiring.

This is the one that I made based on the above: my blog.
Next newer thread | Next older thread
Jul - Projects and Creations - Web design as an art? New poll - New thread - New reply


Rusted Logic
Acmlmboard - commit 47be4dc [2021-08-23]
©2000-2022 Acmlm, Xkeeper, Kaito Sinclaire, et al.

30 database queries.
Query execution time:  0.081596 seconds
Script execution time:  0.013383 seconds
Total render time:  0.094979 seconds


TidyHTML vomit below
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 2 column 300 - Warning: unescaped & or unknown entity "&page"
line 119 column 11 - Warning: <form> isn't allowed in <table> elements
line 118 column 10 - Info: <table> previously mentioned
line 120 column 11 - Warning: missing <tr>
line 120 column 119 - Warning: missing </font> before </td>
line 124 column 16 - Warning: plain text isn't allowed in <tr> elements
line 120 column 11 - Info: <tr> previously mentioned
line 125 column 68 - Warning: missing </nobr> before </td>
line 141 column 68 - Warning: missing </nobr> before <tr>
line 147 column 35 - Warning: missing <tr>
line 147 column 50 - Warning: missing </font> before </td>
line 148 column 37 - Warning: unescaped & or unknown entity "&id"
line 147 column 192 - Warning: missing </font> before </table>
line 149 column 35 - Warning: missing <tr>
line 149 column 50 - Warning: missing </font> before </td>
line 149 column 91 - Warning: missing </font> before </table>
line 155 column 9 - Warning: <link> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 156 column 25 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 158 column 25 - Warning: missing <tr>
line 167 column 25 - Warning: missing <tr>
line 168 column 113 - Warning: unescaped & or unknown entity "&postid"
line 170 column 90 - Warning: <link> isn't allowed in <td> elements
line 170 column 25 - Info: <td> previously mentioned
line 185 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 187 column 9 - Warning: missing <tr>
line 205 column 13 - Warning: missing <tr>
line 206 column 101 - Warning: unescaped & or unknown entity "&postid"
line 208 column 472 - Warning: missing <tr>
line 213 column 25 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 215 column 25 - Warning: missing <tr>
line 224 column 25 - Warning: missing <tr>
line 225 column 113 - Warning: unescaped & or unknown entity "&postid"
line 227 column 90 - Warning: <link> isn't allowed in <td> elements
line 227 column 25 - Info: <td> previously mentioned
line 234 column 25 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 236 column 25 - Warning: missing <tr>
line 245 column 25 - Warning: missing <tr>
line 246 column 113 - Warning: unescaped & or unknown entity "&postid"
line 248 column 90 - Warning: <link> isn't allowed in <td> elements
line 248 column 25 - Info: <td> previously mentioned
line 253 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 255 column 9 - Warning: missing <tr>
line 273 column 13 - Warning: missing <tr>
line 274 column 101 - Warning: unescaped & or unknown entity "&postid"
line 276 column 74 - Warning: <style> isn't allowed in <td> elements
line 276 column 9 - Info: <td> previously mentioned
line 281 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 283 column 9 - Warning: missing <tr>
line 301 column 13 - Warning: missing <tr>
line 302 column 101 - Warning: unescaped & or unknown entity "&postid"
line 317 column 17 - Warning: missing <tr>
line 317 column 17 - Warning: discarding unexpected <table>
line 320 column 35 - Warning: missing <tr>
line 320 column 50 - Warning: missing </font> before </td>
line 320 column 91 - Warning: missing </font> before </table>
line 322 column 35 - Warning: missing <tr>
line 322 column 50 - Warning: missing </font> before </td>
line 323 column 37 - Warning: unescaped & or unknown entity "&id"
line 322 column 192 - Warning: missing </font> before </table>
line 324 column 17 - Warning: discarding unexpected </textarea>
line 324 column 28 - Warning: discarding unexpected </form>
line 324 column 35 - Warning: discarding unexpected </embed>
line 324 column 43 - Warning: discarding unexpected </noembed>
line 324 column 53 - Warning: discarding unexpected </noscript>
line 324 column 64 - Warning: discarding unexpected </noembed>
line 324 column 74 - Warning: discarding unexpected </embed>
line 324 column 82 - Warning: discarding unexpected </table>
line 324 column 90 - Warning: discarding unexpected </table>
line 326 column 9 - Warning: missing </font> before <table>
line 338 column 25 - Warning: discarding unexpected </font>
line 347 column 37 - Warning: discarding unexpected </font>
line 325 column 1 - Warning: missing </center>
line 120 column 63 - Warning: <img> lacks "alt" attribute
line 125 column 19 - Warning: <td> attribute "width" has invalid value "120px"
line 125 column 93 - Warning: <img> lacks "alt" attribute
line 141 column 19 - Warning: <td> attribute "width" has invalid value "120px"
line 141 column 98 - Warning: <img> lacks "alt" attribute
line 148 column 44 - Warning: <img> proprietary attribute value "absmiddle"
line 148 column 142 - Warning: <img> proprietary attribute value "absmiddle"
line 148 column 245 - Warning: <img> proprietary attribute value "absmiddle"
line 162 column 56 - Warning: <img> lacks "alt" attribute
line 182 column 1451 - Warning: <img> lacks "alt" attribute
line 182 column 1605 - Warning: <img> lacks "alt" attribute
line 182 column 1735 - Warning: <img> lacks "alt" attribute
line 189 column 16 - Warning: <img> proprietary attribute value "absmiddle"
line 189 column 16 - Warning: <img> lacks "alt" attribute
line 189 column 59 - Warning: <img> proprietary attribute value "absmiddle"
line 189 column 59 - Warning: <img> lacks "alt" attribute
line 189 column 102 - Warning: <img> proprietary attribute value "absmiddle"
line 189 column 102 - Warning: <img> lacks "alt" attribute
line 189 column 145 - Warning: <img> proprietary attribute value "absmiddle"
line 189 column 145 - Warning: <img> lacks "alt" attribute
line 189 column 188 - Warning: <img> proprietary attribute value "absmiddle"
line 189 column 188 - Warning: <img> lacks "alt" attribute
line 189 column 231 - Warning: <img> proprietary attribute value "absmiddle"
line 189 column 231 - Warning: <img> lacks "alt" attribute
line 189 column 274 - Warning: <img> proprietary attribute value "absmiddle"
line 189 column 274 - Warning: <img> lacks "alt" attribute
line 189 column 317 - Warning: <img> proprietary attribute value "absmiddle"
line 189 column 317 - Warning: <img> lacks "alt" attribute
line 189 column 360 - Warning: <img> proprietary attribute value "absmiddle"
line 189 column 360 - Warning: <img> lacks "alt" attribute
line 189 column 403 - Warning: <img> proprietary attribute value "absmiddle"
line 189 column 403 - Warning: <img> lacks "alt" attribute
line 190 column 22 - Warning: <img> lacks "alt" attribute
line 190 column 63 - Warning: <img> lacks "alt" attribute
line 190 column 112 - Warning: <img> lacks "alt" attribute
line 190 column 161 - Warning: <img> lacks "alt" attribute
line 191 column 11 - Warning: <img> lacks "alt" attribute
line 201 column 15 - Warning: <img> lacks "alt" attribute
line 208 column 1111 - Warning: <img> proprietary attribute value "absmiddle"
line 208 column 1111 - Warning: <img> lacks "alt" attribute
line 210 column 1258 - Warning: <img> proprietary attribute value "absmiddle"
line 210 column 1258 - Warning: <img> lacks "alt" attribute
line 210 column 1494 - Warning: <img> lacks "alt" attribute
line 219 column 56 - Warning: <img> lacks "alt" attribute
line 227 column 664 - Warning: <img> proprietary attribute value "absmiddle"
line 227 column 664 - Warning: <img> lacks "alt" attribute
line 229 column 811 - Warning: <img> proprietary attribute value "absmiddle"
line 229 column 811 - Warning: <img> lacks "alt" attribute
line 231 column 1153 - Warning: <img> lacks "alt" attribute
line 231 column 1307 - Warning: <img> lacks "alt" attribute
line 231 column 1437 - Warning: <img> lacks "alt" attribute
line 240 column 56 - Warning: <img> lacks "alt" attribute
line 250 column 648 - Warning: <img> lacks "alt" attribute
line 250 column 802 - Warning: <img> lacks "alt" attribute
line 250 column 932 - Warning: <img> lacks "alt" attribute
line 257 column 11 - Warning: <img> lacks "alt" attribute
line 258 column 22 - Warning: <img> lacks "alt" attribute
line 258 column 63 - Warning: <img> lacks "alt" attribute
line 258 column 112 - Warning: <img> lacks "alt" attribute
line 258 column 161 - Warning: <img> lacks "alt" attribute
line 259 column 11 - Warning: <img> lacks "alt" attribute
line 269 column 15 - Warning: <img> lacks "alt" attribute
line 286 column 22 - Warning: <img> lacks "alt" attribute
line 286 column 63 - Warning: <img> lacks "alt" attribute
line 286 column 112 - Warning: <img> lacks "alt" attribute
line 286 column 162 - Warning: <img> lacks "alt" attribute
line 297 column 15 - Warning: <img> lacks "alt" attribute
line 323 column 44 - Warning: <img> proprietary attribute value "absmiddle"
line 323 column 142 - Warning: <img> proprietary attribute value "absmiddle"
line 323 column 245 - Warning: <img> proprietary attribute value "absmiddle"
line 332 column 25 - Warning: <img> lacks "alt" attribute
line 337 column 267 - Warning: <img> lacks "alt" attribute
line 149 column 50 - Warning: trimming empty <font>
line 317 column 17 - Warning: trimming empty <tr>
line 320 column 50 - Warning: trimming empty <font>
line 125 column 68 - Warning: <nobr> is not approved by W3C
line 141 column 68 - Warning: <nobr> is not approved by W3C
line 168 column 39 - Warning: <nobr> is not approved by W3C
line 206 column 27 - Warning: <nobr> is not approved by W3C
line 225 column 39 - Warning: <nobr> is not approved by W3C
line 246 column 39 - Warning: <nobr> is not approved by W3C
line 274 column 27 - Warning: <nobr> is not approved by W3C
line 302 column 27 - Warning: <nobr> is not approved by W3C
Info: Document content looks like HTML5
Info: No system identifier in emitted doctype
Tidy found 150 warnings and 0 errors!


The alt attribute should be used to give a short description
of an image; longer descriptions should be given with the
longdesc attribute which takes a URL linked to the description.
These measures are needed for people using non-graphical browsers.

For further advice on how to make your pages accessible
see http://www.w3.org/WAI/GL.
You are recommended to use CSS to specify the font and
properties such as its size and color. This will reduce
the size of HTML files and make them easier to maintain
compared with using <FONT> elements.

You are recommended to use CSS to control line wrapping.
Use "white-space: nowrap" to inhibit wrapping in place
of inserting <NOBR>...</NOBR> into the markup.

About HTML Tidy: https://github.com/htacg/tidy-html5
Bug reports and comments: https://github.com/htacg/tidy-html5/issues
Official mailing list: https://lists.w3.org/Archives/Public/public-htacg/
Latest HTML specification: http://dev.w3.org/html5/spec-author-view/
Validate your HTML documents: http://validator.w3.org/nu/
Lobby your company to join the W3C: http://www.w3.org/Consortium

Do you speak a language other than English, or a different variant of
English? Consider helping us to localize HTML Tidy. For details please see
https://github.com/htacg/tidy-html5/blob/master/README/LOCALIZE.md