Welcome to WebmasterWorld Guest from 54.221.75.68

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:4055
votes: 249


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.
5:59 pm on Jan 23, 2015 (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:4055
votes: 249


Yes, often critical css can be contained within
<style>
tags within the head rather than an external style sheet, it depends on the content of the "critical" css.

There are several image management options, new ones are coming out all the time. Back when this was posted there were a few, but not universally compatible and implementation depends on factors outside the scope of these suggestions so it was not mentioned here. Image management choices depend on the CMS and site structure.
2:11 am on Jan 24, 2015 (gmt 0)

Preferred Member

10+ Year Member

joined:May 4, 2003
posts: 565
votes: 0


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

Yes, I too am finding this all just strangely waaay too hard for so many reasons. What, just a few years ago was reasonably achievable, is now a really complex exercise, with so much divergence of opinion, and no 'magic solution'.

With SO many smart people in the world, and SO much money to be made, it seems to me that such a 'magic solution' that will make web-site creation relatively easy once more, can't be too far away.

And so I've decided to put the hard challenge aside and wait for what I think will be the inevitable, easy, magical product.
9:11 am on Jan 27, 2015 (gmt 0)

Full Member from GB 

10+ Year Member

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


wait for what I think will be the inevitable, easy, magical product.


I think that's called print :)

@not2easy a good point that images have been changing over time, I just wanted to point out that the title might be a little misleading for people wanting to get a start with improving performance and optimising images as it's more "making media flexible" than optimised.

implementation depends on factors outside the scope of these suggestions so it was not mentioned here.

You're also right that a responsive image solution does depend on outside factors.

Image management choices depend on the CMS and site structure.


Could you give some context/examples around this?

The site structure should never have any impact on your ability to provide a responsive image solution, and I would consider any CMS that restricts your ability for a responsive image solution to be worthy of replacement. Should you have a CMS that does restrict you there are other options for externally provided services that can help.
4:29 pm on Jan 27, 2015 (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:4055
votes: 249


Could you give some context/examples around this?

A small hand coded html site might want to have various image versions in folders.

An ecommerce site might need to integrate image versions with cart and/or database and/or third party storage.

A Wordpress site might use a plugin to manage their images or rely on the built in image sizing and caching tools.

There are php image tools that you would need to install and configure.

Because this is not an article about image optimization, some very basic information was included with links where you can find more detailed information.

This article at CSS Tricks: [css-tricks.com...] is one of the most helpful places I have found that clarifies choices for image optimization.
5:56 pm on Feb 20, 2015 (gmt 0)

Senior Member from US 

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

joined:Oct 5, 2001
posts:5853
votes: 102


I gotten some good insight from this thread, thanks.
1:54 am on Mar 31, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Aug 24, 2000
posts:1748
votes: 5


Lately, I have been converting several old sites to be responsive.

I have built my own set of apps and imported/modified existing apps to make these site more mobile friendly. If you are building by hand, it is extremely helpful to have your own library of often used apps.

I often end up calling several different css files, at first I ran into formatting issues due to duplicate class names.

So I devised a naming convention for classes, with each css file having its own three letter prefix.

It takes a little creative work to update the class names in the css file and the html, but once you have a good system together, it only takes a few find and replaces to avoid conflicts.
6:46 pm on Apr 2, 2015 (gmt 0)

Senior Member

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

joined:Mar 30, 2006
posts:1554
votes: 108


Also keep in mind:

Diff link/buttons sizes for diff screens.
Responsive doesn't just mean fit on the screen, it must also be useful, usable. Keep in mind some nav links or just plain a hrefs become unusable on small screens as they are just too small to hit with the fingertip. Also consider making some content disappear, some websites look nice on desktop but on small screens (smartphones) just don't need some blocks or links. Keep what's useful.

Limits.
Use % but also limits, limits on size (small) and large, because as pointed out in this thread, some sites look terrible sizing up to 27" monitors.

Twitter Bootstrap.
Quite nice for mobile and mobile first, targeting all the screen sizes you might want. I quite like it, some features (well, a lot of them) as indicated on this thread ARE NOT semantic, but it's quite usable. Problem is, or better said: what I don't quite like, is you end up with mostly 300kb or whatever depending on compression, regardless of using or not all the features. You can build your own pack but it doesn't work that well (own experience) some functionality depends on others and sometimes just using a small set of things demands quite a bit of bytes (css and JS). And... I learned the hard way: some builds don't work (custom builds), some have issues and bugs.

Learn from Twitter Bootstrap.
Sure we can use % for everything but sometimes it just doesn't work, yes perhaps you have seen cases where things might fit and then on some resolutions won't fit, then while you keep resizing they do fit (sounds difficult to believe but once you face it you won't forget it). Then avoid targeting a magical set of % for your layout and just like T Bootstrap, target a few sets of diff resolutions, at the end keep in mind your design doesn't have to behave like a resizing jpg.

Simplify Twitter Bootstrap (or your own CSS).
Pardon me if this is not the best approach, but some TB features involve a div, a container inside, another container, a div... ul, li and then the href (just to mention a case). Sometimes you can address this directly right to the ul and the href or the li avoiding a lot of unnecessary code. You can do it on bootstrap or on your own html+css. Avoid your layouts ending up like Drupal (I love Drupal BTW) but it ends with a full set of divs, divs inside, classes and IDs just so you can target every-thing. While that's understandable on some cases and angles.. it shouldn't be the case when you code from scratch or when you use a framework.
3:02 am on Apr 13, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member editorialguy is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 28, 2013
posts:3351
votes: 703


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.


This shrinks the image horizontally, but not vertically, so the image ends up being distorted (at least when I try it). Or am I missing something?
3:42 am on Apr 13, 2015 (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:4055
votes: 249


Have you set the image height? If not, the image will resize proportionally.
1:59 pm on Apr 13, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member editorialguy is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 28, 2013
posts:3351
votes: 703


Ah. Thanks.
9:35 am on May 18, 2015 (gmt 0)

Preferred Member

10+ Year Member

joined:May 4, 2003
posts: 565
votes: 0


Just getting back to this thread..
I've been looking at, and playing with, 'Webflow' the last couple of weeks - from the product itself, to the Forum, to the support videos, it's a very polished and impressive product IMO - and if it continues the momentum it appears to have currently, I think it will become even more significant.
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