Welcome to WebmasterWorld Guest from 54.82.93.116

Forum Moderators: not2easy

Message Too Old, No Replies

10 Top Tips for Responsive Design

DIY Help for Mobile Friendly HTML

     
11:54 pm on Sep 5, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4059
votes: 251


If your site is not ranking as you feel it should, based on its content, age and value, it could be time to think about making your site more device friendly. It seems that there is new importance being placed on sites that conform functionally across the spectrum of desktop, mobile, laptop and tablet regardless of the platform.

Maybe you have a small business site or an informational site and can't budget a major redesign but you want to regain visibility and traffic. This article has some basic ideas and suggestions for the site owner who wants to know what they can do on their own. It is primarily useful for static or dynamic (php) html/template sites since WordPress has integrated responsive design in its free templates. This article supposes that you edit your own pages and css or could do so. Note - this requires the use of a viewport tag in a page's header which I'll bring up further along.

1. Leverage the default font size. Start to rethink the way you think of pixels because devices use device specific css pixels and a font-size of 14px in your css is not at all the same across devices. The best piece of information I picked up in looking for ways to do this as simple as possible is quite basic. Every browser has a default font size and 16px is the default if it hasn't been individually tweaked by the user. Leave the font-size out of your css except to set it in the body settings to be 75% or 76% or 74%, to accomplish the font-size your site is accustomed to using and it will appear the same as ever and be translated to the corresponding size automatically in mobile or table or desktop browsers. 75% of 16px is 12px so it is exactly the same appearance as a 12px font setting. If you need a larger or smaller font size, specifically for an element, set it as font-size: large; or font-size: x-large; or font-size: small; in the css. If you have been using Microsoft font sizes such as 2 or 3, time to undo that and join the rest of the world. Read more here: [developers.google.com...]

2. Switch your document type to html5, for simplicity and added features you will get better performance. At the top of each page insert your doctype declaration:
<!DOCTYPE html>

