I have a big old site that I have been growing over the years,
www.vintagewatchstraps.com. Almost all pages validate as HTML5.
Now Google has started grumbling that it isn't mobile friendly. I can add the "meta name=viewport" business, and I understand that I will need to change things like widths to be in % rather than pixels, but the thing that is bothering me most is the navigation.
I have been reading up about making a mobile friendly CSS navigation bar, at Medialoot and Lisa Catalano, but the examples they give have only a few pages. If I displayed my navigation as a vertical list on a small screen as they suggest, my 70+ navigation links would go on forever. All the examples of adapting a site to mobile that I have found just don't cover sites having lots of content and pages.
Any suggestions as to how to deal with this would be gratefully received.
Kind regards - David
Some ideas:
do you actually need all those links in the menu? Try only including the main things people want to see, as people aren't likely to read your entire website on a mobile device anyway.
have two layers of menus: a heading reveals another slide out menu with subcategories
put a search box at the top of your menu
Related
I have recently begun assisting updating my company's website. We have a few video playlists that I noticed have a ton of extra navigation buttons. I have an attached screenshot with the navigation circled.
I cannot figure out where the extra buttons are coming from, so I am unfortunately not even sure what the best questions are to ask here. The best I can find from digging around in the CSS are that there are references to mejs and aria. For all of my toying around. I have not been able to isolate one set of the buttons to go away and still show standard navigation buttons.
Thank you!
Check CSS Styling for input[type='button'] or button in your CSS.
I am supporting a website:
https://www.allcounted.com/
If you first look at the home page or What's Hot page and then click the Subject or Country page in the top navigation, you would see the page move left a little.
I know this is a CSS issue, but I am unable to find out the CSS rules that creates this issue. This website uses bootstrap-3.2.0 and some other tools.
At my screen this page seems displaying correctly (Chrome 57). This 'movement' what are you talking about's occurring because of browser is scrollbar, I guess, if I m wrong, punish me, but also I may recommend you using Developer Tools at your browser to inspect that. :)
If you could share more info I will be glad. (Some screens etc.)
Okay,
So I figured out on my own how to make a mobile site out of an Artisteer template.
Basically, I changed the sheet to 100% fluid width, minimum 300 px, one column, got rid of the menu and replaced it with a vertical menu, got rid of most of the blocks or put them under the vertical menu, made everything smaller and simpler. Smaller fonts, got rid of most of the padding except for 3px, made the header shorter, made the vertical menu bars tall enough to press with a finger, etc. My new mobile-friendly site looks great.
So now what? Do I export it as a WordPress theme and then have two installations of WordPress for every website?
Or do I export it as html, use a redirect WordPress plugin, an add an RSS feed?
Hmm...I think I may try html, but would love some feedback anyhow.
You definitely don't want two installations of Wordpress... double the admin overhead, duplicate content etc - not the way to go.
Easiest way IMO - and indeed, this is the way recommended by some commercial mobile theme developers - is to use a plugin like http://wordpress.org/extend/plugins/mobile-theme-switcher/ which simply detects the user agent of the client's device and switches to your mobile theme if it's a mobile device. So one Wordpress installation, two themes.
I know recommending a pluign isn't really the SO way :) - you can always look through the code and integrate it directly into your theme if you needed to.
I've just created a tshirt shop to put on my own website. A company called spreadshirt.co.uk (hereafter "SS") runs the shop. They allow me to embed their shop on my site via an iframe, and since they allow the CSS to be fully customisable through their admin panel I've got it looking pretty neatly integrated with my site.
The only catch is the iframe - I've set it to 2000 pixels high at the moment (just right for the longest pages). I'd rather have it resize for each page, but expect that to be "hard" so didn't bother.
Anyway, I've just put the page live, and put a test order through it. All is good, until....
...the "Verified by VISA" page. This motherhubbard turns up right at the end of the order process, and the HTML contained in it puts the little dialogue centred vertically in my iframe. I.e. nearly 1000 pixels down from the top - making less savy users think the page hasn't loaded (all they can see without scrolling down is a white background). I can't customise the CSS on this page like I can the SS pages, as this page isn't served up by SS.
Any clever ideas???
Many thanks people!
I'll put a link to my site if people want to see it, but assumed that might be seen as spammy and frowned upon.
I don't deal with iframes too much as i hate them, but i think you can still write to that document using javascript. Reason i say maybe is because its cross domain, but it should still work.
Check this post out
Resizing an iframe based on content
You could also check out
Resizing iframe to fit its content
and a jquery script:
http://www.lost-in-code.com/programming/jquery-auto-iframe-height/
Again, I really don't know if this will work on a cross-domain website.
are multi-level CSS drop-down menus a big 'no-no' for SEO purposes.
i've read mixed reviews. some say the links in the secondary navigation will not be crawled by search-engine spiders (because they're hidden) while the other say it is part of the HTML, so the spider will 'see' it.
any thoughts? thanks
As long as Google doesn't publish their indexing methods, we will never know for sure. But I very much doubt spiders will ignore links because they are in hidden elements. Text and keywords, yes. But links? No. In my experience, all bots are greedy to index as much of the internet as they can.
If you want to make really sure, consider having a second menu that is never hidden, and that shows the current page's "neighbor" links. Maybe have all the links of the current category as small links in the footer. That way, you can be sure every link will be visible on some page that is reachable from a level-1 link from another page.
Actually, I think I have seen sites doing that even though they had drop-down menus. Maybe that's the reason.
Depending on the number of links on your page, from what I understand you can be penalized if there are too many. With that in mind, how many are in the content, sidebar, etc. They add up fast - I don't use drop down because I did a test group and a large majority do not like sites with drop down menus.
IMHO will be seen. The search engines can not run all the javascript to figure out whether something MAY become visible during normal operations.
I've made sites using a drop down menu and they got spidered perfectly fine. As long as the links are in the HTML output (e.g. as an ordinary list) then the links will be seen.