I coded a small website written in php, with a fixed 869px width to display properly in every screen. I also would like to integrate it to other pages with different width, which is sometimes wider then the original size.
I tried some solutions, but none of them seems to working cross-browser or does not scale the content within the wrapper. I am also trying with the viewport property but I had no success.
I am looking for some cross-browser jquery script that uses the zoom effect of the browser to fit the content to the browsing area. I have a div in the body called wrapper, and I would like to scale it and the content in it, like I do it with the CTRL + keys in the browser.
You can use Bootstrap to scale your content (http://twitter.github.com/bootstrap/). If you want to adjust the font size as well you can build with LESS or use plain javascript (e.g. using JQuery).
You can wrap your page into a
<div class="container-fluid">
</div>
that scales automatically on various standard resolutions. You can adjust the width by overriding the bootstrap.min.css. A guide on how to enable responsive features can be found here: http://twitter.github.com/bootstrap/scaffolding.html#responsive
You can add row-fluid class divs and use span classes to align your content. More information on how to use the grid system: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
For LESS I can recommend their homepage: http://lesscss.org/
And this is an older StackOverflow post that illustrates how to insert variables from JavaScript: variable manipulation in Less
Maybe using LESS is already enough for your needs.
Related
As in topic title, I'm working on some project but my CSS works great in Mozilla but in Opera dimensions in px are different.I was trying to fix that using percent dimensions but other issues appears.It's some kind of Opera problem as it recognise CSS code in other way because when inspecting an element, it returns totally different px dimensions of div's and borders for example.My idea to avoid it is to create separate CSS files for specific browsers and choose correct one after checking user agent?Maybe exists shorter way to solve this problem?I need my website displayed correctly in Mozilla,Opera,Chrome.
While possible, loading a different CSS based on detected browser is not generally considered best practice and defeats the purpose of CSS. Before you take that decision:
consider writing cross-browser compatible CSS:
use em or rem instead of px as a font-size unit;
add browser specific prefixes to properties that require it for added compatibility;
use Can I Use when in doubt - it's a great tool;
check out browser specific selectors
As a personal note, I have tried this method myself and quickly fell behind updating all required CSS files. I ended up merging them in a single file about one year later and that change alone was harder than expected.
I'm looking for a solution to dynamically swap out markup. I'm familiar with solutions that conditionally load and swap stylesheets, scripts, images, or blocks of HTML markup such as responsive.js, interchange.js in Foundation 5, yepnope ... tons others I'm sure.
I have a website that has a ton of content that needs to be completely replaced with a mobile version of the markup. I can definitely not load styles and scripts below the browser width in mind, but I'm looking for a good way to swap out most markup out of the DOM once it gets below that width as well. If the changes weren't so significantly different between the two versions I could just do some hacky workaround but I definitely don't want all these resources loading on a phone and don't want to just redirect to a mobile URL if browser width is below width.
Anyone know of a good way to do this?
Im currently building a practice responsive website, what I am doing is taking an exising website, building it up using twitter bootsrap js and css, meaning it will be fully responsive for mobile.
The issue is that there are some large carousels and images on the site. Ideally I would like to just completely remove certain elements, like a carousel for instance, and instead have the options within the carousel as a standard list menu.
It seems the main option is display:none based on media queries, but I am starting to foresee that I will run into big problems for loading time if the entire desktop site is still going to be loaded on the mobile, only elements hidden.
Are there ways to completely exclude html based on browser size? If anyone has any good links or articles that would be great. Or even just opinions, on whether there is actually need to exclude html or not.
Thank you
First off it is really good to see that although you're talking about display:none; you actually still want to display the content without the bells and whistles of the image. Well done you.
The next thing I would look at is if you don't want to load images for a mobile then why are you adding it for the larger sites. If the image isn't providing a function, assisting in explaining the content better, then why not just drop it for the desktop size as well?
If in fact it does help tell a story then you can include the images and some of the popular image services like adaptive images, hiSRC, or PictureFill which will serve the mobile version of the image first and replace with a larger image at higher viewports (but remember, there's no bandwidth test).
Finally, if you do want to serve some different content, then take the advice of fire around including more content with ajax. The South Street toolbox from Filament group can help you out, pay particular attention to the AjaxInclude pattern (it also has a link to the picturefill).
You could consider storing heavy data JSON-encoded, and then creating elements and loading them on demand like so
var heavyImage = new Image();
heavyImage.src=imageList[id];
Then you can append image element to a desired block. From my experience with mobiles this is more robust than requesting <img> via AJAX, since AJAX could be pretty slow sometimes.
You may also 'prefetch' images with this method (like 2-3 adjacent to visible at the moment), thus improving UX.
You could pull in the heavy elements via AJAX so they wouldn't sit on the page initially, making it load faster. You could decide to do the AJAX call only if the screen size is larger than X.
If you want you can use visibility:hidden, or if you use jQuery you can use
$(element).remove() //to remove completely
$(element).hide() //to hide
$(element).fadeOut(1) //to fadeout
I run and actively develop a forum (which in itself runs on heavily modified SMF 1.1.16) - one feature I would like to add is the ability for the user to pick custom colours (say 2-4) from a widget in the corner of the page to customize the colours of the forum.
The HTML output of the forum is structured such that modifying the colours can be done with pure CSS, and I'm wondering what the right way to insert this CSS is.
The idea I had was that once the user saves their colour information, a piece of javascript would generate the necessary CSS and save it using HTML5 localStorage (probably using a polyfill library). Then, on $(document).ready(), we check for this CSS being present and if it is, we inject it into the page head.
Is this approach sensible? It's easy to develop, but will it result in a flicker of the usual styling (given that pages are rather heavyweight) before custom styling is applied?
If so, is there a better way to do this completely client-side? I would rather not involve the server if at all possible, but if I must I can just have the server generate CSS files for every user who saves custom styling.
What's the best approach?
I suggest you have a base style for the page first so that there won't be FOUC. Then, have your JS load the custom styles, parse it, and apply it to the page afterwards. You could do a "fade-in change" (like fade in the background etc) so the styles won't load like a snap.
You could also blank the page first, like set the body to display:none, before you load the styles, then after the styles are applied, remove the display:none
You also have to note that local storage has it's size limit. Don't load too much. Consider looking for the LZW compression in JS. It might help.
I'm currently working on a new site. I'm just a few pages deep and they all use <img>s. I was thinking about it and decided to look into using a sprite sheet for all of the button images and such and then just using CSS to render the appropriate images. I wanted to see what everyone thought about this. Is it worth the effort? How does it affect SEO, specifically ALTs for <img>s. Is there anything else that I should be aware of?
Thanks in advance!
In my opinion, images which are part of content should use image tags, and everything else can use background images/CSS sprites.
By including a normal image tag with an alt attribute, you will make the image available for things like google image search. But, this is not a factor I weigh very heavily.
The important part is that if someone looks at your site with a screen reader or simply views the HTML, the content will be successfully conveyed with an image tag and alt attribute. If you use divs with CSS you will lose this effect, and some people might miss the content.
But, when it comes to non repeating background images, buttons, and other style oriented images, I do recommend using CSS Sprites to improve performance.
While putting the other images in real image tags should preform slightly worse, this can be very minimal if you set the caching headers properly on the images.
Edit:
A quick search found this:
http://www.google.com/support/forum/p/Webmasters/thread?tid=75fa18ce5e671f5b&hl=en
Which seems to mitigate the Alt attribute by placing text in the div and then using sprites to hide the text:
The approach Google uses, relevant text inside link, visible for crawlers, people who have images turned off, screen readers, etc.
<a href="..." style="position:relative; display:block; overflow:hidden; width:100px; height:100px">
relevant text here
<span style="position:absolute; top:0px; left:0px; width:100px; height:100px; background-image:url('sprite.jpg'); background-position:0px; -100px;"></span>
</a>
If performance is likely to be an issue it might be worth going that route but I do prefer the more semantic img tags if they are part of the content.
Sprites are definitely worth the effort. They save load time, increase response, and also take advantage of caching, which can all combine to dramatically decrease load time.
Alts can still be applied as usual.
SEO wise, there should be no negative effects. You're not applying any exotic methods (read: flash) that will block the crawlers, everything maintains W3 standards, so all should be fine. Be sure to run it through the W3 validator to ensure everything else is kosher.
If Google's doing it, it's gotta be good, right?