Hi everybody
I’ve been making my website with rapidweaver and stacks. It’s been a bit of a learning curve, but I’m finally done with it. Now I have found out, that for some reason my website is not responsive. Everything looks good on a computerscreen, buts its really a mess on a mobile device. I was under the impression, that most of the regular stacks were responsive and I can’t really get any of it too look semi normal. Even text-stacks will no cut the text properly.
I admit that when I made the website, I didn’t consider this, but right now I’m very pleased with the website as it is right now, but just not on mobile devices. Is there anything I can do beside building my site from scratch again?
the fastest way: In your page, make additional stacks for the mobile view and use less content, smaller headings etc. for it. Then set all the stacks you want to display on a computer to “hide on mobile” and all the stacks you want to see on ma mobile with “hide on tablets and desktop”.
Thanks for the answer. This is a great idea. Do you know if I can use the same content i the stacks for computer and the ones for mobile without google seeing it as duplicate content and hurting my rankings because of it?
Hi Janus,
You the web designer have to make the text fit as this will not happen automatically.
By far the best way to do this is to use good Header stacks such as the Foundry Header or BWD HeaderPro stacks. Both of these stacks allow defining Header text sizes for mobile, tablet and desktop and HeaderPro offers more size options too. Using stacks like this allows you to choose an appropriate size for mobile and tablets that will not exceed the available width of these devices and it is usually achieved by some trial and error.
Hello,
Are you using stacks3? If you have stacks on your pages note that some old text stacks (2 col,etc) will say “stacks 2)” as the header of the text when view in edit mode. You’ll want to drop in a new corresponding stacks3 stack and drag the content into the new stack.
Compare a stacks2 two col stack and at stacks3 two col stack. You’ll see the new one has some tools for “responsive” behavior.
Also important… if you have “fixed width” columns and such nothing will work right either. You’ll need to re-think everything… so if you need a LOT of left padding on a wide screen you don’t want lot’s of padding on a phone, you’ll have to get some stacks that handle padding dynamically (lot’s of padding on big screen, lessor padding as screen reduces.) (just one example of re-thinking your layout)
Sadly, making a page “responsive” and “mobile friendly” requires lot’s of thought.
AND, WHEN YOU PREVIEW, GRAB THE EDGE OF THE SCREEN AND WATCH WHAT HAPPENS as you drag the page smaller, simulating different screen sizes.
Oh… and if you have NO responsive behavior at all check your Theme. Some have a setting for “Responsive” (yes, or no)
Thank you all for you responses. I see that I should have thought of this before I actually started making my site. I’m thinking about just making another website and using a stack called mobilize to redirect people who are reading the site on mobile.
I know that a large majority of web designers and developers now go-with the responsive approach. But actually there are still some credible and very valid reasons for sometimes needing to detect and redirect different users to different versions of a website. Even big websites like Facebook still send phone users to a dedicated mobile website. Mobilize could work well for you, in this instance. Let me know if you have any questions about the stack.
Hi Will. Thanks for replying. I will properbly have a lot more questions once i get into actually making the website, but for now, I’m a bit concerned about duplicate content and my google ranking. Do you know if this is a problem?
I mean should I write a totally new, but compressed page for my mobilesite?
I’ve not heard of any problems with SEO (search engine optimisation) when using Mobilize. The method of separate websites for separate devices is still widely used outside of RapidWeaver. Search bots don’t tend to identify themselves as ‘tablet’ or ‘mobile’ so therefore won’t get redirected away from your main desktop version of the website.
Assuming that the mobile site will be contained within its own directory or subdomain, you could use your FTP software to create a text file named robots.txt and then add some info that will tell search engines to ignore that part of your website: http://www.robotstxt.org/robotstxt.html
Like this…
User-agent: *
Disallow: /mobile/
…assuming the mobile section of the website was in a directory named ‘mobile’.
This way, the mobile version of the website will never be shown in Google search results or others. Only the desktop version would continue to be indexed and shown on search results.
Just thought I would post this here for those who might want another alternative to Mobilize. Joe’s Agent stack now has a pretty cool new stack that will allow you to redirect to a URL based on the user’s device.