|
Renault: Realizing the importance of the case, my men are rounding up twice the usual number of suspects. Casablanca |
Dominic
Vautier
1-2024
This article may be technical but I try to reduce all the explanation whenever possible. The industry sometimes makes it way too difficult to understand.
The main purpose of so-called Responsive Web Design is to make your web pages presentable on a number of different devices using different browsers without creating uncomfortable difficulties to the reader. These difficulties include:
What is HTML. It was originally a text Markup Language designed by this real smart guy Tim Berners-Lee way back in 1990. The HT part stands for hypertext which is simply text presented on a computer through a network. He felt that information could be arranged and presented on a computer screen containing text, pictures and programming instructions bundled up and streamed together and then interpreted through some kind of a front end program (today known as a browser). The idea was not that new but it caught on big time and now we have HTML and CSS driving our browsers.
I
began as a web designer back in 1997 when HTML was still quite primitive
and
when there were few web design tools and practically no good web
instructors. Today HTML is
pretty much the language that drives just about all web pages. It has evolved quite a bit since those early times and there have
emerged several very good web browsers as well as specialized web
languages that do more specific applications, for example,
geographical and scientific things.
And then there are all the search engines and web
crawlers. But most of the time we work with plain old HTML for day to day
stuff. My site has over 3000
files of code and images. The big problem for me is that I designed
these pages for computer screens because notepads and cell
phones did not exist or were used to access web pages back then. Microsoft
internet explorer was the model browser (in fact the only one) to use at that time.
Now much
has changed because so many better browsers are available and so
many other devices exist that can present pages, in particular, notepads and
cell phones.
A web designer of today has to work with development software that conveniently presents material on a number of devices; notepads, androids and iphones, and at the same time works well with several browsers, a difficult job to get right indeed, multiplied many times over. This HTML upgrade is generally referred to as Responsive Design and to my mind has turned into a nightmare. There are tons of information on this subject and not very much of it has proven to be very helpful.
Since my pages were designed for computer screens using the ancient internet explorer for testing, I recently went through a long and labor intensive process of converting my pages to be presentable on smaller devices such as notepads and cell phones. It was a tedious task and one which I could have done a lot better, that is, after it was all done (I still didn't get it right anyway). I went through a huge learning curve. It is often a game of compromise since I had a lot of well designed pages that presented nicely on a big screen. When I made changes to allow smaller screen size the big screen size suffered. Oh well. Life and web design is a compromise.
But I came away with a new respect for the whole thing because initially I thought I knew what I was doing. I didn't. Here are a number of suggestions that may help any of you who have similar and unfortunate problems wherein you design your pages on the big screen and then find out the presentation looks real bad or just plain ugly on smaller devices. Remember always that these software development tools have a terrible tendency to throw a lot of extra junk into the code so when you go into your HTML it looks often inscrutable and unexplainable. That could be why these browsers get confused and tend to throw things in the wrong place.
HTML is a language of defaults. If a <p> carries a left or right allignment it carries until changed.
It is often very difficult to deal with the actual HTML code itself but I did notice in many cases I could strip out a series of <div> <tr> <td> statements along with the <td> attributes and come away with a decent presentation just to get out of the division <div> and the width attributes which were in pixels, not in percent. The <span> also is a real nuisance.
Often when text is copied and pasted into the design work a lot of unwanted tag information is generated. Word documents are famous for this. After pasting text check to see what extra or unwanted tags were added.
Both width and height statements especially expressed in pixels are redundant and can be difficult for a browser to handle. Usually only width is required because the image will automatically retain it's proportions when presented. The only purpose for height is for the browser to prepare space for the image since tries to present text first before images. Often the browser is better left to figure stuff out in an img statement and expression of these dimensions especially in pixels runs totally contrary to responsive design.
Watch for the insidious data cell <td> which can contain redundant size information. Data cells <td> can be real trouble also because they tend to totally confuse some browsers and sometimes render text so small that it has to be manually expanded on the reading device. As I said before, some web design tools throw in a lot of extra code in just to be sure to confuse you. Initially try to eliminate either width or height attributes and see what it does. If you do use a width try to use percent. Set widths at 100% when you want to use the entire screen.
One of the first things to do when reviewing and cleaning up an HTML page is to edit the use of tags. I have found that by turning on the tag viewer, I discover a lot of unnecessary tags that tend to clutter things up. The editors are very good at doing this. Extra tags often get generated by cut-and-paste from different sources which cause the design tool to produce a plethora of unknown and unnecessary tag instructions.
Early web design tools also liked to use divisions a lot <div> </div> which are only needed when a group of text shares a class (a class is a convenient way to group attributes like font, style, indent, hair color, shoe size, etc.). The early web tools threw divisions around just about everywhere just for fun. Also the tag statement <tr> </tr> is used to designate a section of text that shares common characteristics or class. If you have tables <table> </table> that contains the <td> which describes that table size it's probably redundant. I have found out that if I switch from the code view to normal view it is quite possible to see the kind of effect any change has. This of course is a standard feature of any good WEB development tool (wisiwyg-what you see is what you get).
I tentatively began changing length and height attributes from pixels to percent and removing divisions (which have hard size attributes). Then I was constantly changing the window size under different browsers to see the results. As a final step I would publish and check on my notepad and cell phone. Pages rarely came out very well the first 10 or 15 times but gradually I got better.
This takes me back to the real old days when I was an OS (OH-ESS) instructor at Tektronix. OS was the main computer management system for the IBM 360 370 series for many years. It is a language of defaults. The less you say in your instructions the better, but you have to know the defaults. HTML is much the same. There is a certain wisdom in letting the browser figure out presentation at lease as much as possible but knowing the defaults is important.
A whole lot of page information is accompanied by image statements <img xx= xx=> which has border, align, src, alt, width, height and other attributes. If you resample the image when composing then the width and height attributes are not needed but can help the browser anticipate layout. When a browser presents, it first displays the text then goes back and gets the image. This may allow devices with different screen sizes to perform better during presentation and not have to jump around. Of course it's always a good idea to include the alt in any important image because this is the only way that web crawlers can discover what an image is.
The most important thing to remember is to anchor an image near its appropriate text because the text will float around with screen size change over devices but the image will try to stay with it.
Cells and tables will work but keep them down to one column or remove size parameters when possible. At least change them to percent. If you force a size then it effects the text. Again, let the browser figure it out. In my early designs I relied heavily on cells, rows and tables. When I was cleaning up my older work I often came upon the following condition. By removing the code in red I was able to allow the page to float, i.e. fit on a number of different devices and display in a readable font. Pretty simple. The pages at least looked presentable but not all that artistic. The biggest difficulty is with some browsers that interpret font sizes differently in cells. But whenever possible avoid using cells with pixel dimensions because they often change by device and therefore effect text font size and can render a page really ugly on a smaller screen.
By the way the HTML below was copied from a sample. I did not clean up any tags. It's just plain ugly.
<html>
<head>
<meta name="DESCRIPTION"
content="the
perfect bathroom">
<title>the
perfect bath</title>
</head>
<body>
<div
align="justify">
<table border="0" cellpadding="0"
cellspacing="4" width="483"
height="4208">
<tr>
<td valign="top" colspan="3"
width="1022">
<h1 align="center"><font face="Arial">The
Perfect Bathroom</font></h1>
<p align="center"><img border="0"
src="bath.jpg"
width="91"
height="96"></p>
<p class="verse">I'd
regret The special love I have for you, my baby blue<br>
our family began working on this new bath.
<p> </p>
<h2> </h2>
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
When I started working with more complex pages that had cells it got even more interesting. Again I tried removing width and heights attributes on cells so that they could float depending on screen size. This worked sometimes. At other times I used my web designer program to move the contents from one cell into another cell and just deleted the empty cell or extra row. My main idea was to allow the browser to adjust the cell size. There is a lot of guesswork.
I tried using the metatag viewport but to little avail. It seems to be somebody's idea of a wet dream. I also tried the style font-size:10vw again, with little success. It's probably better to stick with your present metatags. You can also try to add some of the other customary metatags to draw more attention from the crawlers, but the purpose here is to make screens presentable on all devices,
I will try to continue with this page.....
When the search spiders start crawling, they like to have a sitemap so they know where they're going. That's why you need a web page design tool that creates a sitemap or xml file.