<html lang="en">
(or your page's language tag)
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
(here's that viewport tag)
<meta charset="utf-8">
(recommended character set for better usability on mobile devices that do not support all charsets)

3. Might as well cover that viewport thing here:
<meta name=viewport content="width=device-width, initial-scale=1">

The viewport tag is a metatag that tells the browser of the device to scale everything to it's own defaults. This is a very basic description, to learn more about its variables read: [developers.google.com...]
Without a viewport setting your site is not considered by search engines to be device responsive in its design, even if "it works fine" on mobile devices.

4. If you have javascripts in the header, two things: change them to external .js files and insert the script tags just before the closing </body> tag on your page. Wherever possible, use compressed (or minified) versions with extraneous whitespace removed. Javascripts in the head are are considered as render-blocking elements. There are apps for that:

5. Split up your css file into two parts:
a. essential to rendering the page layout
b. color, design, image, specific elements
The (a) file link goes into the header as always but it is limited to a few specific elements such as body, img, <h#> colors - the things required to render your page in the layout you use.
The (b) file link goes after the footer though as some point soon, browsers are expected to universally accept media imports and the css file is considered "media" in that respect.
Use compressed (or minified) versions with extraneous whitespace removed. More information here: [developers.google.com...]

6. Image optimization would be a complete article itself, I just add these few points as things that are important to responsive design. Let your images resize. Control the image size by setting the % width of its container. In css the image element should have this setting:
img,
embed,
object,
video
{
max-width: 100%;
}

..and it will resize to fit the downsized elements automatically. If you are using things like
 width="nn"
in your image links, please don't use that kind of markup, it is long deprecated.
Control the size of image files you use. (Not talking about art/photography sites here) Wherever possible use a size large enough for desktop and nothing larger. Optimize your images for the web. The dpi settings you see are print resolution settings, convert those to 72 dpi for most common image types. Use 8 bit color if you can or 16 bit, but you don't need 64 bit color depth for most website viewing. Read more here: [developers.google.com...]

7. Avoid inline styling. If you have been using style elements in your html, it is something you need to learn to replace, because inline CSS on HTML elements is blocked by default with Content Security Policy implementation that is about to make it stop working. Read about CSP here: [w3.org...]

8. Remember that the smaller screen size means users of mobile devices won't appreciate scrolling through several screens of text that may look fine on a desktop. There are more advanced ways to make their view different, but this is about the basic and simple things anyone can do, so we want to see what we have at the top of the page that could go below the main content and still work fine. Banners in the header won't be appreciated, time to take another look at the above the fold content. and organize the content by its importance to the visitor

9. Convert your css elements that are set in pixels to use ems instead. The em measures using the browser's defaults (as long as that's what you use) so you can change a 2px; border width to .2em and it will look the same although technically it is not the same as 2px. Ems are a relative measurement, the default body font size is what you use to calculate ems, so 75% font-size = 12px = 1em. Don't let your pages go to full screen width, it looks pretty bad on a 27" monitor and is difficult to read, so set a reasonable width and use a container div to limit the body width. I stick to 1026px, just because that is what I was using before making these changes. Once you have a container, you can use percentages for your width and everything resizes down or up without scrollbars. If you have used the image settings shown above, your background and foreground images will resize to look the same on a desktop or smartphone screen without using pinch or zoom.

10. Keep in mind that mobile devices do not have link hover states. Rather than clicking a link, there is a "tap and hold" (on some devices) that can reveal link destination much as "hover" would for desktops. A second tap would be the same as a desktop click. Think about a background color change that will look OK with the normal state of a link rather than just a font-color change. Space links so that there is at least .8em space above and below your vertical nav links so that even a fat finger only clicks what they meant to click. I set <li> elements to a 260% line height but this can be handled a number of ways. Tap target size can be particularly tricky on dropdown menus that don't work right without javascript enabled. Look for other ways to present content that are more user friendly. A quote from the Google developers [developers.google.com...] site gives these tips regarding tap targets:
Small or tightly packed links or buttons are more difficult for users to accurately press on a touchscreen than with a traditional mouse cursor. To prevent users from being frustrated by accidentally hitting the wrong ones, tap targets should be made sufficiently large and far from other tap targets that a user can press them without their finger pad overlapping any other tap targets. The average adult finger pad size is about 10mm wide (a bit less than half an inch), and the Android UI guidelines recommend a minimum tap target size of roughly 7mm, or 48 CSS pixels on a site with a properly-set mobile viewport.
The Android developers have more at [developer.android.com...]

There is much more, but these are the basics. The rest is found when you start looking around to find more information from the links I've included here. I'm hoping that others can share their ideas on this to help the small site defend their viability when they don't have access to specialized development tools or expertise.
12:55 am on Sept 6, 2014 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 890


I have been doing this to hundreds of web pages and have even enlisted outside help. To stay in the game, responsive mobile is currently essential. Sites that are not optimized for mobile are loosing position in mobile SERP and there is strong indication that future mobile SERP may drop these sites altogether.

However, I fully expect something to come along in the very near future that will resolve these issues for the WWW, making all this irrelevant :)
1:20 am on Sept 6, 2014 (gmt 0)

System Operator from US 

incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
posts:14664
votes: 99


fully expect something to come along in the very near future that will resolve these issues for the WWW


Don't hold your breath as that something was smart phones will full blown browsers that can show the whole page and allow panning and zooming.

However, the panning and zooming is a poor mobile experience and I fully hope to antique pages aren't dropped but pushed down further in the SERPs below the sites that provide an actual mobile experience.

Based on current trends, mobile devices are already the web, not desktops.

People that claim they aren't getting that much mobile traffic aren't understanding that it could be simply because they don't support mobile and are shooting themselves in the foot by not doing it.

I always recommend the quickest and most reliable way to get a fully RWD site is using Twitter Bootstrap, even WordPress has themes like BootPress, WordStrap, etc.

More importantly, using a common framework like Bootstrap gives you even more off-the-shelf open source already written to use Bootstrap which you can't take advantage of when you roll your own.

As the OP correctly points out, using anything to make the site more mobile friendly should be done ASAP and the list above is a pretty good place to start.
1:22 am on Sept 6, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 11, 2007
posts:774
votes: 3


Great post not2easy!
6:13 am on Sept 6, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2822
votes: 135


I cannot find any reference in the CSP document to not allowing inline CSS. Can someone point me to it?

I think 10 is the one to look out for, because it is so subtle. It is very easy to link in ways that give a desktop user a cue when they moved their mouse over it, but would not be obvious on a touch screen.
6:21 am on Sept 6, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2822
votes: 135


@incrediBill Bootstrap is powerful and easy to use, but there are some things I strongly dislike about it:

1) Adding classes to your HTML that specify how may columns content to span is not semantic. It is just a more flexible version of .col-md-4 is, at heart, a modern equivalent of colspan=4

2) The media queries are px width based. I prefer to use em for everything unless I am primarily formatting around images. not2easy's point 9.

I am not a huge fan of the JS part of Bootsrap either, but that is not mandatory.
6:56 am on Sept 6, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4059
votes: 251


Can someone point me to it?
Sure, in the first paragraph, the introduction:
There is often a non-trivial amount of work required to apply CSP to an existing web application. To reap the greatest benefit, authors will need to move all inline script and style out-of-line, for example into external scripts, because the user agent cannot determine whether an inline script was injected by an attacker.


The language where I read about this first on the google/developers site was more strongly worded, (made me wonder if this was related to their push for https..) you may see that in one of the other links because although I've been gathering and using this information for several months, I tried to double-check everything today to be sure it had not changed. I tried to end up with the least number of links that would still lead to the needed info. They caught me once before when the page where I got info was quite different when I went back to verify it.
7:17 am on Sept 6, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2822
votes: 135


@not2easy, thanks.

As far as I can see it will only be enforced if you set Content-Security-Policy, so it is not enforced by default.

I think I need to read up on what attacks it is trying to protect against.
7:26 am on Sept 6, 2014 (gmt 0)

System Operator from US 

incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
posts:14664
votes: 99


but there are some things I strongly dislike about it


Don't want to hijack the topic, start a bootstrap thread if you want to discuss further.

My criteria for picking it was the fact that it's used by one of the largest web companies in the world and it's used and tested on more devices that nearly anything else so I suspect their methods function properly and if they need to change anything, it'll be available in the next update.

I didn't want to get involved with cross platform support and using a framework like Bootstrap immediately solved that problem.

Yeah, I looked at other frameworks and they were incomplete and lame overall, many were the basic frame of a DIY kit without industry support.

Having wide adoption and support if the key here, it's like using WordPress, you know there will be lots of support, open source and developers.

The path of fully custom RWD is way more expensive and time consuming which I know from experience.
7:30 am on Sept 6, 2014 (gmt 0)

New User

joined:Sept 6, 2014
posts:2
votes: 0


Hello Not2easy, Excellent post and highly informative. After reading the post it seems you are harping on two things: 1st, Vreate a site that is more mobile-device friendly and 2nd, The design should decrease loading time. Can't agree more with the observation. However, I've some questions regarding the recently implemented HTTPS. What are your observations on that. Some of my friends told me that their income from their sites almost became one third after implementing HTTPS. More worrying is that the situation has not changed even after one month. Let me point out that I've personally checked my friend's site and the quality of content are quite high. Can you or anyone else please help me understand this aspect?
11:10 am on Sept 6, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2822
votes: 135


@incrediBill I do not use Wordpress much either (or MySQL, or PHP, or Windows, or a lot of things that are popular). Is there enough to discuss about frameworks to start another thread? I do not know much about which is best as all my own sites have simple layouts, and those clients who have complex layouts have had them done by a designer.
3:47 pm on Sept 6, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4059
votes: 251


The path of fully custom RWD is way more expensive and time consuming which I know from experience.
Very true, which is why I looked for ways us po' folk could stay in the game. My sites have been semi-responsive since I first read about the concept of liquid widths when people were concerned about monitors other than 600x800 back before mobile was a thing (in html4). I have not completed updating all my sites, but I have changed over enough to see that it improves traffic, sometimes dramatically.

Hello Alissafinancewand and welcome to the Forums. I have not implemented https on these sites, but there seems to be a general consensus that the https change may cause a site to be viewed as "New" at the new URLs. An ongoing discussion on that subject can be found here: [webmasterworld.com...]
6:50 pm on Sept 6, 2014 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 890



Don't hold your breath as that something was smart phones will full blown browsers that can show the whole page and allow panning and zooming.

No, not quite. You'll see what I'm referring to likely by the end of next year.
7:16 pm on Sept 6, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 6, 2006
posts: 1191
votes: 41


Without a viewport setting your site is not considered by search engines to be device responsive in its design, even if "it works fine" on mobile devices.


Is this correct? Are you saying that a viewport setting is mandatory?
7:35 pm on Sept 6, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4059
votes: 251


Its not me saying this, it is how the mobile devices know how to render your page. It is right in the first paragraph of the page I referenced:
A viewport controls how a webpage is displayed on a mobile device. Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen. Setting a viewport gives control over the page's width and scaling on different devices.

They go on to show screenshots of the difference of the same page and css one with, and one without a viewport setting.

Edited to add - having a viewport tag in your pages' headers is a clear indication to robots that the page is configured for mobile visits.

[edited by: not2easy at 7:38 pm (utc) on Sep 6, 2014]

7:36 pm on Sept 6, 2014 (gmt 0)

