Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #246721
    ui1018
    Participant

    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.

    #246734
    Senff
    Participant

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

    #246736
    ui1018
    Participant

    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?

    #246739
    Beverleyh
    Participant

    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?

    #246762
    ui1018
    Participant

    @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?

    #246763
    ui1018
    Participant

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

    #246764
    ui1018
    Participant

    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.

    #246860
    Beverleyh
    Participant

    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 :)

    #246861
    Beverleyh
    Participant

    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.

    #246862
    Krish1980
    Participant

    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.

    #246870
    ui1018
    Participant

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

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

    Thanks.

    #246871
    ui1018
    Participant

    @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.

    #246872
    ui1018
    Participant

    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.

    #246874
    Beverleyh
    Participant

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

    By adding and margin.

    #246884
    Beverleyh
    Participant

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

Viewing 15 posts - 1 through 15 (of 16 total)
  • The forum ‘CSS’ is closed to new topics and replies.