/    Sign up×
Community /Pin to ProfileBookmark

Layout for novice?

Copy linkTweet thisAlerts:
Aug 07.2006

Hi

I’ve been grappling with CSS in my spare time and have come up with this site layout – [URL=http://www.round-the-bend.co.uk]www.round-the-bend.co.uk[/URL]

However, it is a bit ugly for some browsers and doesn’t cater well for every task.

I want to create a very simple and effective design, similar to [URL=http://www.alivewithtechnology.com]www.alivewithtechnology.com [/URL].

Thing is, it obviously isn’t quite what I need so I’d need to tweak it. I’m always unsure about doing that because I’m not sure what bit to chop out and what to alter.

I believe the best bet is to start from a blank canvas, set a background, create an area for the important stuff to go, divide that up into content and navigation etc, then deal with each of those portions separately too.

Does that sound right/wise/sensible/over-complicated?

In the past I have found it can take an age to get a design in place, is that because my skill level is poor or is it because I use Notepad when I’d be better off using a bit of software?

Help…..ta!

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@JPnycAug 07.2006 — Well your background image or color is easily changed later (with css pretty much everything is) but it can help you from a design perspective if it's there 1st. For example if the background is too "busy" it can obscure the content and make it difficult to read.

I use notepad as well, and most of the time I can get the page laid out the way I want in anywhere from few minutes to an hr depending on how much content and how involved the layout. If you're already on the path of coding by hand, my advice is, don't change. You're already starting out on the better road, in my opinion.
Copy linkTweet thisAlerts:
@WebJoelAug 07.2006 — For those whom like to tinker with non-tables, all-CSS layout, check out:

http://www.strangebanana.com

You can get a FREE for personal AND commercial-use D-HTML layout which is 'programatically-generated' right before your eyes. -No design is ever the same, -they are all different!

Here you can get 'freebies' to tweak, experiement, test... and if you totally bust it and canot get back to a good-looking template, -just go back and generate another freebie to play around with! ?

The learning curve goes up from practice like this! Enjoy!!
Copy linkTweet thisAlerts:
@RoddersauthorAug 07.2006 — Thanks chaps! I'll stick with my manual coding, and I'll look at how to make nice pages easily. I think my problem is trying to do the intricate stuff before I have the basics in place.....like trying to construct a roof for a house midway doing the foundations!
Copy linkTweet thisAlerts:
@ray326Aug 08.2006 — You've really done a pretty good job, Rodders. Start with the content (foundation) then do the presentation (roof). ?
Copy linkTweet thisAlerts:
@RoddersauthorAug 08.2006 — thanks, Ray (for your comment here and on my double-posting in the General forum).

What would be really cool would be a software package where you could draw out a design using a GUI, then see the CSS behind it. Something that delivered nice clean compliant code. Then if you could test it for different screen dimensions and content size to see what it looked like.

I guess that's what Dreamweaver and FrontPage do in essence, but I've tried FP and found it cumbersome and limiting.
Copy linkTweet thisAlerts:
@ray326Aug 09.2006 — The problem with any WYSIWYG editor is it tends to make you think of the layout first when the content is the main thing.
Copy linkTweet thisAlerts:
@RoddersauthorAug 09.2006 — So true.....I'm going to make a new design that is clean and not worry about all the quirks between browsers, so long as the pages are readable.

I'm so fired up to get this site working how I want it, wish I was good enough to make a living at it!
Copy linkTweet thisAlerts:
@WebJoelAug 09.2006 — 

Great that you can and know how to use NOTEPAD.exe for coding. I think that everyone should start out with notepad. Get the skill down solid. I mean, the 'it [I]can[/I] be done' skill. But eventualy you're going to want to go to something that allows you to switch views faster... you're going to want to get an [I]html editor[/I] program!

SEARCH for "EditPlus2", or "HTML-kit". Get one or the other. HTML-kit is FREE I beleive, and EditPlus2 (the easier of the two to use, imho) comes with a FREE 30-day trial and unless they changed it, it continues to work even after that 30-days are up. I bought my copy (so I don't have to go through the "Register now" start-up screen, -and, it's a GREAT product and worth the small fee to own it).

Use an editor like either of these, -your coding speed will greatly increase.
Copy linkTweet thisAlerts:
@RoddersauthorAug 10.2006 — actually i have just moved to HTML-kit....not getting the full benefit yet but I will...
×

Success!

Help @Rodders spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...