Tag Info

Hot answers tagged

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


12

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


11

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.


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


7

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


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

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


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

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

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.


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


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


3

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


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.


3

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


3

Responsiveness and "appear correctly on smart phones" are completely different tasks. Presumably, responsiveness refers to eliminating--where possible--extra round trips to the server. Error checking, Ajax to retrieve requested data, and dynamic DOM manipulation are the tasks that typically improve responsiveness. The use of JavaScript (or JavaScript ...


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


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

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


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

If you use a <label> tag for the text next to the radio button, it should make that text clickable, even in mobile browsers. <input type="radio" name="gender" id="male" value="male"><label for="male">Male</label><br> <input type="radio" name="gender" id="female" value="female"><label ...


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


2

I don't believe there is a specific check in the Google algorithm for "responsive" sites that gives a bonus or penalty. I have sites that are responsive and sites that are not and (granted, this is apples to oranges) they rank all over the place relative to each other. However, a properly coded responsive site should benefit from reducing other metrics ...


2

The problem here is that you're not setting a relative width for the background. You are positioning it, but not setting the width. You can set the size by using the background-size property like this: .newheader{ background-size:100% 100%; } or to combine with the other background properties: .newheader{ background:url("../img/slide1.jpg") ...


1

Think about it this way: no matter what your screen size or device, your content is the same plus minus a few items that are may not be relevant on certain device types. This is analogous to having content on a screen and printing out that content. You can use separate style sheets for screen and print media. You don't make a separate website just for print ...


1

Go for frontend Use a responsive framework, like twitter bootstrap or similars, create only 1 website for all. Then use media queries to switch css rules where you need if for mobile or not. And defintly switch all you want to show or not in mobile and desktop by server side. For example a huge banner on mobile is useless, switch that using html modules ...



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