Preferred Member from GB 

5+ Year Member Top Contributors Of The Month

joined:Sept 29, 2009
posts:510
votes: 46


released our responsive design in July and I'm very very happy with the results. Mobile use has gone from 3% of sessions at the start of the year to 9% now and it's still rising fast, far more than you'd expect from general mobile 'inflation'. Our mobile bounce rate went from 70% to 55% which is now the lowest of the mobile/tablet/desktop trio on GA. Lots of other similar great stats (pages per session, avge session time). Best thing we did and I actually feel we're on the cutting edge now, instead of behind the curve where we've been for ten years.
8:11 pm on Sept 6, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 6, 2006
posts: 1191
votes: 41


Edited to add - having a viewport tag in your pages' headers is a clear indication to robots that the page is configured for mobile visits


Thanks for the clarification. I see that most major sites in my vertical have viewport tags so I must look into it further.

In the meanwhile I've made several of my sites responsive and like others I'm very pleased with the increase in business. An absolute 'must do' IMO.
10:51 pm on Sept 6, 2014 (gmt 0)

System Operator from US 

incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
posts:14664
votes: 99


The viewport setting, while a good indicator, is lame as a fluid design for a simple site may satisfy the needs of all devices.

Good to know though as adding viewport code, even when it's a lame duck, is all the SE needs to know.

Having that little tidbit, someone could cheat and simply install that on any site to make the SE add it to the mobile index. For that matter, merely including bootstrap might get you into the mobile index.

Wonder if anyone has actually tried that without making the site truly mobile?

FWIW, if people don't know, Googlebot does currently crawl as a mobdle device and it's possible they're using a headless browser like PhantomJS, SlimerJS, or something Google make themselves, which allows them to determine if your site is really responding to the current viewport or merely trying to cheat.

Just my guess, but the technology exists, they do crawl as mobile, so it would make sense it's capable of evaluating a true mobile response by the site or not.

Based on the assumption of using a headless browser configured as mobile crawling the web, SE's would appear to be able to easily detect and sort sites out for the mobile index.

Many webmasters still have the blinders on against mobile but you have to consider that over a holiday weekend, like Labor Day last week, most of the country was mobile so anything not mobile friendly probably saw a huge drop in usage for obvious reasons.

My prediction is in 5 years or less we'll be having this same discussion but it will be trying to convince people to continue designing for large desktops, that there's still a desktop market.

I'm getting a 27" touch screen so I hope the web keeps supporting large monitors! ;)
11:11 pm on Sept 6, 2014 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 890


Edited to add - having a viewport tag in your pages' headers is a clear indication to robots that the page is configured for mobile visits

Takes a lot more than that. Run your site through Google's PageSpeed Insights and read all the mobile indicators and suggestions.

[developers.google.com...]
11:29 pm on Sept 6, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4059
votes: 251


One of our office desktop machines is a 27" and I don't care for the look of a full width page on most sites, it is hard to read wide text that flows across the screen. Some sites with a lot of graphics have a layout that looks good at that width, but most don't. It seems reasonable that the mobile bots would be able to determine whether the viewport was functional or not. I don't think it would help anyone to just paste in the tag, certainly not for very long.

People usually think of a pixel as a pixel, but that has changed, another few quotes from the viewport page cited above include this about pixels: (and why I suggest switching to ems)
Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.
Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.
CSS pixel: The unit used for page layout controlled by the viewport. Pixel dimensions in styles such as width: 100px are specified in CSS pixels. The ratio of CSS pixels to device independent pixels is the page's scale factor, or zoom.

When a page does not specify a viewport, mobile browsers will render that page at a fallback width ranging from 800 to 1024 CSS pixels. The page scale factor is adjusted so that the page fits on the display, forcing users to zoom before they can interact with the page.


And this about the viewport as a standard (its not):
Pages must be designed to work at different widths to use a responsive viewport.
---snip
It is possible to set the minimum and maximum zoom, or disable the user's ability to zoom the viewport entirely. These options negatively impact accessibility and should generally be avoided.
---snip
The meta viewport tag, while broadly supported, is not part of a formal standard. This behavior is being included in CSS as part of the CSS Device Adaptation specification. Until this specification is finalized and widely implemented, authors should continue to use the meta viewport tag for compatibility, either alone or with corresponding @viewport styles.

I included it here as something people should be aware of and use where applicable. The same page offers links to resources, I'm hoping people would use the information as a starting point and find out more by looking into the available information. There is a lot more information that applies to making these changes.
11:34 pm on Sept 6, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4059
votes: 251


