21

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 ...


16

I think it really depends on what you find easiest for development and what helps you keep a tidy stylesheet. The only real downside I can think of in splitting would be that should an element's attribute appear in all your stylesheets, you would have to update 5 separate files to change it (rather than it appearing side-by-side in one place). According ...


13

Sure. Obviously, it would be better to use CSS alone but if you can't, use what you have. Do as much as you can with CSS and use JS as needed. Not sure why you can't change the existing CSS but you can add a style sheet with JS. (function() { //create a new element var newStyle = document.createElement("link"); //set the required attribute for a ...


12

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 ...


12

No. Google currently doesn't differentiate sites like that. You may see indirect effects (smartphone users liking your responsive site and recommending it to others), but we don't use that as a ranking factor. We are starting to use common configuration errors to adjust the rankings in smartphone search results though.


11

Search engines index pages by URL, and duplicate content is content that's found at more than one URL - see this for more: What is Duplicate Content? Search engines would only penalize content appearing more than once on the same page if it appears to be spammy or an attempt at keyword stuffing. Incorporating different menus and layout structures would not ...


10

Google expects differences between mobile and desktop sites. Even major differences, including differences in link structure, are not a problem. Google crawls the web with different Googlebot user agents for mobile. As long as your server shows that version of Googlebot the same thing that your actual mobile users see, you don't have any penalty risk. ...


9

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 ...


8

It probably will. I made my site responsive (using the same URL's, just different design) and I saw the number of incoming visits from Google on mobile devices rise by about 20%. Edit: seeing JohnMu's answer, this must have been because of the speed boost the new layout gave the site. Edit 2: It will be a ranking signal starting April 21st. http://...


7

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 ...


7

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


6

Google says: By default, the event hit sent by _trackEvent() is considered an interaction hit, which means that it is included in bounce rate calculations. So if someone triggers one of your events, it is then not considered a bounce. You can get around this by adding an opt_noninteraction parameter to your _trackEvent()


5

The iPad3 will almost certainly report its pixel width to be the same as previous iPads. When the iPhone added the retina display, it still heeded CSS for viewports under 480 pixels and so responsive design was unchanged.


5

No. Google does not even prioritise mobile sites on its mobile search. Just search for some big sites like Facebook or Wikipedia - it shows their regular sites, not mobile sites. That's not to say it won't change in the future. Furthermore, don't forget the user experience: if your site doesn't work well on mobile, users may go elsewhere.


5

If the PC and tablet are on the same network, it is possible. All you'd need to do is use the IP address of the PC to access the site. So instead of accessing it via localhost (as you would on the PC), you'd access it via 192.168.1.2 (example). If the devices are not on the same network, it's still possible to access the PC with the tablet if you setup ...


4

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 ways like ...


4

When you test your server perf in Page Speed Insights, if you're testing a responsive page, the result shows 2 different pages: for your computer view and for your mobile view. So, I guess that it will probably increase your PageRank, like this article says.


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

I would say try using media queries first. One method I found easier when dealing with a design that was originally only for desktop was this: Start with two separate stylesheets. One for the new responsive design, and the other for the old desktop version: <link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css"> <link ...


4

If a block of content is hidden with CSS, the browser still needs to download the HTML inside that element. All browsers except Opera download the images, too. (In fact, since Opera has switched to Webkit it likely downloads hidden images now.) One of the best ways to reduce load in mobile browsers is to use background images in CSS (e.g. sprites) where ...


4

It slightly depends on what you want to achieve: are you trying to make your page load faster or are you trying to make developing easier? If you target on the latter, than you could use multiple sheets, but thats all a matter of preference. I find it the easiest to use one big file since this gives you an overview of all the styles you've declared. If you ...


4

Its probably best to have only one CSS file, but to minify and gzip it. Assuming your 30KB are before doing that, you will probably get the file size down to about 5KB with minification (white space removal) and gzipping. Splitting up will probably get you some more speedup, but only under some conditions. You'd have to make sure that only one stylesheet ...


4

Reading the documentation of .flex-video and .responsive-embed classes does not help to distinguish the difference between them. And testing them is not helpful either as we get, obviously, the same visual results. This means one of the very objective ways -and maybe the only objective way- to answer your question is to check the code source of the ...


3

Google have a separate mobile crawler (Googlebot-Mobile) in addition to the regular Googlebot. Googlebot-Mobile will look at content that is intended both for "feature" or "dumb" phones (e.g., WAP, etc.) and smartphones (see announcement here). If you're serving different content based on user-agent detection, either by redirecting to a separate site (m....


3

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 ...


3

It looks like Google now has "Responsive Ad Units" to fit in with responsive designs. You can read more about this at: https://support.google.com/adsense/answer/3213689


3

I worked on a site that used that method, and I had problems with screen rotation on mobile devices. Since JavaScript will only detect once on page load, if the user rotates the device it won't expand to the full width the way it will with media queries. It was easier for me at the time just to switch to CSS, but perhaps a JS expert would know if there's a ...


3

Responsive design actually improves your SEO for several reasons mostly because of the in bound links help all versions of the page. Google even highly recommends Responsive Design and Content We recommend using responsive web design because it has many good aspects: Using a single URL for a piece of content makes it easier for your users ...


3

If you're actually serving different content, what you're doing is adaptive rather than (or as well as) responsive. If it's purely responsive, the content sent from the server is always the same, but shown differently or not shown at all to users (and so, incidentally, will not confer any benefits for page load time). A fuller explanation of the differences ...


3

Using multiple H1 tags is valid in HTML 5, as long as each is inside a <section> element (except for the first H1 on the page which does not need a specific wrapper). For SEO, Google has confirmed that multiple H1 tags are fine. However, you ought to take another look at your responsive layout, as requiring an H1 in two different places seems strange ...


Only top voted, non community-wiki answers of a minimum length are eligible