Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    Designing And Authoring With Images

    Just as an experiment, I rather fancy seeing if I can build a webpage, entirely out of images. This means no real text - just images of text. It would allow for effects which are either impossible or very difficult to achieve with HTML and CSS, such as interesting fonts, slanted text and complex transparencies. One thought is that certain parts might not even require wording, as the site could be made visually intuitive for navigation.

    Question: If I put the text in the alt tag, would that ensure the pages are found in search engines?

    Could I also use 'meta data'? What is that actually for and how does it work? Usually, all I have in mine, is some default stuff but I have noticed that other people seem to put a lot of words in there, relating to their content.

    Thanks

    Dr. V
    Last edited by Doctor_Varney; 01-15-2010 at 05:07 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,338
    Thanks
    13
    Thanked 348 Times in 344 Posts
    meta data are relevant, if you want to inform about the page, and its relation to other pages. you can put there bibliographical data (author, rights, description), relational data (next page, previous page, table of content page, …), but that’s not suited to replace the content.

    ref. Dublin Core Metadata Initiative
    ref. the <link> element

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    You should use title attributes as well as alt attributes.

    That certainly won't ensure that the pages are found by search engines though. You need to take steps to make sure your site gets indexed. Just having text on the page also does not guarantee your site will be found either. You should use google analytics and webmaster tools, you should get some backlinks, put together a sitemap and submit it to google. Get listed in yahoo and dmoz. There are many ways to try to ensure your pages get found sooner than later.

    That said, if your images have alt and title attributes then search engines will see them when it actually does crawl your page.

    I think how google will handle such a page (position, rank, keyword relevance, etc.) is something that only you may be able to answer - after you have done your experiment that is. The question I am interested in is what will google show in the snippet from your site on its listing. It won't show a snippet of your images. I doubt it will show alt or title text. One way you could do it is to have the whole site with normal text and then use javascript to hide all that and show all the images (extreme image replacement).

    Edit: Silly me, of course google will show your meta description. It would be an interesting experiment and I am curious to see how such a site might fare in the rankings. If you go ahead with it, please do report back on your findings.
    Last edited by linehand; 01-15-2010 at 09:54 PM.

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Hi Linehand and thank you for your interest.

    Quote Originally Posted by linehand View Post
    One way you could do it is to have the whole site with normal text and then use javascript to hide all that and show all the images (extreme image replacement).
    As it happens, I think I have found the solution. At the very top of the page is a div, which I have identified as: #semantic. In here is the complete site - words, graphics and all, as it might appear, were you to turn styles off in your browser. A logical, semantic flow of content. #semantic is then hidden, using: visibility:hidden. Then, right below this, starts the visual part... Which, as you can imagine, starts life in a div, called #visual_wrapper. In go the images... In chunks, as opposed to one large block, so as to allow for differing levels of jpg compression and gif indexing.

    As far as search engines go, the hope is, that the first thing any crawler will bump into, is the contents of #semantic. This saves my document becoming crowded with alt-text.

    I'll be easily able to update the text, by storing each chunk in the 'freezer' as a .psd. Simply thaw in Photoshop and edit, before re-freezing, via the "Save To Web" command. It's one way to take thorough advantage of Photoshop Image Slicing.

    Now, this is where it's hoped the CSS positioning comes in. If a 'txtchunk' becomes longer through editing, so will the image height. It should push down on the next block-level image, thus pushing down on the footer, as normal text would do.

    Quote Originally Posted by linehand
    It would be an interesting experiment and I am curious to see how such a site might fare in the rankings. If you go ahead with it, please do report back on your findings.
    Yes, I certainly will. Again, thanks for the interest. I'm very excited to find out if I can actually experience an unprecedented freedom in design and still create valid code.

    Kind regards

    Dr. V
    Last edited by Doctor_Varney; 01-16-2010 at 02:37 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Sounds quite workable. There are only couple problems that might crop up.

    Not certain about this but I seem to recall visibility:hidden; leaving empty space in some browsers. The element is hidden but surrounding elements still flow around the element as if it where there. I could be wrong so please correct me if so. Solution may simply be to make your #semantic an absolutely positioned element that does not effect the flow of anything else.

    Search engines may think you are gaming them (stuffing keywords in a hidden element).

    Using JS to hide #semantic and show the images is a more sure fire way of letting the search engines think that #semantic is really the page. Drawback is that users without JS enabled (few) would get the #semantic version. I often just stick a few simple lines into the top of an existing JS file which the page uses. Those few lines I add do nothing but load a CSS file, so that styles can change when the JS loads.

    Certainly there are methods of feeding text to search engines, and images to users (virtually any image replacement method). Personally I would be more interested in the results if you didn't provide any real text for the search engines at all. Then the results could help illuminate how important it is for SEO to provide underlying text when using image replacement methods. I have long suspected that it wouldn't make a big difference to SEO if you just provided images for headings. Screen readers will read the title/alt attributes as well, so if it makes no difference to SEO then a lot of the tricky IR methods in use would be superfluous.

    Some users really do dislike unselectable text though.

    On a related note http://www.typeselect.org/ looks very promising. It is using images for text, but it remains fully selectable as text. So users can select the text and copy it as text even though it is actually being rendered with images. When I get more time I plan to look further into this one.

  • Users who have thanked linehand for this post:

    Doctor_Varney (01-17-2010)

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Well, here is the progress so far... While I figure out my options for inserting the 'real' text.

    Here's the mark-up
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Welcome to Blinding Horror</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="ir_1.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    	<div id="wrapper" class="border_R">
    		<div id="masthead" class="border_G">
    			<img  src="images/masthead_quote_01.gif">
    		</div>
    		<div id="column_3" class="right_column">
    			&nbsp;
    		</div>
    		<div id="column_2" class="ipsemlorem">
    			&nbsp;
    		</div>
    		<div id="column_1" class="left_column">
    			<div id="leftnav">
    				<a href="--.htm">
    					<img src="images/option_1.jpg">
    				</a>
    				<a href="--.htm">
    					<img src="images/option_2.jpg">
    				</a>
    				<a href="--.htm">
    					<img src="images/option_3.jpg">
    				</a>
    				<a href="--.htm">
    					<img src="images/option_4.jpg">
    				</a>
    				<a href="--.htm">
    					<img src="images/option_5.jpg">
    				</a>
    			</div>
    		</div>
    		<div id="footer">
    			&nbsp;
    		</div>
    	</div>		
    </body>
    </html>
    The CSS


    Code:
    /*CSS Document by Ade Varney January 2010*/
    /*Body*/
    *{margin:0;padding:0;}
    body{background:#999 url(images/body_background.jpg) center top repeat-x;color:#000}
    
    /*Visual Structure*/
    #wrapper{margin:0 auto;margin-top:80px;width:903px;}
    #masthead{width:902px;height:331px;background:url(images/masthead_background.jpg) no-repeat top center}
    #masthead img{margin:294px 0 0 270px}
    
    #column_3{width:217px;height:840px;float:right}
    #column_2{width:479px;height:840px;float:right}
    #column_1{width:207px;height:840px;float:left}
    
    #leftnav{margin:70px  0 0 83px;width:116px}
    #leftnav img{display:block;margin-bottom:14px;border:none}
    
    #footer{clear:both;position:relative;top:0;margin:0 auto;width:748px;height:20px;background-color:#000}
    
    .left_column{background:url(images/leftcolumn_background.jpg) no-repeat center top}
    .center_column{background:url(images/centercolumn_background.jpg) no-repeat center top}
    .right_column{background:url(images/rightcolumn_background.jpg) no-repeat center top}
    
    .ipsemlorem{background:url(images/ipsemlorem_text_01.gif) no-repeat center top}
    
    /*End CSS*/
    And finally, a screenshot of the result in Firefox. Exactly the same result in IE and, as you'd expect, both are 100% faithful to my Photoshop design, so far. Just a little trouble with the floats earlier, but that's now fixed.

    I'm going to re-do all the images in the masthead. This was just the first concept I had in mind.



    Thanks for looking

    Dr. V
    Last edited by Doctor_Varney; 01-18-2010 at 03:41 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    You know I have long dreamed of a day when we can just layout sites in a tool like photoshop/illustrator. Better yet the two apps combined. The SVG format nearly offers that capability, being able to contain layers which contain vectors, bitmaps, and editable text. It can even contain links, both textual and graphical. One begins to see the possibility of laying out whole pages in SVG.

    Alas, the browser support is spotty, and rendering quality highly variant.

    I'm curious about how big your site is, being entirely graphic. Mb/Kb?

    Also, what about updates? You just have to go back to the PSD files I imagine.. Too bad the web browsers can't just read PSD files..

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by linehand View Post
    You know I have long dreamed of a day when we can just layout sites in a tool like photoshop/illustrator. Better yet the two apps combined. The SVG format nearly offers that capability, being able to contain layers which contain vectors, bitmaps, and editable text. It can even contain links, both textual and graphical. One begins to see the possibility of laying out whole pages in SVG.
    I've had similar dreams myself. It's the way forward. We have programs and games which offer 3-dimensional views, multimedia, streaming video and live feeds - all easily uploaded by the user... We've had optical text-recognition since the year 486, for god's sake! Yet, interesting, unbreakable layout remains achievable only by those with the sharpest coding skills. I have long believed that design and aesthetics should be of 90% importance in web design and that the burden of searchability be placed on the computer. After all, that's why we invented computers... To crunch data, while unburdening ourselves for creativity's sake. Do I sound like a Mac user? I hope not!

    Quote Originally Posted by linehand
    I'm curious about how big your site is, being entirely graphic. Mb/Kb?
    Well, this is kinda the point of the experiment - to test, among other things, the effect of file-size on a range of domestic computers. The rule of thumb is marching to the speed of your slowest man but it would appear our slowest man is pretty fit. If your machine can deal with streaming video then it should be able to deal with this. Pretty standard kit, these days. I'm still using a single core processor here and from what I can see around me, I don't think I'm in the majority!

    Maybe I'm being falsely optimistic, so correct me if I'm wrong.... I can take it.

    Secondly, the breaking up of images to allow for individual compression's sake should help minimize it. Working on the assumption, a large image of flat colour will take up less space on disk than a medium-sized one with complex varations of hue, I have given in to the temptation of images, instead of filled divs in clever positions. It's just more straightforward this way. Of course, a different design might allow me to fill larger areas with coloured divs!

    Quote Originally Posted by linehand
    Also, what about updates? You just have to go back to the PSD files I imagine.. Too bad the web browsers can't just read PSD files..
    There are several ways of setting this up to make for efficient editing and I'm currently experimenting with the best methods. Time takes it's toll on my memory, so I'm deciding on a workflow which comes naturally and intuitively, when updating months, even years from the first build.

    Photoshop lends a big hand, with it's image-slicing and Image Ready integration, so editing can be as organized as keeping sliced PSDs in intuitively named folders or as straightforward as slice-renaming, in the main build.

    Dr. V
    Last edited by Doctor_Varney; 01-18-2010 at 06:53 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •