I am thinking of making an existing site mobile. It’s a wordpress site and is although it has a blog, it looks more like a static site with a half-dozen sections.
I have been reading up on responsive design and get the whole resiszing thing and I’m OK I think, with media queries but I can’t work out how to not load content in a mobile site.
So this site has a section for parents, for adults, children, about section and so on. For a mobile I probably only want about, the blog and contact so how do I prevent sections being accessed on a mobile?
Hiding stuff from mobile users is a controversial move, and annoys a lot of visitors. There seems to be a building trend away from this. What’s your rationale for not making all content available?
You could set up a separate site (e.g. m.mysite.com) and use browser detection to serve up the different site to the mobile device, but it’s not likely to be worth it. At a pinch, you could hide certain site links via your media queries, but I still wouldn’t recommend it.
I suppose that would be to reduce the content as much as possible. It would be great to think that the contact details, about page and news items were available to small devices. Other sections will be text heavy and I just thought that I couldn’t imagine anyone wanting to read text heavy content on-the-go, on a tiny screen?
Best leave it to users to decide. (They can always choose not to click on that stuff.) Some people only have time to read articles on the train to work on a mobile device. Why tell them they can’t? (That’s just one scenario I can think of.)
I think it’s a good idea to show your most important content to the mobile user and not overload their tiny device with unnecessary information. So I guess you just have to make the tough decision of what is necessary and what isn’t. Remember, if you plan to use media queries, depending on how you set out your site, your users could still be downloading a images and whatnot in the background without even seeing it, chewing up their bandwidth. Just keep that in mind.
Touche! However, I think there is a difference between bare necessities and that little bit extra. It’s my personal opinion, but I think the whole mobile first movement limit’s a person’s ability to be creative.I’m yet to be convinced that everything that the content on the desktop version should resemble that same content on a 320px (or so) wide screen…
If you’re worried about hiding content… you’re doing something wrong.
If every bit of content isn’t necessary for mobile users, then it isn’t for desktop users either.
You should take a good hard look at your “regular” website and try to trim it down to the essentials. If you have a lot of “nice to haves”, move them to other pages where the users can still find them, but where they don’t take up space from what really needs to be there.
Like Ralph said, hiding content is generally not a good idea. I have a high-end smart phone and a really fast connection. There is no legitimate reason that I should be able to do everything on my phone that I can from the computer I’m sitting at right now. When developers make that decision that I can’t access a certain feature, it really annoys me. It annoys me even more because the reason was usually because the feature doesn’t work on the device. Instead of fixing it, they simply hide it. If it wasn’t important enough to let me use from my mobile device, it isn’t important enough for it to be on your site.
Oh, because I generally like to answer the question presented (even if I disagree with the premise).
Be careful exactly how you load content. For example, if a style sheet loads which contains images to load, even if those images are never used, they will still be loaded. So while you think you are reducing what is loading on the page, you may not be. Media queries to block the entire script from loading are probably one of the best methods to avoid this (so be wary of any “common” style sheets and really keep their content limited).
As for HTML content, there are a couple ways of dealing with this:
Load everything and hide stuff. This is easier to do, but causes larger loads than needed.
Have the page load an page that sets a cookie, then read that cookie to determine which content to actually send. This method can usually work well, though has quite a few contingencies (and an extra redirect, which can be bothersome on high-ping mobile devices)
Have a mobile site. This one is very very similar to the second (so I prefer the second), but you can have a completely separate site and redirect mobile users to it.
However, like I said, I prefer to have all of the HTML content load regardless of platform, then deal with it in a platform appropriate manner.
“Here is your mobile version of the website my dear client. With the things you need the most.”
“Wow, looks great.”
“And here is the desktop version,”
“It looks good, but, where is all the content? The rest of the stuff I asked for that I don’t need on the mobile version? The details, the fine print?”
“Well, that stuff isn’t important on the mobile site, so how can it be important on the desktop site?”
or perhaps it should sound like:
“And here is the desktop version, with more content, as screen is larger and the page can fit more. Meaning your customers need not click so often and can find information faster”
Why would the fine print not be important on a mobile version? Is legalese excused because it’s a mobile site? Is that an automatic no-sue zone? =p
I’m not saying you can’t have more on the desktop version… but often times, it’s not important and can be moved as well. If it is important, you can usually take the multi-column layout and combine it into one column.
A lot of times developers are so worried about using every inch of available space that they forget to worry about document flow. A linear flow is the most effective method of guiding the users eye where you want them to go, and it’s perfect for mobile. Just because it’s visible doesn’t mean it’s faster to find either. There are so many layouts that are so busy because they want everything and the kitchen sink on them, that you often miss what’s right in front of you. Having a well guided one-column linear layout, even if it requires more clicks, can often be more beneficial to finding what you are looking for quickly (hence why sites like Amazon adopt a single-column layout on their mobile site).
I would challenge you to find a good site that you can’t get all the appropriate content onto a mobile site. There isn’t one. If you can’t get it all on a mobile site, it means there is too much on that page on the desktop version.
Coming in late, but I generally show all the same content on the mobile, I just make sure that it displays well. I use media-queries and quite a lot of different CSS as the size of the browser changes. I do - as Ralph suggested - change from 3 to 2 to 1 column, I resize images and replace them with the smaller version that fits the mobile in landscape or portrait. I also increase the size of buttons, and clickable links for fingers rather than mouse clicks.
There is some movement behind the idea to build the mobile version of your site first and then build out for the tablets and desktops. Over 80% of Japan’s most popular social networking site connect via mobile, 400 000 000 people connect to facebook regularly using just a mobile, so as more people switch to predominantly using their mobiles then we maybe should gear our thinking to planning for the mobiles first. When you focus on making the experience good in mobile then you tend to stay away from ‘jambing the kitchen sink’ into it and also provides a better experience for the desktop version.
To follow along with that, I read a statistic the other day that said by 2014, mobile browsing will have overtaken desktop browsing (in terms of usage).
Nowadays I’ve got people asking why others would mobiles as their primary browsing environment because it is so much easier and can do more on the desktop/tablet. The answer is simple “Currently, developers design for the desktop, when the market demands mobile first then this will no longer be the case”. IMHO we are in the cross-roads to this. Just think of the millions of people in Asia that are rising into a middle-class type of living and want the Internet. Most of the places they live are spotty at best with land-line coverage and no company will invest in this; they are buying and browsing using their mobile phones. This will rapidly intensify in the next few years, so it is pretty easy to see how Christian’s stat follows
Well, I think that my question has been answered although I’m not sure what the answer is
I’m settled on the idea not to “hide” stuff to mobile users but my intention was not to dupe people but only to give them what I thought might be most critical.
The site is for a psychologist and over time, there is a commitment to making the site a resource of information an not just a kind of brochure site. So, it could get quite large. But I guess that organising content will be crucial.
I have enjoyed the discussoin and found it helpful, thanks.
(That’s just one scenario I can think of.)