Re: 7 lessons from my first responsive web site

I've been playing with a responsive and dynamic content-swapping site for
our actual website as well.

http://m.bvstools.com

I ran into a few issues too, mainly dealing with the dynamic
content-swapping part, which you may eventually do with your site.

It looks like it could be easily converted to something like that which
would make the site more responsive (ie, you use jQuery to update the
contents of the page instead of reloading everything including CSS and
Javascript, each time a link is clicked).

Here's an article I wrote about the problems I ran into, mainly dealing
with SEO and web crawlers (something to be weary of if you're going down
this route):

http://www.fieldexit.com/forum/display?threadid=175

I also posted it on LI here (but I don't really like the posting tools for
posts on LI.. they're too basic to format code):

https://www.linkedin.com/pulse/responsive-design-dynamic-content-swapping-seo-googlebots-stone

I found one thing that maybe I can help with in your case:

6. Load JQuery at the bottom of the body section in your HTML file, if

possible. While browsing between the pages of my website, I kept getting a
very annoying white flicker. The page would very briefly flash all white
before the page displayed. This is often a sign that the browser is trying
to render the page before it has downloaded everything in the head section
of the HTML file. Loading JQuery at the bottom of the body section in the
HTML file resolved the white flicker problem. You might not always be able
to do this. If you need to run some JQuery JavaScript *before* the page
loads, then you can't load JQuery at the bottom of the body section. You
probably need to load it in the head of the HTML file.

This happens on a lot of sites. If you're using a lot of jQuery that's a
lot to load (best to use a hosted library, which you are.

But, you can make the body with a display:none (using CSS), then with the
jQuery make the body visable once the window loads:

$(window).load(function() {
// When the page has loaded
$(".hideMe").hide();
$("body").fadeIn(100);
});

The hide() is just there to hide anything that I initially want hidden.

I tried this on document.ready and it didn't quite work as good.

7. Some designers are willing to sacrifice accessibility in order to
quickly work around design problems. For example, certain kinds of
responsive design problems can be quickly resolved by including the
following meta tag in your HTML files:
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1">

This also will help you pass Google's mobile test. When I was testing mine
I had 2 issues (well, 3, but 2 were related to not having this meta tag).
Font was too small (I don't like using set font sizes, instead I like using
percents).

Font size easily fixed, but it took some searching to find this little gem
you mentioned. :)

Just some thoughts.

Nice site!

Brad
www.bvstools.com