From some great advice in another thread, it became clear that I need to learn CSS.
I had a look at Home - Build Your Own Website The Right Way Using HTML & CSS, 3rd Edition, but after reading 144 pages from the sample, I had picked up exactly 1 useful bit; it appears this is not the thing I need.
I have gone through some online stuff as well, and there are only two things that are no clearer yet: how to get rid of tables and how to position images correctly with CSS.
My website is and will remain very plain for specific reasons, so I really have no interest in being able to make very flash things.
Any suggestions for books and online courses that match the aforementioned requirements will be greatly appreciated
Alex’s book is very thorough. He also incorporates a lot of design theory as well as his knowledge of the psychology of design. That’s what makes his book so valuable.
Do you mean get rid of tables for layout? That’s a large portion of what CSS is about, so if that’s not clear, it sounds like much of CSS is still not clear.
Positioning images sounds like a minor issue, really. If you give an example of what you mean, I’m sure we can answer that in a jiff.
That is a reasonably accurate assessment. Only last week did it become evident that this is a skill I have to add.
My latest attempt at tarting my site up, was adding the gif on the top right, and two jpg’s underneath it, whilst leaving the main text symmetrically in the middle.
The page in questin is the link in my post above. Is it indeed a simple matter to postion the 3 pics beneath each other ( and keep the text symmetrically in the middle in stead of lopsided if possible ) or did I make a real mess of things?
What’s really needed is to take a step back and plan the page out from the start, deciding what goes where and getting the major sections right. So normally there would be a header, then perhaps a main section with content floated left and a sidebar floated right. Then a footer below all that.
So the first question would be how this page needs to be laid out. That’s not clear from looking at the page at this stage.
Easy explanation for why it is not clear: I don’t know myself yet. The site is there and ranks fairly well on s.e. and therefore I don’t want to risk making major changes in one go. Besides that, I don’t have a clear picture of what I want. So far I have been bumbling along and adjusted things based on feedback I got from people that are neither in my line of work, nor webmaster; in other words: your average Google user.
My site building so far has been an a**e about face exercise.
It started off with somebody else building it for me with a dreadful provider called sitesell by using their online building tools. As a result, the site was cumbersome, patchy, slow and very obviously template based, with a cheap and unprofessional look to it.
I ditched sitesell, and with it, most of the lay out disappeared. In the past 4 months, I cleared most of the rubbish from the templates and hope to finish that job in a couple of weeks.
The result is a website that is entirely “repaired” in stead of “designed”. All the code that is in the pages I have finished is there because I found out that it works. A lot of it is probably painful to look at for a webdesigner, but I can live with that. It doesn’t do for great lay outs though, which brought my need for learning css.
I only want to use the basics, as I purposely avoid giving the site a flash look. My business model is to deliver a technically high quality without frills, and I want my website’s presentation/lay out to reflect that. Hence loads of text, no pop-ups apart from email button, and only a few pictures so people can recognise items. ( and use the alt tags for seo )
Looks wise, I only want to upgrade the current lay out from an amateurish look to “plain professional” if that makes any sense.
You certainly don’t need Photoshop frills to look technically high quality or professional, but at the moment it’s far from that. I would advise you to consider the content of the site and work out a simple layout that would suit that content—which usually means a clear header (company logo or whatever), a content area (say to the left) and subordinate content (links etc) to the right, with a simple footer at the bottom.
Web page layout can be a really nice exercise in precision and logic, and that’s what the site needs first and foremost. Make each page rock solid and reliable in terms of where things appear, and it will convey that about the business too.
That is a bit of a challenge, as I don’t know squat about webdesign in the first place, and am building/adjusting the site based on feedback from users.
I’ve got a vague idea about what a header and a footer looks like, but not a clue as to their technical function, let alond how to construct it, or what they “should be like”.
Needless to say that I have no idea what “main section with content floated left and a sidebar floated right” means.
My site is constructed using my fault finding and deduction skills on the mess that came out of diy-package, and I know little about actual webdesign. The little I do know, is 5-7 years old.
You just won the understatement of the week award.
Would you happen to have a couple of links to sites that comply with this, whilst being information heavy and very simple in presentation?
It sound logical, but I’d be lying if I said I could imagine what that looks like.
Please bear in mind that I am a total novice to css, and my html knowledge is 2 on a scale of 1-10.
There’s a heading up the top, some links to other pages, a section for content on the left and a sidebar on the right, and finally a footer at the bottom (where you might put a copyright notice and maybe some subordinate links to your privacy policy or whatever).
My site is constructed using my fault finding and deduction skills on the mess that came out of diy-package, and I know little about actual webdesign. The little I do know, is 5-7 years old.
The explanation of that layout (in the second link above) may help you understand the various aspects of that kind of layout. (It was just a random find.)
I suggest that you establish a template like this that you can then use on every page. Simply to try to manipulate the pages as you have them now is not really worth it. I live in a rented house which the owner is about to sell, so there are some minor renovations going on. Today a guy came to re-lay some loose bathroom floor tiles. Once they were lifted, we found that it was a wood floor beneath that was completely rotten. The tiler did not want to relay tiles over that, but the owner insisted that he do it and not repair the floor. It’s a disgusting thing to do, really, but that’s the equivalent of trying to push things around on your pages without getting a solid structure first.
The example would probably do if it had 3 colums ( the extra one being on the left and contain a number of buttons for homepage, email etc ) and it would be easy to sprinkle randong pictures on the pages. Could that be done with minor adjustments to the example, or is it a fundamentally different approach?
I fully understand what you mean with the analogy of the house, and agree with the principle. The problem is: I don’t know IF I will be able to master CSS at all, and even if I do, it may take a long time.
It is quite important that I can add a logo and a couple of photos underneat on the right hand side on all pages asap ( by the end of September at the latest ) whilst getting rid of the lobsided look it has now. The site is generating sufficient hits but the conversion factor is too low. My busy season starts around October, which means I need to do upgrades before then. It also means that from Octorber to Februari, I won’t have much time to work on the website.
As I doubt that I will be able to master CSS in one month, AND redesign and rebuild the site, it meanst that I have to settle for “keeping the rotten floor” until next year.
From your description above, it sounds like you do have a fairly clear idea of the layout requirements. If you could draw that up into a picture we could provide you with a nice, clean template to work with. Then it’s just a matter of pasting your content into that structure, which you could do in a very short time. Not need to take months on something simple like this. You wouldn’t need to know much CSS at all. Once a few styles are established, you can just paste in your content.
Yes and no. Not ideal, but what “will do for the moment” is as in the page below, provided:
The photo displays a bit below the logo and against the right hand border in stead of next to the logo.
2.Adding 1, 2, or 3 pics of slightly varying sizes below that, does not bring the centre field with the main text out of alignment.
Maybe it is me, but I find a page with the text noticibly out of the middle rather unpleasant to read.
I don’t know how to draw an accurate picture of it, but with the 2 points that I listed above implemented, something like the page below would tide me over if I could duplicate it for my other pages with different photos.
That looks totally different on my computer regardless of whether I use Opera, IE, firefox or Chrome.
“Empty” column of about 20% of screenwidth on the left to display the buttons.
“Empty” column of about 20% of screenwidth on the right to display the logo and some pics.
Center column of about 60% of screenwidth that contains main text.
I’ll see if I can work out how to draw something in paint; never use that kind of program.
As my text part covers around 1000 words per paged over #50% width, the drawing is not proportional. On a normal screen, my pages are about 2 screen heights main text, and a third screenheight’s worth of links below that.
If taking and posting a screenshot is easy to explain, I could do that to show how it displays on my computer.
Alternatively, clicking on one or more of the buttons or the links at the bottom of the page may show you a “normal” looking page, the funny display might be due to the addition of the logo. Before that, it looked ok on other computers and even my friend’s smartphone.
