+ Post New Thread
Results 1 to 12 of 12
Web Development Thread, Web Page Sizing Query in Coding and Web Development; Is there an easy way to specify the size of your web page? Probably a daft question, but I have ...
  1. #1

    Join Date
    Jun 2008
    Location
    Dorset
    Posts
    74
    Thank Post
    7
    Thanked 0 Times in 0 Posts
    Rep Power
    0

    Web Page Sizing Query

    Is there an easy way to specify the size of your web page? Probably a daft question, but I have developed my web page for viewing on a 1280 x 1024 desktop. However, whenever it is viewed on a 1024 x 768 or an 800 x 600, it looks naff. What if the quickest way round this? Do you have to develop 3 pages for each size - and if so, how do you "test" the screen size in your code?

    Many thanks,
    Last edited by brahma; 16th February 2009 at 03:40 PM. Reason: Typo

  2. #2

    Join Date
    Aug 2005
    Location
    London
    Posts
    3,156
    Thank Post
    116
    Thanked 529 Times in 452 Posts
    Blog Entries
    2
    Rep Power
    124
    It depends on what you're trying to achieve.

    Good code will just resize; anything else is "bad" code :-)

    Is there a reason for a fixed size? What are you doing that can't flow? Are you deliberately trying to alienate users who don't have a standard page size (eg those on mobile phones, netbooks, TVs etc)?

    You can use script to get the size of the browser and then show the appropriate page but it makes lots more work for you (because you will have to maintain a range of page sizes) It's generally a lot easier to use CSS that can just resize cleanly.

  3. #3

    Join Date
    Jun 2008
    Location
    Dorset
    Posts
    74
    Thank Post
    7
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    Thanks Steve. You hit the nail on the head - what I want to do is resize automatically - so I want to produce good code!!!! I'm using Macromedia 8 although I haven't used CSS. Is there anywhere that does a quick guide - or can you help thru here?

    Cheers

  4. #4

    Join Date
    Aug 2005
    Location
    London
    Posts
    3,156
    Thank Post
    116
    Thanked 529 Times in 452 Posts
    Blog Entries
    2
    Rep Power
    124
    I've never really used Dreamweaver (because it produces horrible code which I could never make sense of!) but key things to look out for are lines which do width="640" rather than width="50%" etc - the latter will resize; the former won't

    Can you link to/upload what you're trying to do and others might be able to offer more advice. to be honest, most of what I do is reports which are just pretty basic tables of numbers!

  5. #5
    polaris's Avatar
    Join Date
    Jan 2009
    Location
    Birmingham
    Posts
    31
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    12

    Size is important

    Hi,

    A good general rule is that a webpage should look good on no more that 600 pixels wide.

    One way that this can be achieved is by having three or two columns, one of the columns should be set a floating size, the other(s) fixed. Most Joomla sites are like this.

    That way someone using standard VGA 640*480 still gets a good screen.

    You can safely assume that if your site is a techy one or aimed at people likely to have a better computer system then you can go bigger. But for school websites I would try and keep at about the 600 pixels for the time being.

    If you look at this site for instance the menus are set to 600px so that someone with a VGA monitor gets the menus without overlap.

    Getting optimum scaleable html is an art, so for novices a fixed width is recommended.

    There is a wealth of information on here.

    World Wide Web Consortium - Web Standards

    And if you want to do a sub page for mobiles then this site will help.

    Mobile Web Best Practices 1.0

    In dreamweaver you can set the aimed for page size in the page setup part.

    If you are learning HTML/CSS/PHP/JAVASCRIPT I also recommend Firefox with the Firebug option. This enables you to look at other peoples sites and highlight areas that you think look neat and look at the code and dare I say copy? Or learn how its done......

    You can change the CSS on the fly to see what affect it has.

    If I can help some more please PM me.


    Regards

    Chris
    Last edited by polaris; 16th February 2009 at 09:16 PM.

  6. #6

    dhicks's Avatar
    Join Date
    Aug 2005
    Location
    Knightsbridge
    Posts
    5,647
    Thank Post
    1,256
    Thanked 781 Times in 678 Posts
    Rep Power
    236
    Quote Originally Posted by brahma View Post
    what I want to do is resize automatically
    This is where the whole using-a-table-as-layout thing came from - the simplest way to lay out a web page is as a grid using an HTML table with widths set as percentages. Use actual text instead of images, it can be flowed and re-arranged better. Properly, you should use CSS to do table-less page layout, as the idea of HTML is that tables should only be used for, well, tables of data.

    --
    David Hicks

  7. #7

    Join Date
    Jun 2008
    Location
    Dorset
    Posts
    74
    Thank Post
    7
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    thanks for the tips guys. I understand the concept now of using tables and specifying them as a percentage - I'll try that in some tests. However, you say about using text rather than Images. This is where my lack of skills comes in but I seem to be able to get much better looking images for titles banners etc by using graphics packages. I cant get decent looking text thru Dreamweaver. So I guess my question is how can I automatically control the size of my images - or cant you do this?

    Many thanks

  8. #8
    polaris's Avatar
    Join Date
    Jan 2009
    Location
    Birmingham
    Posts
    31
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    12

    ??

    Hi,

    Not sure what you mean???

    Cannot get good looking text? Can you explain.

    Images are a fixed size always.

    CB

  9. #9

    dhicks's Avatar
    Join Date
    Aug 2005
    Location
    Knightsbridge
    Posts
    5,647
    Thank Post
    1,256
    Thanked 781 Times in 678 Posts
    Rep Power
    236
    Quote Originally Posted by brahma View Post
    However, you say about using text rather than Images. This is where my lack of skills comes in but I seem to be able to get much better looking images for titles banners etc by using graphics packages.
    That's were the "designer" part in "web designer" comes in - you're supposed to be able to design a page that looks nice because you've laid it out logically, with a decent colour scheme, and with minimal graphics usage so that the whole thing fits all screen sizes, not because you've managed to kludge the web browser into making like a piece of A4 paper so you can recycle your 2-year-old DTP skills. Web pages aren't a print medium, they're web pages, better get used to the idea.

    I think you can actually set the width of an image as a percentage, and the browser should resize for you. You might get variable results with different browsers and different screen resolutions, so test. Don't go overboard with this technique - remember large images take longer to download, and something with a smaller screen probably also has a slower Internet connection and/or less storage space/working memory/processing power. Best to aim for just a few well-designed images that can be easily cached. Google (the homepage and rest of the site) is generally a reasonable kind of design to follow - their logo as a graphic, but most other things are text, and the page is nicly laid out and not too cluttered.

    --
    David Hicks

  10. #10

    Join Date
    Jun 2008
    Location
    Dorset
    Posts
    74
    Thank Post
    7
    Thanked 0 Times in 0 Posts
    Rep Power
    0
    I guess what I mean is you can generate good looking graphics in another package and when you save that image it is saved at say 130 x 40 pixels. That graphic, when used in your web page, is always 130 x 40 pixels regardless of the screen resolution right? So on a smaller screen say 800x600 the page looks squashed with a big graphic. So should you always develop on a small screen, assuming it will be ok on a large screen? I would like my logo to have some depth - a bit 3Dish ...

  11. #11
    polaris's Avatar
    Join Date
    Jan 2009
    Location
    Birmingham
    Posts
    31
    Thank Post
    0
    Thanked 1 Time in 1 Post
    Rep Power
    12

    Size

    Hi,

    Yup, the image will always stay the same size....

    One way to make your page a constant look at feel is to use imagemaps if that is what you want to do.

    An image map is a "picture" of the screen, or part of the screen that has clickable areas which then take you to other pages.

    Normally, or used to be, the way that film websites were done. A really cracking graphic can be drawn by an artist and a web designer can then use his magic to make parts of the image clickable.

    The other way to see how this is done is to find a site that you like.

    Use firefox and firebug (as I described above). Or roght click and view page source.

    That way you can see how that designer crafted the page.

    And the previous writer was absolutely correct about dreamweaver code, so best steer clear of sites built by that!

    With the age of Joomla and the like the designers craft is getting lost a little. Our chaps are just as lazy nowadays...... or is that a cost thing driven by the marketing man (whoever he is?- oh yes its me!).

    CB

  12. #12

    dhicks's Avatar
    Join Date
    Aug 2005
    Location
    Knightsbridge
    Posts
    5,647
    Thank Post
    1,256
    Thanked 781 Times in 678 Posts
    Rep Power
    236
    Quote Originally Posted by brahma View Post
    That graphic, when used in your web page, is always 130 x 40 pixels regardless of the screen resolution right?
    No, you can set the width and height attributes in a img tag, and I'm pretty sure you can set those as a percentage. This might not get you very good resizing results, mind.

    --
    David Hicks

SHARE:
+ Post New Thread

Similar Threads

  1. Query of existing query data in PHP
    By markwilliamson2001 in forum Web Development
    Replies: 5
    Last Post: 5th October 2007, 08:43 AM
  2. Replies: 6
    Last Post: 2nd May 2007, 07:55 AM
  3. VPN sizing and licesing
    By ITWombat in forum Wireless Networks
    Replies: 5
    Last Post: 5th March 2007, 03:08 PM
  4. Replies: 3
    Last Post: 27th January 2007, 06:38 PM
  5. Query Active Directory through asp page
    By KarlGoddard in forum Web Development
    Replies: 19
    Last Post: 22nd February 2006, 12:15 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •