• Please review our updated Terms and Rules here

Responsive Layout vintagecomputer.net

billdeg

Technician
Joined
Nov 18, 2003
Messages
3,885
Location
Landenberg, PA USA
Hey all...let me know what you think of my new site's layout. I created my own template and integrated into the existing programming. There are a few utility pages left to convert, but it's mostly done. I do not intend to convert the old static pages, they're to be left as-was. (i.e http://www.vintagecomputer.net/robots.cfm)

I have been working furiously to be ready for 2016. Let me know if you run into issues with your particular browser/device and I will try to help. Screenshots help.

Drove me crazy that I could not view my own site in my phone when doing work on something. Problem solved.

http://www.vintagecomputer.net

if you're curious...my company
http://www.degnanco.net



Bill
 
At a glance, looks good in SeaMonkey 1.1.20. Congrats for keeping compatiblity in mind. I come across a lot of web sites that won't work in anything but the absolute latest versions of Firefox or Chrome. It seems like the web is trying to move back to a monoculture, similar to the bad old days when everything only worked in IE.
 
It's a fresh new look for your excellent site (which I refer to for motivation for my own projects as well as super-useful information about 11/05s), but I have to say I find the large circuit board background picture sidebars a bit distracting from the centre content column when they scroll with it, it sort of overwhelms the middle somewhat. I know it's your site and design, but may I suggest it could it be subdued a little and fixed in place so only the content scrolls?

Steve.
 
For me it is actually very important that the background image scrolls with the rest. Sites where part of the page tries to "stay behind" works badly on Android, with delays and annoyances. As it is now it's perfect as far as I'm concerned. It zooms well too.
 
I tried a test adding background-attachment: fixed; to your body style using Firebug so the centre scrolls only, and I think it looks better this way. I don't think there is CSS to automagically subdue the background image without altering the text opacity but a quick search found a Google books hit on some pages in the book 'Visual Stylin' with CSS3' that shows how to do it by adding a solid white background gradient and setting its opacity to 0.85.
 
Personally, I think backgrounds or other objects that don't scroll with the rest of the page are dumb, ugly, and belong left in GeoCities.
 
Well each to their own, but content is king. not the background.
That is actually one reason to let the background scroll with the rest. If it doesn't, it is effectively moving against the content and is thus disturbing. And, as mentioned, works badly with the Android browser - not only due to the browser, I think, also due to resources: It does the two parts one at the time so to speak, and that's very visible in a negative way. There are some sites like that out there, unfortunately. Including my online guitar shop which degraded their website to using a non-scrolling background, I don't visit that page anymore.
In fact any web page with parts trying to stay in the "same place" when scrolling is broken in my opinion. Annoying on desktop browsers too.
The vintagecomputer.net page as it is now is good IMO. It feels snappy and is easy to browse.
 
Last edited:
Looks fine in Pale Moon (based on Firefox) and Opera, but in IE8 (if you care about XP users who haven't bothered to install a real browser) the layout is rather broken:

http://www.amstereo.org/images/vc_ie8.png

Thanks for the heads up on this one. I have to decide what to do about XP / ie > 9

AS far as what to do with the background, not sure yet. I love the photo and I intentionally have it sized to fit the window, no matter what the height of the window. What it does is use a part of the image rather than stretch it out or force it to move with the window. You'll see that long pages have a totally different view of the background vs. short pages like the contact form.

I will eventually find the right amt. of background and characteristics. I am also moving columns around based on the screen width pushing things down or removing entirely if the width falls below a set of threshholds.

I am using a custom CSS I built that plays off the Twitter bootstrap as the CSS schema.
 
Back
Top