How to beef up this page with better or additional CSS code?

[ui1018]

to make it more visually appealing. Admittedly, I was never big on CSS or CSS3 but realized that CCS/CSS3 are super important.

Page URL:
http://54.80.71.115/demo/client_side_skills_demo.html

Many thanks.

[Senff]

My suggestion is to add some colors, make the page responsive, and add some spacing in (and around) the input fields.

[ui1018]

Thanks for your helpful suggestion, Senff, regarding colors, what color and for which section would be desirable? as for “responsive”, I’ve already added the meta name viewport. And element size-wise, I tend to use percentage, anything else in particular I need to be mindful?

[Beverleyh]

And element size-wise, I tend to use percentage, anything else in particular I need to be mindful?

If you look at your page on a small screen, you’ll see how the form fields overflow out of their container. Probably due to the tables you’re using to structure them, so either apply CSS that breaks the horizontal nature of the table at smaller widths, OR, rethink the way you structure the fields and not use tables at all.

As for colours, you could always try a few out in an image mockup. Maybe try some lighter background colours to differentiate between added fields/rows, and a brighter colour to draw the eye to the [+] buttons?

[ui1018]

@Beverleyh, I appreciate your thoughts.

Regarding small devices, I should have said, this particular FORM is not suitable for small screens since its primary task is to collect considerable amount of data from a professional user, standard desktop/laptop screen is the right one for him/her.

I like your idea about colors.

Not sure how to make all the INPUT box pretty with some CSS or CSS3 code, any idea?

[ui1018]

Any idea on making all the INPUT boxes pretty with some CSS or CSS3 code? Thanks.

[ui1018]

And what do you all think of this page after adding some color?
http://54.80.71.115/demo/client_side_skills_demo_new.html

Thanks.

[Beverleyh]

as for “responsive”, I’ve already added the meta name viewport.

Regarding small devices, I should have said, this particular FORM is not suitable for small screens since its primary task is to collect considerable amount of data from a professional user, standard desktop/laptop screen is the right one for him/her.

Then why add the viewport meta tag at all? Desktops don’t recognise it.

Or in those circumstances when a user may happen to stumble upon it, or try to use it on tablet/mobile, you could apply the viewport meta tag with a width value so at least it all fits on the screen – something like this https://css-tricks.com/forums/topic/viewport-scalezoom-portrait/#post-244856

this particular FORM is not suitable for small screens since its primary task is to collect considerable amount of data from a professional user

Maybe I misunderstand because this particular form in the demo doesn’t look like it gathers a considerable amount of data at all. It looks like a record could very easily be added via a mobile or tablet.

At the end of the day, its almost impossible to control what device a user accesses your content with, so making it responsive so that it fits/works on all devices would be a big plus. Regardless of how you intend folks to use your application, I think most of us here can guarantee that there will always be at least one or two creative sorts who will find some new and challenging way of (ab)using it :)

[Beverleyh]

And what do you all think of this page after adding some color?

Looking better, but I think there should be a greater line-height on text.

Also going back to what Senff says – try adding more space in and around form fields. Tip: check in all browsers.

[Krish1980]

Purely opinion:

I would remove the border around the page – the border makes it look like a pdf.

I would remove all shadows (maybe just add a very subtle shadow if necessary) since I prefer the flat look. I would definitely remove all shadows applied to text.

I would increase the line height of the text elements and increase the spacing between the form elements.

I prefer subtle borders – the borders on your page are too dark for my liking.

Looks-wise, here is an example of the kind of design I like

http://semantic-ui.com/

http://semantic-ui.com/elements/input.html

Code-wise:

I would use divs instead of table tags for layout

I would definitely try and make the page responsive.

[ui1018]

@Beverleyh, I’ve added line-height: 25px; for div

Regarding ” try adding more space in and around form fields.”, how to do that?

Thanks.

[ui1018]

@Krish1980,

Took a quick peek at http://semantic-ui.com/
Neat.

Hmm, I’m thinking about adding a background-color to make text and everything else stand out to enhance readibility, but unsure of a suitable color, lightgrey is a candidate.

Thanks.

[ui1018]

Additional Info:
This particular FORM is for a client and possibly one or two of his associate(s) to use to enter relevant real estate title data. Hence, it’s not for public use, and we can advise the client to use desktop/laptop for the FORM for speedy data input.

Good observation on “why viewport meta tag”?, just in case the client uses a mobile device to view it just for the hack of it.

[Beverleyh]

Regarding ” try adding more space in and around form fields.”, how to do that?

By adding and margin.

[Beverleyh]

That should be “by adding padding and margin”. (my edit time expired)

[Author]

Posts