Screen Display

Nick- · July 14th, 2010, 03:05 PM

Hi, with reference to Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211 page 83

It states that Header,Pagewrapper,Menuwrapper and Footer have an exact width of 844 pixel and it fits nicely on screens with a size of 1024x768.

Due to my computer screen is best optimise at 1366x768, the items only fills 3/4 of my screen in VWD and Browser which is already explain. The problem is should i drag the header, menu and footer or side bar to fill up the white part?

Qns:Will it affect the display on other screen. (Because when i view other webpage i do not have to use the bottom side scroll)Does it mean they write a different code to detect the user screen size so it loads seperate configuration
When i drag the header,menu and footer or sidebar will i cause the viewer of my page to use the side scroll?

Please advice

chroniclemaster1 · July 15th, 2010, 12:42 AM

You are correct on several points. This is a fixed width design so it will not expand or contract to fill up your browser window. You're also correct that everything will appear differently to your users depending on what their screen resolution is. Therefore, adjusting the display to work for your monitor is not necessarily an improvement since you can get the site to look different just by using a different resolution.

I would recommend going with Imar's measurements. One, it ensures that you can simply use the numberes in the book without having to make adjustments. Given that this is a C# book, I'd suggest leaving CSS details aside right now so that you can focus on the new material. Also, while it is non-optimal to have a design that looks small on the page, it is much worse to have a design that is too large for the page, because then your users have to cope with a horizontal scrollbar which is a big visual design no-no.

On the other hand, you have correctly identified a less than desirable behavior in this demo; the CSS is not really best practice especially considering the number of mobile users with 320px wide displays and the increasing number of 2000+px wide displays on the new high end HD monitors that have been coming out for over a year now. Elastic designs are becoming much more important these days for exactly these reasons, and when you've completed this book, I would absolutely recommend picking up a good current book or googling tutorials on elastic designs that fit your user's window.

Imar · July 18th, 2010, 08:01 AM

Quote:

On the other hand, you have correctly identified a less than desirable behavior in this demo;

I guess that depends on how you look at it.

Yes, the design won't look good on a mobile phone. However, by restricting its width, it a) fits on smaller desktop screens and b) doesn't become ridiculously wide on modern wide screens. Fluid designs were hot a few years ago, but nowadays you see a mix of fluid and fixed width designs, where the site can grow as needed, but up to a maximum width. Reading a paragraph of text with a width of 2048 pixels is not much fun.... ;-)

But I agree with your recommendation. Being a book about ASP.NET, the CSS from my book is relatively simple. Getting a book like Beginning CSS is certainly recommended to learn way more about CSS and web design.

Cheers,

Imar

chroniclemaster1 · July 19th, 2010, 12:16 PM

Quote:

Originally Posted by Imar

Yes, the design won't look good on a mobile phone. However, by restricting its width, it a) fits on smaller desktop screens and b) doesn't become ridiculously wide on modern wide screens. Fluid designs were hot a few years ago, but nowadays you see a mix of fluid and fixed width designs, where the site can grow as needed, but up to a maximum width. Reading a paragraph of text with a width of 2048 pixels is not much fun.... ;-)

:O An excellent point. This is probably the key area Iâve been working on in my designs lately for that exact reason: determining optimal value and units of the max-width property, and finding ways to cope with browsers that donât recognize it. It is not an issue Iâve solved yet, nor found anyone else who seems comfortable with their solutions.

IMO, however, the sheer range of screen resolutions spans an order of magnitude these days which is just too much for any fixed width no matter what it is to be expected to handle. Except for projects with well defined users on a standardized interface (iPhone app, employees in an office on standardized equipment) I donât keep fixed-width in my tool kit anymore, but rely on some form of âfit to screenâ based solution and just pay attention to my testing on a wide variety of displays.

Quote:

Originally Posted by Imar

But I agree with your recommendation. Being a book about ASP.NET, the CSS from my book is relatively simple. Getting a book like Beginning CSS is certainly recommended to learn way more about CSS and web design.

Agreed. Although I find the Wrox books much superior on the technical side than the artistic. I would probably recommend starting with Beginning CSS, too, in order to learn the syntax and the range of tools, and then picking up a copy of Dave Sheaâs The Zen of CSS Design. Itâs a excellent blend of web design training and intermediate to advanced CSS techniques.

Nick- · July 19th, 2010, 02:35 PM

Quote:

Originally Posted by Imar

Being a book about ASP.NET, the CSS from my book is relatively simple. Imar

Thou simple, it certaintly caught my interested and thus strengthening my foundation which I believe it is true to many other individuals.
I always wanted to learn to programming properly but due to assignments requirements, sadly my learning way was to edit from other individual codes which I realise how much i'm missing in foundation till i came across your book :(

Quote:

Originally Posted by chroniclemaster1

I would absolutely recommend picking up a good current book or googling tutorials on elastic designs that fit your user's window.

Certainly :)