Make jsp/html page visually apealing...Help needed

[Sl1ver]

Im creating jsp pages in netbeans 6.5 no frameworks just plain jsp pages

Anyone got advice on how i can atleast make the html part of the jsp look visually appealing?

[chaarmann]

Don't make it "visually appealing", make it userfriendly, quick and functional instead. (Unless it's an advertisement page for a game).
In this case, you can use:
- a lot of flash-objects (with progress bars)
- trailing mouse-cursors
- marquees
- colorful high-resolution background-graphics for each html-element
- background music
- newly designed GUI-elements for buttons, menus and overlays (which looks nice, but are ugly to use and have unexpected side-effects).
- blinking overlays.
- scanned texts as animated GIFs with 3D-effect and twisted lines and rotating letters (so handicapped users, like e.g. blind people with braille-decoder, stay away from your site)
- half-page letters with low color contrast, alpha-blending and fading into background CSS-effects ("What? You can't read the whole word, because you only have 800x600 resolution and only 16-bit colors? Then stay away from my side instead of complaining! Get yourself a modern desktop computer and flat screen! What, you surf from a mobile phone or netbook? Ummm... well, I can't check my page on every browser and every device for looking nice, so go away!)

I hope you got the point.

[Sl1ver]

i get the point, what im looking for though is like a plug in or something to visually design the webpage because essentially now im designing the webpage just from the back end and i only know what it looks like once i run it

[chaarmann]

Our group went through painful mistakes during my 8 years of leading web developer. So don't use FrontPage or its kind as visual editor. Also don't use MS-Word and export the word-document as html-page! The biggest drawback is that the generated webpage has directly embedded, proprietary stylesheets, is many times bigger as it should be, chaotic composed and no maintenance possible.
You are currently going the right way: designing it from back end with a clear structure and keep it graphically simple. Make it as xhtml and run it through the w3c-markup validation service, there should be no errors. Don't use css-like-tags and parameters like <center>, <font> <img> <.. width=...> etc. Especially put all CSS-attributes and Javascripts in files and put a link inside the document to that file. Use prototype, jquery or some other javascript-framework to overcome browser-incompatibility .

After that there should be no need to change the HTML itself, only change the javascript (*.js) and *.css-files! For quick working, save your html-page from browser to your local drive. While saving, the browser will change the links in your html-page of your *.js and *.css files to point to your local directory and put them there. So re-open this page in your browser. Now you can load these *.js and *.css files into an editor and change them around (but don't change the html itself!). After ever change, you can just press F5 in your browser to see the change immediately. After you are done with your beautification, you can copy these *.js and *.css files back to your server.

You have the choice: a quick, dirty page with a visual editor or a slower-to-make clean page by hand. (That means for a beginner. I know CSS and JS so well that I can do it faster by hand then with a visual editor).
Just imagine your boss comes one day and tells you to align the text-headers on all webpages to the left instead of middle and change the letter color of brand names from blue to red, because of a new corporate design or anniversary or legal issues. If you have used frontPage to develop all your more than 100 pages, you will need many days to change them one by one in your visual editor, doing a tedious and error-prone task. But for me it's done within a few seconds: In my general css-file which is used for all pages I change only 2 lines: "h1 {text-align:center}" to "h1 {text-align:left}", and ".brandName {color=blue}" to ".brandName {color=red}". In my HTML I have all brand names surrouded with <span class=brandName >. Tell me, which editor can do that?

[Sl1ver]

thats very indepth, thanx for the advice. ill probably use your advice when thinking designing more webpages or sites

[Frinavale]

@chaarmann: while I agree with your advice about not using something like Word or FrontPage to develop that front end...don't fully agree with you about making it xhtml.

Internet Explorer (a browser that is used by a large population of online users) does not support XHTML (see the W3C article on HTML and XHTML Frequently Answered Questions).

I learned about this pitfall one day when I got excited about XHTML and tried to convert an ASP.NET application to use it.......hehe my bad!

Anyways, I tend to approach things from the back-end and the develop the UI based on the what the back-end objects require. Add the HTML elements that are required to gather/display the object's fields/properties/members...Use <div> elements to group together things that should be grouped together.

Once you have a very basic, bare-bones, grouping of controls required to retrieve/display the information, apply CSS to your page.

You should constantly be validating your page markup against the w3c validator feature. This will help you to develop a website that is standards compliant so that it is displayed the same way in almost all browsers. Once you have a fully validated website, go back and test in Internet Explorer (you will have to add some invalid CSS to get the page to look right in this browser)

:)

Check out w3schools.com for quick CSS tutorials.

Check out alistapart.com for more in depth articles on css and website design.

My favorite CSS website has to be csszengarden.co m :)

-Frinny

[chaarmann]

@Frinavale: You are most probably right about using XHTML. I am still in the XHTML-excited-phase and have not stepped into a pitfall so far. But on the second thought it's better for a beginner to stay with HTML until Internet Explorer fully supports XHTML, having less trouble with developing workarounds.