This is my situation, I have a css 3 column fluid layout (finally mastered the holy grail, thanks everyone!) and in my left column I have a google adsense advert. For those of you familiar with this, they aren't very flexible in the advert sizes, but I am curious if there is a way to change the advert based on the width of the column. Currently this column sits at 20%, so I am thinking maybe a good old fashioned "If - Else" statement might do the trick, but I haven't got it to work yet. The logic is that say we have two ads, a 180 px wide one (a) and a 280 px wide one (b), so if the column is greater than 280 px then it will display advert b, if not then it will display advert a. Has anyone else done this? Thanks!
There are a few considerations here. First, you tagged this question with css. If you simply want to use css to hide the ad your logic has determined should not be displayed, it's trivial to do so, but this is a terrible idea. For one, you'll be hiding a loaded ad, which Google specifically forbids. Next, you might end up hiding an ad that has loaded first, and therefore has the most "valuable" clicks on your page. You don't want to be left showing your less valuable ads.
What you need to do is use javascript at page load to determine what the viewport width is, and then choose which ad code to load in the ad slot you are talking about. Test this in as many browsers as possible, because you need to make sure you getting the correct viewport width for this strategy to work. If, for some reason, it doesn't work, make sure that the fallback doesn't collapse the layout catastrophically. The downside to this method is that if the user changes viewport size after the page load, then the ad will break boundaries. You can at least use CSS to mitigate this edge case scenario, either hiding or cropping the ad's parent div (overflow: hidden;) so that a change of viewport size doesn't break the layout.
Related
I realise this is almost entirely subjective or situational, but at work we are creating a web application - I think that padding should be defined as percentages so it is more responsive for smaller devices, my coworker thinks that the padding should be a fixed value and that only the content should grow with the page.
He gives the example of stash, where the code section resizes with the page, but the side bar remains a fixed size.
Who is right?
You've answer your own question: 'I realise this is almost entirely subjective or situational'
Normally we define multiple sets of css to handle PC and phone devices separately.
While if your page isn't that complex, using percentag/vw/vh etc instead of px to achieve higher compatibility is also a good idea.
But anyway, it's entirely subjective on your situations
I have been trying to code a responsive thumbnail group that I'd like it to respect to a few rules.
I came very close but the implementation always end up not satisfying at least one of the rules. In other words when I try to do one thing it always cancels the other.
In summary, what I am trying to achieve is something like this -
http://postimg.org/image/4yx6poscz/f57d6517/ (I wasn't allowed to post a picture, sorry)
So basically, what I am after is;
When the user resizes the window the thumbnails (consist of an image and some basic HTML) will shrink up to a point.
When the breakpoint is reached, the most left one will disappear and the rest of the thumbnails will return to their original size.
Continue until the min-body size where we just display the x-axis scrollbar.
So, referring to the image, providing that no resizing is done just yet, the items will shrink, lets say until 20% and then Item 7 will disappear letting free space to the rest of the row to expand to their original size.
I am currently using the latest version of bootstrap however, as you may guess col-lg col-md and etc. classes are not really helpful in this case. I have come up with some custom breakpoints but I can't get my head around the shrinking back to the original size issue. That is where I get stuck.
Also I think it's worth mentioning that Ive been trying to come up with a solution that is pure HTML and CSS however I am definitely open to JS solutions as well.
A good example would be spotify's webplayer (play.spotify.com) thumbnail examples.
Thank you very much in advance for your suggestions.
Can somebody please tell me the best way to deal with different window sizes and with a user resizing the window when creating a webpage.
Because I always find myself creating layouts with html, css, etc. and at first everything look perfect. But as soon as I increase or decrease the size of the browser window everything falls apart.
Also it would be great if anybody could point me to some sort of guide or anything similar.
Thanks it advance! Any help is greatly appreciated!
For detection, you may want to use css media queries (in which case you may want to to use https://github.com/scottjehl/Respond Respond.js's shim for older browsers, to add fuller cross browser support), and target certain screen widths. http://html5boilerplate.com and it's default css: http://html5boilerplate.com/css/style.css has a great default css set for exactly that type of media query.
Another approach is to give a fixed minimum and maximum widths to the outer container of the page. For example:
body{text-align:center;}
#outer-container{text-align:left;margin:0 auto 0; width:98%;max-width:900px;min-width:760px;}
that way you can grow and shrink it and see how it looks within a certain range and know that other viewing windows are going to see that plus a horizontal scroll bar at worst for small viewing.
In general, just using the html5boilerplate as a starting base is a great approach, it's an excellent piece of work.
When creating a web-site design, is the only real option to provide a fixed content width?
I notice most major websites (this one included) center all the content into a fixed width, which ensures all elements look correct on all screen sizes.
I think I already know the answer to this, but a colleague seems to think that there should never be a horizontal scrollbar and a website should resize to the users screen width. I make the argument that text can resize but other elements can’t (buttons, textboxes etc), so a fixed width is the only option.
I'd love your opinions each way.
Surely fixed width is the only way you can guarantee the correct layout on ALL browsers?
You can get clever with floats/media queries to make layouts work well at narrower widths.
But it is indeed more common to go with a fixed width:
It’s easier to design
Not many people have narrow monitors these days — most websites seem to assume they’ve got 1000 pixels of horizontal space to work with, and I haven’t heard of them getting many complaints
Touch-based OSs (iOS, Android et. al) make zooming web pages feel very natural, so pixel dimensions aren't quite as important there.
When lines of content get too wide (I think more than around 60 words?), they get difficult to read, so there’s not much advantage to be gained from having elements expand to full width for users who have bigger browser windows.
I think the most likely group of users to have less horizontal space available is smartphone users, and you’re going to want a specific design for them if you care that much about their experience.
Oh, just one thing though: “Surely fixed width is the only way you can guarantee the correct layout on ALL browsers?” With the greatest possible respect, that’s a bit of a programmer’s way to think about it. You can’t guarantee anything about web page rendering. Browsers and operating systems can do whatever they want. That’s the web. Let it go.
Dynamic-width web-sites are generally composed of one or many percentage-width blocks which make 100% total. So blocks size change with resolution or browser resizing, but if total width is too short it can occure lisibility problems, so a minimal width is specified for <body>, in which case a horizontal scrollbar appears.
But you can think differently : http://www.smashingmagazine.com/2008/08/14/will-horizontal-layouts-return/.
I tend to make my websites have a minimum width for legibility, but otherwise the width is determined as a percentage of the window size (I normally pick 80%).
I find this gives me ample coverage of the viewport, whilst still looking good on larger monitors.
I find this approach fails on larger screens when there is little content, as the content tends to get stretched into a line at the top of the page, which can make things confusing. So for those pages it can be good to have a fixed width, centred style.
No. A thousand times no.
If your website presents any kind of body text, fixed width is an abomination from the depths of the mid-90s, forcing readers to scroll like crazy, while being mocked by vast expanses of unused screen space to either size. (Now, a variable number of columns I might buy.)
BTW: flag for CW.
Horizontal scrollbars are a big problem. A properly designed website should be able to scale down to be used on small resolution screens (640x480). Also, it's nice to have to have my browser window maximized just to browse a site. Also, there's no reason why a person with a high resolution monitor shouldn't be able to use the extra space their monitor gives them.
I often inspect sites using firebug and have noticed quite a range of complexity in the way developers wrap their content. Looking especially at centered aligned layouts:
At the simplest end are sites like 99designs.com which simply apply a margin: 0 auto to the body element.
Body -> Header/Content/...
Next along the scale are most other sites, with stackoverflow being a prime example. These sites have some kind of main container, within which the header and the content for example reside
Body -> Container -> Header/Content/...
Further than this are sites which have multiple wrappers. Normally there is a large outer wrapper which consumes the entire page just like body, and within that they have the central container as in the example above.
Body -> Wrapper -> Container -> Header/Content/...
Sometimes columns divs are defined, within which there's a left and a right column. Othertimes people achieve the same left and right column without the need for any surroundnig column or content div.
So my question is, why isn't everyone doing it the most simple way, such as in 99designs. Is it to manage their styling, handle ie6 or what?
Any thoughts?
Because no one design fits everybody's application.
Developers are going to go with what they're comfortable with and what works. If I can get my page done in two days using what I know (and get it to work cross-browser) then I'm not going to waste my time (and my client's money) by trying to do things the 99designs.com way and taking a week.
The reason you may find additional DIVS like wrapper and container and the like has to do with CSS. The CSS box model is powerful, but to achieve certain layouts, sometimes you need additional boxes to work with. It is all highly subjective, and you can't predetermine what divs you will need for a site design until you sit down to build it. There is no one way or right way to use divs in a site design. The more visually complex, often the more complex the markup is. You generally want to keep it as simple as possible...but you can't just keep things absolutely simple just because.