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.


11

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


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

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

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

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


7

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


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

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

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.


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

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


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


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

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

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


3

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


3

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


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



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