I've been researching Responsive Web Design lately. While there are many techniques and practices that fall under the umbrella of "Responsive Web Design", essentially the main pillar of RWD seems to be CSS3 media queries. So, RWD is basically a client side strategy.
But with low-resolution layouts, you often have to simply remove entire sections of HTML. For example, a 3 column layout may need to become a 1 or 2 column layout on lower resolutions, meaning that you're basically hiding entire DIVs at lower resolutions. The problem I see here is that you still need to actually SEND the same amount of HTML code to a low-res device, even though it will never be displayed. In other words, you're sending the same 3-columns worth of HTML to a hi-res screen and a low-res mobile phone, but it's really a complete waste of bandwidth every time you send it to the low-res mobile phone.
Question: Am I correct in my understanding here, or does RWD also incorporate server-side techniques?
For example, suppose you have a skeletal HTML page like:
<div id = "main-content">
<!-- content goes here -->
</div>
And onload (or onresize), the client browser detects the screen resolution and makes an AJAX request that fills in main-content with the appropriate HTML for that resolution.
Are techniques like this that utilize server-side strategies to implement RWD ever used in practice?
In general, responsive development - if done correctly - should not have any redundant or repeated data in the markup. Likewise, content displayed at one screen width will also be displayed at another width, just in a different way.
I love the idea of making an AJAX call based on screen dimensions at page-load, but that's not really the idea of responsive design, and would actually take longer for the page to load (for the visitor).. It would also mean that the page layout wouldn't adapt when the browser window dimensions are changed (for example: switching orientation on a tablet). Unless you propose a new AJAX call at that point, in which case you'll be sending a lot more traffic than a single responsive page-load, and putting more load on your server too.
You pretty much answer your on question...
The time you will need to make a ajax call when the window is resized is much more longer then just give the whole html page once and use css instead.
And the main idea of responsive design is not hide your content. When you hide your content, you got a lot of troubles, like search engines that will show up your content but when a guy visit your website on his tablet the content doesn't show up.
Edit:
Just to make clear when I talk about content, I am talking about what is important on your page stuffs like a "adsense" or other things that doesn't really matter to the visitor should be hide at no problem at all.
About server-side technique there is a bunch out there, one good example is Adaptive Images that send images on lower resolution to lower devices, but you can do that with client side technique too.
Edit2:
I almost forgot that
Not to mention that onresize fires once for every single change in dimensions. In other words, if you go from 1000x1000 to 950x1000, it'll fire 50 times - 50 AJAX calls. #Sébastien Renauld
Why would you hide additional columns on mobile? Removing information is never a good idea, that'll only make visitors dislike the mobile version of your site.
Columns on a web site are usually created with floated html elements. Remove said floats with a media query and voila! The information is now all in one column.
If that one column ends up being far too tall you may want to consider adding toggles for showing/hiding the information, but that's as far as I'd go about removing content for mobile sites.
http://css-tricks.com/make-client-side-data-available-server-side/
In this article Chris Coyier talks about using clientside methods to check the current width of the screen, then save it to a cookie for use server side - then refresh the page. I don't entirely approve of the method, but perhaps it could be useful to you.
You may want to look into JavaScript feature detection or even UA sniffing, though its frowned upon.
You don't have to remove/hide columns in lower resolutions. The trick would be to stack then underneath each other in low res, then align them in columns in higher res. For example:
<div class="one">Column One</div>
<div class="two">Column Two</div>
<div class="three">Column Three</div>
.one, .two, .three {
blah blah blah, whatever needs to be here.
}
then add CSS:
#media only screen and (min-width: 600px) {
float: left; /* screens larger than 600px wide will throw them into columns via float*/
}
Related
Currently my website is setup where the full image that is in it is loaded then automatically sized to fit the screen. This is done by setting image width to 100% in CSS. While it does work nicely, It doesn't seem to follow standards because I don't specify width and height in the image tag itself.
My idea now is to create multiple versions of the same webpage, where the only difference is the size of the image. Each image would have its own filename (like image1small.jpg, image1medium.jpg etc).
The problem is most people want to see the bigger picture right away but this doesn't go well with people with small screens since they have to scroll horizontally to see the whole thing.
I was thinking putting javascript at the top that redirects users who don't meet screen criteria to the page with the better sized image. Something like this:
<html>
<head>
<script>
if (screen.width < nnn){window.location.href="smallerpicture.htm";}
</script>
</head>
<body>
<p>some random text</p>
<img src="image.jpg" width=nnn height=yyy>
</body>
</html>
The thing is a page redirect will occur for people who do not meet the screen resolution requirements for the page. I'm not sure if this can qualify as a sneaky redirect to google.
Is this a good practice to use the code like I showed above to redirect users with incompatible screen size to the correct page? or should I take a different approach to display the correct sized image to the user?
And regardless of the answer anyone gives, I feel I need to specify the width and height attribute for the image tag and I want to stick to the HTML 4.01 strict standard so that the page will work for everyone.
The first draft of the HTML 5 standard was designed to work for everyone - it basically documented "what browsers actually do", rather than what browsers were supposed to do.
The rationale behind specifying the width and height attributes is that it reserves the space on the page even before the image loads, preventing the need to re-flow the content when the image loads.
Choosing to specify the attributes, but then redirecting the page, will cause a worse re-render than using the % width without the attributes. So I think your concern is unfounded as your medicine is worse than the illness.
The desire to server different image sizes is one of the use cases for responsive images, so you can take a look at that as an option rather than reloading the page. There are several fallbacks that give you wide-ranging browser support.
I'm building a mobile site for a great magazine with a lot of content that is partly heavily. The problem now is that I have to hide the entire right column on the mobile site (yes, I need it in this case).
I've done a great research on mobile design, read a lot of articles, but can't find a solution that addresses this problem. It's usual to hide the right column with CSS or JS. But then everything still loaded. In this case the right column is so big, with a lot of content, it seems worthwhile to not load it for the page to load faster.
What should I do?
You should be able to detect the user's browser on the backend (I assume you're using PHP) and then make a simple control structure where you decide whether to load or not load that right-hand column on your site.
Here are some libraries that you may find useful (obviously you shouldn't have to reinvent the wheel for such a trivial task):
http://mobiledetect.net/
https://github.com/serbanghita/Mobile-Detect
http://detectmobilebrowsers.com/ (uses regex)
If you think that it is not a problem that mobile users wont be able to see that content, then you should not load it. There are php classes to check for mobile devices and based on that you can decide to not load some part of content. There is one problem - php class can only base on user agent settings, not browser size, so in theory someone with high resolution mobile device wont be able to see that content anyway.
One more idea on my mind - you can not load content in php, but after general content is loaded, check in js viewport width and eventually load part of content by ajax if there is enough place.
In summary, as we dont know your site content, it is up to you to decide if you can afford to not show part of content at all (for mobile devices). In this case when resolution change, users still wont be able to see it (i.e. changing device position horizontal to vertical). Of course in this case page will load faster, which also migh be crucial for mobile internet connections.
I made the download of several free responsive layout (you can find them simply through google if you're curious) and I see that the layout has at least one or two javascript files.
The question is: javascript is essential to create a responsive layout?
Then, in the reply to this question is "no" and you have also the possibility to link a free responsive layout made only with html and css, well, you will receive a wonderfull BIG thank you.
The whole point of responsive layouts is that it can (and should) be done with CSS3 media queries only.
However, this can often require some clever HTML design, especially if you want to have a slide-in menu (hint: :active can be very powerful when combined with tabindex to make an otherwise "inert" element respond to click events like a link) and many developers just can't be bothered with that, especially when jQuery is so readily available.
So basically, yes, you can make a responsive layout with CSS only. And if you succeed, congratulations! JavaScript can be used to make things easier, but in general if you think you need it, you probably just need to rethink how you're doing things.
Unfortunately, I have no links to JavaScript-less responsive layouts for you, that's because I'm very DIM - Doin' It Meself!
Edit back While I appreciate Martijn's demonstration of a use of JavaScript in making images essentially have variable resolution depending on screen size, images can be made responsive simply by using SVG if possible. If this is not an option, consider using a container with a background-image - only the image that matches the media query will be loaded :)
Sometimes yes, sometimes no.
First understand what is response layout: Responsive Layout is the one that dynamically changes itself. Depending on the Browser's screen size. So that it fits perfectly on every screen type, size, resolution etc. So that the website's layout doesn't break.
You can just use CSS3 media query to change the layout, or else you can use jQuery or some other JavaScript to make this happen.
But remember, JavaScript is not required to make the document Responsive.
Sometimes Yes!
Sometimes the developer is better in writing the code using JavaScript, such as jQuery API. So he would find it easy to write the code in jQuery to dynamically handle all the events in the Browser window to make a website Responsive.
I myself would find it pretty easy to write the code in jQuery as compared to CSS. So for that purpose, I would have to add the jQuery source file to the document to render it that way. Otherwise I won't be able to create the responsiveness in the Website or would have to stick to the pure JavaScript
Example would be:
if($(window).width() > '1300') {
$('body').css({
'height': '100%' /* etc */
});
}
Sometimes No!
Some developers are good at CSS (CSS3, and its media Queries too). So they try using CSS3 to render the document and make it responsive.
CSS3 is really much easy than jQuery and it would be helpfull to use it. It would also won't require any of the Script file to be included. You can easily write the code, in the default CSS file. And the changes would be made accordingly.
#media only screen and (max-width: 1300px) {
body {
height: 100%;
}
}
But Remember
If you use plain CSS and then use CSS3 Media Queries to change the layout of the website, you will be able to just detect the screen size and other elements. You won't be able to check for the Browser's properties or the content on the screen etc.
Both answers are acceptable.
No, if you pretend to work with something like a flash site, which I hardly discourage it.
Yes, because javascript is essential to do that, CSS3/HTML5 are solutions to your case, but, they come with some javascript included functions, that you will not see, so, there is javascript.
Responsive by Default
No, you do not need JavaScript for Responsive Webdesign. It is necessary for those cool fly outs and sliding effects.
If you do a website in pure CSS, you might need to take some compromises like a different menu layout or always visible sidebar content. Sliders are a problem.
But consider this:
If you think about it, responsive layout is not a new thing. Open a simple HTML file in a web browser, and the content automatically adapts to fit the width of that browser. The web is responsive on its own—by default. It's us that's been breaking it all these years by placing content in fixed-width containers.
Andy Hume in "Responsive by Default",
http://blog.andyhume.net/responsive-by-default/
Media queries allows you, to do responsive pages with css only. But you should remember about jquery function '.resize()' when user change horizontal layout to vertical on phone or tablet.
The short question:
I have a simple monitor and a projector, both should show the same browser window with the same page loaded, but with some different content for each of them. Is there any way to achive this with css or js (or maybe with a specific browser extension)?
Longer explanation:
I want to build a little presentation plugin with js and css, and the biggest presentation programs all have a timer on the screen, but not on the projector. This feature is something I want to realise. Notes or something like that could also be added, but all that requires different content on different screens/projectors, so I need a solution for that. For this even a browser extension would be useful because I only want the plugin for myself.
So, do you have any suggestions?
You can specify different media. Like this:
#media projection{
//projection css
}
#media screen{
//screen css
}
Then, obviously, the projection ones will apply to projection media, like slides, projectors, etc, and the screen stuff will only apply to a computer screen. Now, you may want to toy around with the projection css, as I've never actually tested it. But you could easily get away with just using the screen stuff to set certain stuff to display:block;, while it is display:none; otherwise.
I guess you can use media queries for that in CSS3.
See thinkvitamin.com for example, resize your window and see how it is arranging the UI according to the screen size.
You can also hide or show divs at a particular screen resolution, but I think that this will work only in CSS3.
I have a legacy web application that was written long before there were even mobile browsers, never mind responsive design. As such, everything is static.
I can't modify all aspects of the site's pages. For example, I cannot change that the main container is set to 900px with auto margins. But through other server-side output classes, I can modify bits here and there. For example, one class builds a <div> element with other nested markup, and I can add inline styles and attributes to any of this markup. I can also modify the header include to a certain degree. So what I'm wondering about options:
Right now, the whole page fits in the mobile viewport, making text tiny. Can I instead zoom in for mobile? I don't mind if you can't see all the content but at least fonts are at a readable size. Is there some CSS or a meta tag that I can use to zoom by default? (desktop browsers must remain the same as they have always been, though)
If I have an iframe within a page that is, say, 320px wide, is there a way that will allow me to automagically focus of that iframe on page load so that it fills the width of my mobile viewport?
plain JavaScript is an option (no external libraries like jQuery); if this can't be done with a tag or with styles, is there a JavaScript method I could employ?
I apologize for lack of sample code... I've certainly tried a few different things with CSS properties, but no matter what I'm always viewing the zoomed out full-page version.
To make sure your fonts are readable you could use a font-size per percentages instead of pixels if thats what you are using.
View this article about adaptive design for mobile if this helps :
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries