Forum Moderators: open

Message Too Old, No Replies

Design & Layout Whats The Best Way To Start?

Consistent designed websites for fast loading and all browsers

         

lasko

4:45 pm on Nov 14, 2002 (gmt 0)

10+ Year Member



I have designed two websites both have slightly different designs.

They are fast to load and clear to read. One has a nav menu on the side, the other at the top and bottom of the pages.

I use style sheets for text etc and sometimes images to keep pages in a perfect line.

Some designers create one table and edit within the table some websites create 4 or 5 tables below one another.

My question is:

What is the best way to create a layout that is fast loading
easily updated and consistent in all browsers plus keeping in mind simple colours that are easy on the eye?

Some have said try drawing on paper first then create a templete and re-use the templete for every page.

I am using Dreamweaver and Fireworks.

Many say simple designs are the best and can achieve more sales whilst keeping a proffessional look.

I would appreciate any tips or ideas on ways of getting started with a blank screen.

Thanks

Quagmire

5:13 pm on Nov 14, 2002 (gmt 0)

10+ Year Member



That's a tough one, and I think it depends on the specific site and audience.

But in general, to keep a close eye on load times, be intimately familiar with the markup language of your choice. I would suggest a text editor to clean up after WYSIWYG editors. This is because even good visual editors, like Dreamweaver, can do things less efficiently than good hand coding.

One rule of thumb is, the less nested tables, the better.

The fastest loading layouts are done with CSS positioning, because it uses less code to arrange elements than with tables. But there are problems there because CSS layout is more cutting edge and less supported across older browsers (and even modern browsers, to a lesser degree). So move as much as you can into CSS, even if you still use tables. Font tags, etc., can really bloat up a layout. A list of repeated <li><font face="..." color="...">some text</font></li> is much less efficient than:

li { font-family: ... color: #... }

That is a good idea about drawing the layout on paper, that's usually how I start out.

Quagmire

5:14 pm on Nov 14, 2002 (gmt 0)

10+ Year Member



Many say simple designs are the best and can achieve more sales whilst keeping a proffessional look.

Amen!

lasko

5:24 pm on Nov 14, 2002 (gmt 0)

10+ Year Member



Thanks for the reply

As a general rule I use a small background image which is a about 1K in size i do this for every page so that I can change the colour of my background all at once but I suppose I can do that with my style sheets.

Their is a good facility in dreamweaver that cleans up html and gets rid of those extra tags that are not required but I have seen some index pages that are 30K and the logo image at the top loads before anything else so it gives you the feeling that the page is fast to download.

All my images are optomized for fast download but my page will not appear until everything is nearly loaded then bang my page appears.

Is this because I create a table then edit with in the table? I don't have any java scripts on my first page and large images have been sliced to reduce load time.

I don't want to create complex designed sites, i am self taught like most in the trade but would like to hear some ideas on how others manage to create pages from nothing?

tedster

5:25 pm on Nov 14, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Some designers create one table and edit within the table some websites create 4 or 5 tables below one another.

If there's a lot of material, breaking it into several tables lets the browser render the first one -- even while the rest of the information is still being downloaded. That gives the visitor a place to start in short time.

I have some very long tables of data on one site - and I break them into separate tables every 20 rows. Works like a charm. It also makes browsing the data easier because it establishes visual "landmarks" throughout the page.

If you use tables for page layout, then it becomes even more helpful - even critical - to use this technique. With one long table your visitor may be looking at a blank screen for too long a time, get impatient and leave.

lasko

5:33 pm on Nov 14, 2002 (gmt 0)

10+ Year Member



Tedster

You are spot on!

I have that problem. My page is fast but is blank until everything is loaded. Plus I have one big table with a lot of content with in this table.

I wish I knew all this before I created a 60 page website.

Its great learning but a pain to fix your mistakes afterwards.

One of my competitors uses 3 tables, One table on the top for the logo another for the content below, than a table for links etc.

It is all kept in a perfect straight line by using small images that blend into the background.

My websites are first in the search engines for all my keywords I receive 10k unique visitors per month but my design still needs a lot of work and imagination.

tedster

5:44 pm on Nov 14, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



how others manage to create pages from nothing

Well, when I actually begin to create a page, I have keyword reasearch, raw content, a purpose, and an effect I hope to create. That's not "nothing" that's really something - even if it's a brand new site.

So, with this upfront immersion in the subject, I often have a visual idea. If not, I look at what others in the field are doing to get a sense of what kinds of approaches, colors, etc are standard.

And then I dig in, aiming to create something that stands out from the crowd while, at the same time, giving enough sense of familiarity that the market niche doesn't think it's weird.

I start in Photoshop and layout a look that I like. It gets easier over time because I have an idea about how to code certain effects - but I try not to let my "knowledge" of HTML and CSS defeat my creativity.

Then it's back and forth between Homesite and Photoshop until I get a template I can live with, using "filler" text. Only at that point does the real text content come into play.

I always plan a final edit of the content AFTER the text is laid into the template. It's funny how different material looks in an HTML page compared to in a tet or Word document. CSS settings for the typography often need some tweaking, and some paragrphs, etc, may need and edit or even a full re-write.

lasko

6:03 pm on Nov 14, 2002 (gmt 0)

10+ Year Member



One of my biggest problems is making my mind up and sticking with it.

I often want to change something or I'm not happy with it, but as a young web creater I am to keen to put it up on the net. I seem to rush things at the end and forget simple rules.

We all learn the hard way.

I look at Yahoo and Google and see their websites are so simple but we all try to make super websites.

I think I will spend more time on a templete then re-design a templete and then maybe I will be ready!:-)

tedster

6:39 pm on Nov 14, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It takes a diffictuly and often complex process to get to high-functioning simplicity.

You've heard people talk about masters in various fields, saying "they make it look easy"? Same thing with the web.

The good thing is that you SEE the goal. A lot of designers could care less.

Eric_Jarvis

11:43 pm on Nov 14, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm with tedster on this

visual design is just about the last stage of a long and complex process...generally I'll have spent a long time ascertaining the purpose of the site and the information and organisatin required to achieve those goals...then the content gets marked up...and a navigation system organised and set as a basic template...then I style the navigation and logos as a set of separate page elements for all the repetitive material...then the content gets set in the templates and styled to suit

basic SEO is largely covered by the time the site is organised...and working in this fashion means I have an entirely workable site in any browser BEFORE anything visual is done...I then just have to make sure I don't break it

lasko

10:58 am on Nov 15, 2002 (gmt 0)

10+ Year Member



I have learn't one of the biggest mistakes any new designers make and thats design first and input later:(

When I now look back at the work I have produced, I say to myself "if only I did this or started like that, It would have been so much easier".

But we all make mistakes like the darlic said crawling off the back of a dustbin:>

I must remember:

Content first, design later
Content first, design later....

Structuring a site can be very difficult especially when you may introduce new areas of trade or pages. Its pays to get organized!