Hot answers tagged responsive-webdesign
18
Mobile internet use is widely predicted to exceed desktop usage within a couple of years from now, so some sort of mobile optimisation should be a serious consideration for any business.
In many ways, this is especially true for small, localised businesses: predictably enough, a lot of mobile searches tend to be focused on finding things nearby - think of ...
9
The idea behind is to give an optimal browsing experience to your visitor regardless of the device. As the number of your visitors that use a mobile device will almost likely increase instead of decrease it makes totally sense to go that route.
There's a number affordable (not to say cheap) themes out there for Blogs and CMS you can immediately try out and ...
8
As defined by Ethan Marcotte in ALA 306, the term "responsive design" refers to the technique of applying differing style rules to your HTML depending on user screen size. For more explanation of responsive design, here's a nice deck by Mike Bollinger.
In this model, you send the exact same HTML to the client whether the screen is small or large. However, ...
7
The width and height attributes of the img element are not required under any DOCTYPE, if that is what were implying. There is no difference between Strict, Transitional and HTML5 in this respect.
As you suggest, these attributes were only 'required' to reserve the space on the page and prevent the page moving around as it loads - which is important. This ...
6
This may not a “stat”, but take a look at Twitter Bootstrap that is starting to be used a lot.
https://github.com/twitter/bootstrap/blob/master/less/responsive.less
In short:
<= 767px
768px – 979px
980px – 1199px
>= 1200px
4
I guess this depends on the design, which might differ each build. It also depends if your using 100% fluid or changing on breakpoints.
I tend to use some of the following, generally the large sizes don't change much at all between breakpoints:
@media screen and (min-width:320px){} // mobile portrait
@media screen and (min-width:480px){} // mobile ...
4
First of all, there's a 3rd option. You can serve a dedicated mobile site on separate URLs, e.g., m.example.com, or you can take an adaptive approach whereby mobile specific content is delivered on the same URLs as your "desktop" site.
Which option is best for users?
From a design and architecture point of view, which is best depends a lot on what your ...
4
This is a fairly standard feature, at least among the well-known options. (To the point that they generally don't bother making too much mention of it.) It doesn't seem like it'd be hard to find one unless you're looking for something more. Anyway:
Shadowbox, with the handleOversize argument
fancyBox, with the fitToView argument
Colorbox takes a different ...
3
A lot of this comes down to the advertising contracts you're using on the site. I've not really looked into GoogleAds (for example) so can't comment on that, but I've worked on a number of sites where they've used ad delivery systems that they've controlled the rate cards for.
Typically the RHS ads would be sold at a lower rate than the "in-body" adverts, ...
3
A quick Google search turns up this: Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and more and css3-mediaqueries-js.
2
My approach has been to stick with the 960/Blueprint designs with a generous gutter on each side. For example, using a 16 size grid, I don't use 1 and 16 for anything. I also prefer a magazine style homepage with a feature slider and single column content pages with a small menu at the top and additional stuff at the bottom (tags, etc). This works well for ...
2
You can use Google Chrome developer tools to benchmark the browser rendering (paint and reflows) along with the javascript calls and how they effect them. I'm sure there are other sophisticated tools but this is the most handy and accessible for me.
Great videos/tutorials on this topic:
...
2
Responsive Design Lets You Host Content All Under One Roof
Responsive allows you to host the same content for multiple platforms all on one page rather than multiple pages this has awesome SEO value purely because your back link gains from desktop platforms will boost the mobile pages and vice versa without leaking due to unnecessary extra pages which could ...
1
I dont think you could use it the horzontal leader boards in a responsive design, the two ways i could think of incorporating it would be to
a. use sky scrapers and mpu ads that would sit in a side bar and then come in to be part of the responsive design.
OR
b. detect that the viewing device is a tablet / phone and run mobile ads accordingly (keeping ...
1
But I have the feeling this is not ideal SEO-wise.
Yep, I wouldn't do it.
Even worse, it's bad for your users that rely on your document outline (screenreader, …) or your users that don't use CSS (text browsers, feed readers, …).
Is there another recommended solution? Best practice?
Use CSS.
Using the "classical" float or position or newer ...
1
Rows hold all data in one heap. Also, you can threat row as 100% width column if you wish to.
Also, because of row, you can do CSS magic with :first-child selector for instance. You have to use it if you have, let's say, 4 columns, every 25% wide, but you want only 3 margins (between 1st and 2nd, 2nd and 3rd, 3rd and 4th column). Notice that you DON'T want ...
1
Responsive web design is critical - if you're creating a new site you MUST make your site responsive. Already, 50% of traffic is from mobile devices and tablets and not only is this going to grow, it's going to be come the clearly dominant form of internet use.
For small businesses that target small geographical areas, it is even more critical - SEO is ...
1
I skimmed the other answers, forgive me if i'm redundant... I am doing responsive design every day for 8+hrs a day at this point... My clients want it because they want mobile users to have a 'unique' experience, my employers want it because it is boasted by Google as the preferred method and streamlines well. (and if boasted by Google as the way to do ...
1
I think it's important to first realize that "responsive design" (RD) is a buzz-term (if I put Width:100% to an element I have a RD right there, to exaggerate) and therefor its importance appear more important than it really is as in the end it's conditional as everything else.
Is it necessary to implement RD?
To answer that you will need to state some ...
1
I haven't seen a benchmark on this (I'd be curious if there was), but I would imagine the effect is effectively zero.
The browser does all it's calculations when the page loads. So whether you tell the browser font-size: 0.8em; or font-size: 10px; or font-size: 80%; shouldn't make enough of a difference to be noticeable by any user and should load just as ...
1
Googlebot doesn't have a "viewport size." It's going to see whatever your default layout is.
Assuming you're set up with Webmaster Tools, try out the "fetch as Googlebot" feature. There are some third party tools that try to approximate this(search for something like "view as googlebot"), but this is obviously the official reference tool, so you might as ...
1
I think a lot of companies will take a long time to update their sites, hell, there are still some out there using tables. Responsive, and the mobile first approach, are definitely the buzzwords of the moment.
As the above poster mentioned, you should be using lo-res images for your mobile phone/lower resolution devices. Media queries will help you target ...
1
Responsive design shouldn't download the same amount of data on every device since not all devices have the same multimedia requirements. Mobile sites should use lo-res images and be less graphical in nature than sites for desktops/laptops/tablets. And if you want to combine your mobile and regular sites, then you need to take this into account, otherwise ...
Only top voted, non community-wiki answers of a minimum length are eligible
