I'm building a mobile site for a great magazine with a lot of content that is partly heavily. The problem now is that I have to hide the entire right column on the mobile site (yes, I need it in this case).
I've done a great research on mobile design, read a lot of articles, but can't find a solution that addresses this problem. It's usual to hide the right column with CSS or JS. But then everything still loaded. In this case the right column is so big, with a lot of content, it seems worthwhile to not load it for the page to load faster.
What should I do?
You should be able to detect the user's browser on the backend (I assume you're using PHP) and then make a simple control structure where you decide whether to load or not load that right-hand column on your site.
Here are some libraries that you may find useful (obviously you shouldn't have to reinvent the wheel for such a trivial task):
http://mobiledetect.net/
https://github.com/serbanghita/Mobile-Detect
http://detectmobilebrowsers.com/ (uses regex)
If you think that it is not a problem that mobile users wont be able to see that content, then you should not load it. There are php classes to check for mobile devices and based on that you can decide to not load some part of content. There is one problem - php class can only base on user agent settings, not browser size, so in theory someone with high resolution mobile device wont be able to see that content anyway.
One more idea on my mind - you can not load content in php, but after general content is loaded, check in js viewport width and eventually load part of content by ajax if there is enough place.
In summary, as we dont know your site content, it is up to you to decide if you can afford to not show part of content at all (for mobile devices). In this case when resolution change, users still wont be able to see it (i.e. changing device position horizontal to vertical). Of course in this case page will load faster, which also migh be crucial for mobile internet connections.
Related
I'm building a website for a client who wants a horizontally scrolling site, that also accommodates vertical scrolling per "page" when the content won't fit. I did not know how to do this without help, so I started with Álvaro Trigo's Full Page js which you can see here:
http://www.alvarotrigo.com/fullPage/
And I hacked around until I got this:
http://www.valleycharacter.org/
This is working relatively well so far, except for one thing:
If the browser window is wide, but not very tall, so that the content is deeper than the height of the browser window will allow, there is no scrolling ability for the site. I've tried many different ways of enabling scrolling, but they either don't work at all, or they work for one page but not others, or only after re-sizing the window slightly to somehow "wake up" the scroll bar.
Is this even possible? I'm thinking that there might be some combination of the methods used in fullpage that create a situation where vertical scrolling isn't an option? I'm stuck.
You just need to debug the page to see that there is an error:
Uncaught TypeError: element.find(...).slimScroll is not a function
That could mean many things, but taking into account that you are using a jQuery plug-in, most likely it will be one of these two:
You are using an old version of the plug-in.
You forgot to include one library needed for the plug-in to work.
As you copied the code from Álvaro Trigo's example page (you should update the meta tag so your page description is accurate and it doesn't look like the page is owned/developed by another person), go there, and check the source code.
There you can see that he is actually including a library that you are not:
<script type="text/javascript" src="../vendors/jquery.slimscroll.min.js"></script>
Download that file, include it in your project, and then the error is gone, the page fits better within the screen, and the scrolling works fine now.
Ive Googled and stackoverflowed since earlier on today and i just cant find a solution. I'm looking for a way using JQuery/JS to open up a webpage ive created with a maximized window. So on the page loading whichever browser the user is using, my webpage will be displayed as though the user has hit the maximise button on their browser, but automatically on load.
I need to make an interactive website which is best displayed maximised, any ideas? Btw im very new to building websites so any solution JS fiddle based or properly explained would be so much appreciated.
THANKS :)
For security reasons, JavaScript cannot change the window's size (including minimizing or maximizing it).
You can, however, open a new window set to a certain size - but not automatically - only in response to user interaction, like a click on the page (again, for security reasons).
I don't know what your site's content is - but if it isn't flexible enough to fit different screen sizes (like a game, maybe?) then your best bet from a user experience perspective may be to just put some text up somewhere on the page that says something like "Site best viewed in fullscreen". Or, if it is something like a game, maybe a nice big button on the homepage that says "Launch Game"?
Your best bet, however, is to have your content fit any screen size/shape. This is often called things like "responsive webdesign", and there's tons of info out there on how to design a website responsively, as well as how to implement said design.
Good luck!
window.innerHeight and window.innerWidth
http://www.w3schools.com/jsref/prop_win_innerheight.asp
Cordova 3.3.0, jquery, html, javascript, css
I am creating a mobile application using cordova 3.3.0.
On the second page I need to render a new page (html or url) in the middle of screen with respective to device width.
I need header & footer in fixed position at top & bottom respectively.
Middle part there should be one div or frame in that html or url page should render.
I have tried using iFrame, Cordova's InAppBrowser API both are not working. iframe is not scrollable & its contents are not squeezed. InAPpBrowser opens a new html covering total screen.
Please suggest me any working solution.
Thanks in advance
Use jQueryMobile. http://jquerymobile.com/
It renders pages and has ready-to-work transitions from one page to others. The page definition offers the possibility to have fixed headers and footers. jQueryMobile also offers a wide variety of controls and events suitable for mobile phones.
Be aware that depending on the user group of your software, despite of jQueryMobile you may still encounter the fact that many phones don't behave as expected, especially older phones.
Android phones used to be terrible in rendering transitions, so people came to shut them off or to replace them by simpler ones. Some very old phones had problems because the fixed footer at the bottom appeared suddenly in the middle of the screen or was not put down again after the keyboard disappeared. There will always be such details.
Yet still, jQuerymobile is probably your best option because of the work that has already done for you. Good luck :-)
I've been researching Responsive Web Design lately. While there are many techniques and practices that fall under the umbrella of "Responsive Web Design", essentially the main pillar of RWD seems to be CSS3 media queries. So, RWD is basically a client side strategy.
But with low-resolution layouts, you often have to simply remove entire sections of HTML. For example, a 3 column layout may need to become a 1 or 2 column layout on lower resolutions, meaning that you're basically hiding entire DIVs at lower resolutions. The problem I see here is that you still need to actually SEND the same amount of HTML code to a low-res device, even though it will never be displayed. In other words, you're sending the same 3-columns worth of HTML to a hi-res screen and a low-res mobile phone, but it's really a complete waste of bandwidth every time you send it to the low-res mobile phone.
Question: Am I correct in my understanding here, or does RWD also incorporate server-side techniques?
For example, suppose you have a skeletal HTML page like:
<div id = "main-content">
<!-- content goes here -->
</div>
And onload (or onresize), the client browser detects the screen resolution and makes an AJAX request that fills in main-content with the appropriate HTML for that resolution.
Are techniques like this that utilize server-side strategies to implement RWD ever used in practice?
In general, responsive development - if done correctly - should not have any redundant or repeated data in the markup. Likewise, content displayed at one screen width will also be displayed at another width, just in a different way.
I love the idea of making an AJAX call based on screen dimensions at page-load, but that's not really the idea of responsive design, and would actually take longer for the page to load (for the visitor).. It would also mean that the page layout wouldn't adapt when the browser window dimensions are changed (for example: switching orientation on a tablet). Unless you propose a new AJAX call at that point, in which case you'll be sending a lot more traffic than a single responsive page-load, and putting more load on your server too.
You pretty much answer your on question...
The time you will need to make a ajax call when the window is resized is much more longer then just give the whole html page once and use css instead.
And the main idea of responsive design is not hide your content. When you hide your content, you got a lot of troubles, like search engines that will show up your content but when a guy visit your website on his tablet the content doesn't show up.
Edit:
Just to make clear when I talk about content, I am talking about what is important on your page stuffs like a "adsense" or other things that doesn't really matter to the visitor should be hide at no problem at all.
About server-side technique there is a bunch out there, one good example is Adaptive Images that send images on lower resolution to lower devices, but you can do that with client side technique too.
Edit2:
I almost forgot that
Not to mention that onresize fires once for every single change in dimensions. In other words, if you go from 1000x1000 to 950x1000, it'll fire 50 times - 50 AJAX calls. #Sébastien Renauld
Why would you hide additional columns on mobile? Removing information is never a good idea, that'll only make visitors dislike the mobile version of your site.
Columns on a web site are usually created with floated html elements. Remove said floats with a media query and voila! The information is now all in one column.
If that one column ends up being far too tall you may want to consider adding toggles for showing/hiding the information, but that's as far as I'd go about removing content for mobile sites.
http://css-tricks.com/make-client-side-data-available-server-side/
In this article Chris Coyier talks about using clientside methods to check the current width of the screen, then save it to a cookie for use server side - then refresh the page. I don't entirely approve of the method, but perhaps it could be useful to you.
You may want to look into JavaScript feature detection or even UA sniffing, though its frowned upon.
You don't have to remove/hide columns in lower resolutions. The trick would be to stack then underneath each other in low res, then align them in columns in higher res. For example:
<div class="one">Column One</div>
<div class="two">Column Two</div>
<div class="three">Column Three</div>
.one, .two, .three {
blah blah blah, whatever needs to be here.
}
then add CSS:
#media only screen and (min-width: 600px) {
float: left; /* screens larger than 600px wide will throw them into columns via float*/
}
I have a web page with a fixed-size layout, it's fine in its current implementation even if it's far from "state of art", but a little too high for a mobile device screen.
Since the "header" part doesn't really matter to anyone, everyone wants to immediately pan / scroll down a little when viewing the page on a mobile device (or, broadly speaking, on a viewport shorter than the page fixed height).
Is there some HTML or JS magic I can do to tell the browser to start displaying the page already-scrolled-down X pixels?
You can try something like links and anchors.
http://www.yourdomain.com/main.html#bottom
If you're using jQuery, you could try scrollTo. You'll need to work out where on the page your target is, though...
Anchors is one solution, but the way I find really nice is to use http://archive.plugins.jquery.com/project/LocalScroll. So use can detect User Agent in Javascript and scroll down in proper place using this plugin.
Cheers!
Not sure anchors would work if you are trying to implement this on the homepage.
If the header is completely pointless in mobile browser this you could use html to detect that a mobile browser is being used then from this load CSS with the header hidden, or load it at the bottom perhaps. If this sounds like a viable option I can post examples.