@keyplyr, Yes, you're right, I did not mean to imply that all you need is the viewport tag, sorry if it reads that way. It was in response to a specific question:
Is this correct? Are you saying that a viewport setting is mandatory?
12:37 am on Sept 7, 2014 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 890


Aside... I use a 32" diag monitor, two of them actually (sitting next to each other.) I usually have anywhere from 2 to 4 windows open at a time on each running various software as well as web pages.
5:06 am on Sept 7, 2014 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 890




Yes not2easy, I understood that. My comment was more for superclown2 and others who were interested in viewport significance. I should have been more explicit :)
7:03 am on Sept 7, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2822
votes: 135


I think the viewport tag is necessary even with a fluid design. One of my client's sites responsive design was broken on iPhones because it was zooming out necessarily until I added "initial-scale=1" to the viewport tag. At the very least it will make how devices zoom (or not) predictable.
6:48 am on Sept 8, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 19, 2008
posts:1297
votes: 93


not2easy, thanx for the great post. I will put it into my just inwork mobilversion of my site.
But "donīt use inline css style" is something that what makes me think of site speed.
insight site speed suggest to use inline style elemetns to boost our rendering above the fold. css files are a blocking document for above the fold rendering.

yes, you can load the css file on the file end by async loading and use javascript to mathc the elements but what if the browser does not support JS?

There is so much noise about this and nobody realy has an answer.
Are you going after official www consortium or after insight site speed?
1:50 pm on Sept 8, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4059
votes: 251


What I did is as mentioned above, break the css file into two parts, essential for layout (which, after compression is about 1k) and left that in the head, despite dire warnings from the site speed pages, they give it a passing mark. The rest of the css for design/appearance comes in at the end. The page won't look quite the same, but it is missing things like font colors, rounded corners and spacing, letter variations. The "curtains and shutters".

The parts quoted from site speed relate to their guidelines, the parts quoted from w3.org are their guidelines. They are expecting future changes, so it is not something to stop work for today, but could be in the future.
11:57 am on Sept 18, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 6, 2006
posts:1191
votes: 41


Anyone got any thoughts on this?

Does Google want a site which is optimised to load quickly, period? In other words, stripped, as much as is practicable, of anything that may slow it down, such as lots of images?

Or one in which the Images are still there, but optimised to load as quickly as possible, bearing in mind that they may have to retain a fairly high resolution?

I am looking more at what is visible on a computer screen, laptop or tablet rather than a mobile phone, which of course should be minimised as much as possible. I'm also wondering if it would be worth while using some @media to change graphics to similar ones of different size/resolution to suit device sizes. Or is this overkill?

What do you think?
11:20 pm on Sept 18, 2014 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4059
votes: 251


Different images for different screens is one option, it can be dynamically delivered.

In Google's ideal image, it is a vector graphic with 3 or 4 colors rendered at 5-bit color depth for a 500 byte image. This is not practical for product images, photographs and many other graphics. So we learn how to find our middle ground.

Not every website can cut everything to the bone and still offer visitors what they visit for. There is no "one size fits all" solution to reach a goal of image optimization for mobile friendly websites. It is up to each webmaster to evaluate their own best options to balance the need for quality vs. filesize. The first step is to understand the issue regarding css pixels and how to offer smaller file size without sacrificing quality. It isn't a field of "Take this number and compress all images using this algo using this software". It is experimenting to find your solution for various types of images. Image optimization is a multi-faceted pursuit with no "right" or "wrong" answer for every site or image. Google offers page after page of the what, how, when and offers resources to help image novices to accomplish the best balance for their image requirements.

You could start with the link above in #6 of the OP. Or learn about css pixels here: [developers.google.com...] to get a starting point.
9:24 pm on Sept 19, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 6, 2006
posts:1191
votes: 41


Thanks not2easy, this has been an extremely helpful thread.
5:09 pm on Jan 23, 2015 (gmt 0)

Full Member from GB 

10+ Year Member

joined:Oct 16, 2001
posts: 205
votes: 0


I'm not sure about splitting the CSS into two files. You then have two separate http requests which causes latency for mobiles.

A good option would be to include the critical css in the &lt;head> so it can be rendered within the first request, and then lazy load in the remaining CSS at a later date.

I'd also update the image optimation to include a tools like ImageOptim for optimising and compressing the iamges, and taking a look at the srcset repsonsive images solution for serving the right sized image for the viewport.
This 41 message thread spans 2 pages: 41
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members