I am a self-taught web designer with a staggering 3 sites or so under my belt. I just finished the first page of a website for a client who is a friend and therefore a lot more patient than a "real" client would be.
I love the way the sites looks, it is fairly consistent in the spectrum of popular browsers, and overall I was quite proud of it until I realize a major problem that to be honest is about two steps away from making me drop my dream of becoming a web designer.
When using Chrome, Safari, or older versions of Explorer the website's layout falls apart if someone has their zoom set to anything other than 100%.
It is frustrating me to the point of near depression. I used a div to surround the whole body, and the pages layout, which in this case is a MENU is done almost entirely with ULs (unordered lists) positioned absolutely.
The site is made up in such a way that all the parts connect (almost like a puzzle) and if some parts are out of line, it is dreadfully obvious.
I heard the zooming rounds up figures and could call for a couple of low alpha pixels here and there, but in my case some block elements are literally 25-50 pixels out of place.
http://www.stevemarcella.com
No need to get your dreams crushed just yet :> There is always hope.
First thing you should do is check all of the errors, which according to validator are 536 errors on the homepage.
I suggest you run the validator and correct errors one by one. It could solve your problems. First error I noticed is that you have a div element outside of body. You should keep everything inside the body tags.
This is outside of body.
<div class="wrapAroundBody" id="IdWrappingWholeBody">
Hope it helps.
Related
I've been learning to code for some time and I've sure learned quite a lot, but styling has always been a pain in the ass for me (it's very embarrassing, I know). I absolutely have no idea how many pixels a nav bar should have or how wide any component should be. If it's just too small/big for me, I'll resize it. Size units? No idea. Don't get me wrong. Percentages, ems and metrics - I'm aware of its existence and what they do, but I do everything in pixels. I'm not saying that things I code look horrendous and not responsive. It's all try and error until things look aesthetically pleasing and it takes me so much time to make things look pretty.
Let's say I need to make something simple like a popup modal in CSS. I might wrap the hidden content in a div, with a class of modal, its content in a div with a class of modal__content, make a button to close it and some text in it. Semantically correct HTML is not a problem. Animations and colours? Fine, you got it. I just have no clue how to style it. That's when I realise I know CSS just in theory. I can code it, but I just have no idea if the modal should be 300x200 px box for a desktop screen or maybe use percentages?
If you have some saved articles or a book you could recommend, I'd be very very grateful.
I've used Bootstrap and Semantic UI. These are very cool and convenient tools, but I wish to know some in-depth guidelines when it comes sizing since I don't really know what something should actually look like. Most of the time I'm just eyeballing all font sizes, paddings and margins etc.
I'm not a good at graphic design either. Few people excel in both graphic design and in programming/scripting.
SitePoint has some books worth reading on the subject, the first especially (each available in paperback and as an ebook):
The Principles of Beautiful Web Design, 3rd Edition
Sexy Web Design
The Universal Principles of Design is likely to cover topics such as those you're asking about, although I haven't read it.
Graphic design relies a lot on convention (which is usually a good thing), fads (less so), and the preferences of the designer and client. However, there are various guidelines that are important to know. I'll mention a few here.
Large or bolder type, motion (videos and other animations), and contrasting borders and backgrounds draw the eye. Be careful not to give such visual emphasis to too many elements at the same time. (This is a common problem for home pages of organizations that many factions competing to highlight the thing most important to them.)
Adjacency implies relationships. For example, it's typically better to give headings, e.g. <h2>, a larger top margin than bottom margin.
Elements tend to need a comfortable amount of space between them without using too much screen space. When large spaces between content sections are desired, it's usually best to scale them down for mobile devices.
Animations serve multiple purposes. There are the various pulse/"throbber" animations to indicate that content is being loaded or some other kind of processing is taking place. There are transitions that show a non-instantaneous change between states, e.g. a menu opening/closing or change is views of a content/image slider. While others are mostly for aesthetic reasons, to add visual interest.
I'm glad you mentioned semantics. Do you use <label> elements where appropriate?
P.S. Too many people who call themselves "web designers" don't know, or refuse to acknowledge, the differences between graphic design for the Web and for print.
I've been experimenting with this for over a week and I'm about to give up, as I think this is not possible, but I wanted to reach out to this awesome community first.
What I'm trying to achieve is to, somehow, overcome the stacked z-index settings.
Let me show you an example so you maybe get the idea faster:
http://raulmellado.com/clientes/zindextest/
What I'd like is to have the green div (#shouldbeontop) on top of all elements (I am setting it to position:fixed).
In other responses in stackoverflow (yes I've read dozens of threads here), the answer is to change the html, move elements around, etc, but my problem is that I'm creating the #shouldbeontop and #scrollbar elements dynamically using js (my application is a bit more complex than this example, but I've tried to simplify to share my problem here).
I've created a js that can be embedded (ideally) on any webpage which will add the elements, so I can use js if needed, but I can just assume that the #shouldbeontop and #scrollbar elements will be there; the rest could be any html/css combination that's already there.
Usually, where there is no z-index in different divs, this works beautifully, but as soon as there is some stacking, it breaks :-(
If you would like to see a real life application of this, here you can find a quick & dirty demo: http://videngage.me/demo/demo1.html (here there is no z-index, so the video [#shouldbeontop in my simplified demo] is always shown on top (when you scroll down), but here http://www.members.skolahudbyonline.eu/rytmus-trening-majstra/ the video goes behind when you scroll down)
Is there an universal solution for this (using css and/or js), or should I just give up?
Thanks sooooooooo much for your help
Setup:
I have a simple box with rounded corners, that has a header and expands according to the amount of text, as discussed in Dan Cederholm's Bullet Proof Web Design (ISBN 0-321-34693-9).
Works great, EXCEPT when zooming in Google Chrome. Then the right margin of the box disappears.
It works in IE and FireFox without problems.
Example:
Example in jsFiddle
In chrome, it fails at zoom 110% and other zooms too. No problems in IE or FireFox.
Questions:
Any ideas what is causing this?
In general, what makes layouts zoom-sensitive (if any such general rule exists...)?
Is Dan Cederholm's book really bullet proof...?
How far back do you need to be compatible?
I mean, if you can drop IE7/8 you should be using css3 rounded corners. If you need to support IE8/7 you should definitely considder using graceful degradation in this case. It is probably not worth the time and effort to strive for perfection everywhere. That is simply a goal which cannot be met when browsers will never get updated again.
1) What may be causing this
That is a fairly broad question, I couldn't reproduce the problem, or really find one in Chrome 20 (beta) so I will just list a things that can mess it up.
General browser rounding errors, browsers aren't precise, weren't designed to be precise sub-pixel
Mixing px values with other values, different roudings make values add up differently..
Positioning of in-flow elements which get influenced by other in-flow elements on the page (these are hard to track down usually)
Parent element properties (parents with overflow hidden, fixed sizes, for example, I think this might be the problem here in the jsfiddle)
Bugs in browsers
Combination of the above
In this case jsfiddle has a crapload of containers and frames (with overflows set to hidden, fixed heights/widths, px based) etc on the page, even in 'full screen' view. So if you really want to make sure, make a html file on your own pc open/test with that.
2) In general, what makes layouts zoom-sensitive (if any such general rule exists...)?
In todays browsers this may not be all that relevant because zoom functionality is often very advanced and can even scale full-px based layouts without much problems. The only real problem browser which is still used today is IE7. The zoom capability of IE7 is atrocious, and for that reason you should only use % or em based values for text.
The only 'official' related guidelines can be found in WCAG 2.0, the w3 accessibility guidelines/techniques writeup:
http://www.w3.org/TR/WCAG20-TECHS/G142.html
So browsers can scale, modern ones have no problem here, but weren't designed to be accurate, it's also an impossible task with mixed units (em, %, px).
3) Is Dan Cederholm's book really bullet proof...?
Before I start here, I haven't read the book... I never read a CSS book (plenty other resources) in my life, but my first and foremost skill is dreaming it.
Let's start with "What is bulletproof?". Bulletproof in web-design means it will work, everywhere, and will not break, anywhere. This alone should give you a clue.
It might have very well been bulletproof when he wrote that book, but the web is a dynamic place, and even if I take the latest announcement blogpost for the book it dates from December last year. Since then at least 3 new Chrome versions came out (rough estimation) and even more Firefox versions. Microsoft sat on his ass that this time (we would've been in big trouble if they decided to do rapid release schedules).
Things changed, new bugs have definitely been introduced since then.
Regardless of what is breaking it, nothing is ever bullet proof, just very, very close to what you want to always happen, with slight variations between browsers.
That doesn't mean it is a terrible book, looking at his CV he's definitely and a guru on web-design, so he's probably right about a lot of things in that field. I just hope he explains why things are done in a certain way, because that makes you a lot wiser than just learning to do things.
A: "You always use EMs for text! EMs are annoying! Why do you do that anyway?!"
B: "I dunno, read somewhere I should..."
A: "Lets just use pixels! Pixels always work."
B: "Hmmm ok."
You just lost IE7 support. (whether that's a bad thing, is another discussion)
First of all, you're using a background-image, something I would have loved you to have mentioned.
1) So yah, as mentioned in the comments below your post, it's just rounding errors of the div, which crops the background-image.
2) I have no sources sadly, but in my experience, objects using text as a measurement are zoom-sensitive, pictures sometimes not zooming relative to everything else, and content with a predetermined 'set' size (such as textareas, radios buttons, etc).
3) Nothing is bullet proof, especially with something as ever-changing as the web that also behaves differently on different browsers. Hazards of the trade.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.
There are lots of posts regarding iFrames and framesets, but I have not found one that addresses my concern: are framesets bad to use?
Understanding the potential for backlash against framed websites, I want to recreate the Diggbar -- only instead of one iFrame underneath, I want two or more.
This Stackflow thread offers a solution, but it produces iFrames with the page bottoms obscured. To see an example of this, use the link below (I can only include one link, so I'm hacking here. Sorry.) and search for plaques. Note how the bottom of the page is obscured, including the scrollbar bottom.
Framesets seem like they might be simpler for recreating the Diggbar, where the bottom frames are perfectly matched to the height underneath the top bar (i.e., pages are not cut off).
Summary:
Are framesets bad to use (more so than iFrames)?
If I should use iFrames over framesets, how can I recreate the Diggbar while ensuring the scrollbars and pages do not get cut off at the bottom?
Thanks!
HACK LINK (put the link together): "http://" + "ephemera.continuation.org/stackoverflow/iframe.html"
I'd stay away from framesets at all costs. They are valid in terms of the HTML 4 specification but they offer poor cross device support. Most mainstream browsers will display a frameset as intended, but more specialised browsers (like those found on mobile phones) tend to mess them up and a lot of cases make the site unusable.
I suspect there are also accessiblity concerns, but I imagine they would also exist for iframes as well.
Something else to consider is presentation. If you use framesets, you are effectively restricting the design of your website to the parameters of the frameset (this frame sits on the top, this frame sits on the bottom). Whereas, an iframe is just another element on the page and can be manipulated much as any other element with CSS, allowing you to radically redesign your site without touching the HTML.
Rich