17

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

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


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


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

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


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

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

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

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

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

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

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

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

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 to interact with, ...


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


3

My own tests on noscript using firebug's net tab don't actually load any image contained within the noscript tags unless javascript is off. Likewise, the first poster here has no such problems and points to the w3 specification saying that such tags will be treated as text when js is on. https://stackoverflow.com/questions/14719111/is-an-image-within-a-...


3

You should split your CSS files based on media queries because CSS files are render blocking. When the browser is constructing your DOM, it has to first wait and load all your CSS files. You will reduce your page load time if some of your CSS files are only loaded based on certain media queries. This also goes for adding async to a JavaScript script tag; ...


3

Responsive design is a website design that responds Responsive Design is used to describe a design which responds and adapts to the users resolution or device used. This can be setup in various and the widely common accepted method is by using the meta name viewport combined with css media queries. Horizontal vs vertical design Using media queries you can ...


3

Before your question was clarified, you had said that you had a responsive site. Here is how you would use responsive CSS to change the image based on browser size: @media screen and (max-width:480px) { #myimage { background:url('/smaller-image.png'); } } @media screen and (min-width:481px) { #myimage { background:url('/bigger-...


3

I enclose the video iframe in a div. <div class=youtube-container> <iframe src="https://www.youtube.com/embed/MRk5HynHe44" frameborder="0" allowfullscreen></iframe> </div> I use some CSS to make that div responsive such that it is wide as it can be, and always maintains the 16:9 aspect ratio. Then I use CSS to make the ...


3

You should refer to google documentation on how to modify responsive ad code If you want to only show ads for certain screen sizes you can use CSS to accomplish this. The following example shows you how to modify your ad code to use CSS3 media queries to hide ads for specific screen sizes: <style type="text/css"> .adslot_1 { display:inline-block; ...


3

I'd suggest minimizing the amount of duplicate links. If this is not possible, then consider using different labeling for each link. For example, have the business logo at the top of your site as a link to the home page, and at the very bottom of the page, have a text link to the home page. Also, you will want to configure your page so that code that isn'...


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