Smart Web Design?

Posted on 2007-08-10
Last Modified: 2013-12-25
I am trying to figure out what the best practices are in order to make web site appear the same in all resolutions. Obviously I can see the website no matter what but since im using a 1024x768 resolution  the website only appears the same when the user is also in this resolution, how can I resolve this? Is it necessary to make a version of the website for every resolution... I hope not. Is there a java script that will accomplish this by? Im kinda at a lose.
Question by:accrain
    LVL 8

    Expert Comment

    Here is a great page that explains multiple best practices that you should look at, including resolutions.

    I'll get back to you with a little more info as well...

    LVL 8

    Expert Comment


    Accepted Solution

    I would advise against using a typical 'fluid' layout in your website, as it can lead to unexpected and/or undesirable results in extremely low or extremely high resolutions - low resolutions can render the content too narrow and cause it to excessively stack on top of itself line after line, and high resolutions (1280x1024 full-screen and higher) can and will cause your text to stretch too far across the monitor. You will end up with one-line paragraphs that should be 4+ lines. There is a reason why newspapers and magazines divide their real-estate up into manageable - and more importantly, readable - columns.

    I design all of my sites using a 'fixed' width layout. I have just made the decision to support only 1024x768 resolution and higher, as opposed to 800x600.

    If you still want to go for the 'fluid' layout, nowadays there is a reasonable middleground;
    Cascading Style Sheets is your best bet for pulling this off satisfactorily. CSS has, in addition to pixel and percentage size specifications (like HTML), min-width and max-width. I strongly advise you utilise these features to avoid the aforementioned problems with extreme resolutions.
    You might set your content area to a min-width of 960px, and a max-width of 1220. This would scale nicely from 1024 wide to 1280 wide.

    CSS references; - W3Schools is quite good - Sitepoint Forums CSS subforum, a wealth of information. The search facility is an excellent tool, and if that fails, post a question with your specifics.

    LVL 44

    Assisted Solution

    "how can I resolve this? "

    You can't.  Web pages are by nature fixed to font sizes and screen widths, and if you try to make it auto resizing for all screen resolutions, you will have endless problems -- fix it at one resolution, it goes hawire at another, and so on.  You will grow old and gray trying to fix a problem that is unfixable by the nature of HTML code.

    The best you can do is CENTER the entire page, and use percentages in all your tables and cells, not fixed widths.  YOu will find this unsatisfactory, so the next step is to do a resolution test of the browser, which is browser specific BTW, so you need about 8 resolution tests for the different browsers.

    Finally, after weeks of effort, you will realize this simple axiom -- either write to 800 width and let the 1024 users work with a smaller screen, or write to 1024 width, and let the 800 users scroll endlessly.

    I currently prefer the former, it allows for essentailly ALL users, without alientating any of them.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    Read about why website design really matters in today's demanding market.
    Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
    In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now