I have an ASP.NET Web Forms Website that has css code to detect whether or not the screen width is less than 420 pixels. The client now wants this version (under 420 pixels) to function very differently than the full screen site, so I figured I could redirect to a mobile version of the website by detecting on the server side how wide the browser is. I am using 51Degrees to check Request.Browser.ScreenPixelsWidth, but that always returns the same value, even on my phone. Is there a better way to detect this information so that I can load a mobile version of my webpage?
If you want to get device-width, user-agent is not very helpful, because ultimately you need screen resolution and that will be the sole criteria to manage UI. So when more devices will come into market, you need to store their useragent and their dimension, this way, i am saying it is not helpful. And what if user has mobile or tablet, and changes orientation, means dimension just got changed for same user-agent.
So best way would be to go with css media queries to start with. There are lot of CSS to help you out for responsive design , such as bootstrap.
You're mixing two different technologies. For responsive design, you never need to use browser agent sniffing. Use a RWD CSS framework like Bootstrap. With RWD you serve the same content and functionality to ALL devices.
This really sounds like an argument to develop a separate mobile app if there's some part of it that need different functionality. Outside of that, the client is an idiot and it is frequently our job to educate the client ;-)
Related
I am new to html. I'm currently using django to create a website and wondering is there some way that I can preview my website at phone? For instance, if I set my width to be 1000px, how this will behave in a mobile device?
if you are using google chrome, you can inspect the page (CTRL + SHIFT + I ) and then select the device icon in the upper left corner. This option will show you how your website will respond on mobile.
You should build a responsive web application. Responsive Web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.
You can use the Google Chrome dev-tools, but I find them woefully inadequate and often inaccurate. They don't render the site I am currently working on very well.
I would recommend using a tool like Ngrok. It can be used to let you host the development environment on your local machine while easily viewing the site on your mobile device.
First of all, I reccomend using frameworks like Bootstrap which make all your components on your page 100% responsive (components adjust to the display size automatically) if you want them to be.
When your testing your website on your browser, right click anywhere and select "inspect". You will be promted a viewing window where you can select the mobile device of your choice to emulatee your website on it.
See image
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.
If the goal is to develop a web app that will currently be used on desktop computers but eventually will also support mobile devices such as smart phone or pads , what strategies is recommended in organizing the code ? Should there be one set of code for desktop clients and then one set of code for mobile clients ? In the past I have used jquery and jquery ui . How does jquery , jquery ui and jquery mobile fit together in a web app ? What are main differences between developing for non mobile web client and mobile web clients ?
I am using asp.net mvc .
my sponsor prefers a single-page web app . So I am looking into Knockout.js . I am also looking into some widgets set such as
dhtmlx
jqwidgets
Please feel free to comment on my choices.
To keep things simple and short - you should use (or consider using) Responsive Web Design. The main idea is you develop your CSS to handle re-sizing / reorganizing depending on the width of your screen. This allows you to handle situations where the screen is wide enough to be recognized as a Desktop screen while simultaneously being able to adjust to Mobile screen sizes - no matter the device.
Having your CSS adjust the size / position of elements on the page allows you to have one set of code for all users (no separate mobile / desktop sites). You will simply have to spend a little more time and effort designing your website to handle the re-sizing of the page width.
The jquery library works the same on mobile as it does on 'traditional' platforms. There are times when you may want to take advantage of mobile-enhanced versions of various jquery libraries though.
An example: When you have nested links on a navigation menu that comes out when you click on say a category like, "shirts", then a sub-category like, "button-up," then a sub-sub-category like, "blue." On a 'traditional' platform the user can hover their mouse cursor over the elements to expand the nesting - on a mobile platform the user may want to tap each category / sub-category to expand the nested navigation buttons.
This is completely dependent on your website's design - when designing responsive websites, I typically have very little variation in the scripts between views intended for 'mobile' and 'desktop' devices - so development for either does not vary for me, I treat new websites as, "responsive," and design it with the re-sizable browser in mind from the beginning.
Also, for further elaboration of the specifics of the jquery, jquery ui, and jquery mobile libraries, see the link that Tats_innit referenced.
I am looking for a simple way to use transitions you typically see in the native iPhone apps or Android native apps (such as the slider effect, ie. the whole page sliding to the left or the right).
I know those transistions between web pages on my web application are doable with the use of frameworks such as jQuery Mobile, Wink, iUi etc.
Also my application requires a fixed footer and a fixed header with scrollable content. I tried with jQuery Mobile but though the scrolling effect of the content is good, the rendering of the fixed header and footers are not that good.
So I use iScroll 4 instead but I cant use jQuery mobile to do only transistions as the jQuery mobile plays with the DOM etc. which causes some problems within the placement of the divs
Im giving a try with iUI but then again though it seems less 'wide' than jQ mobile, it still is a whole framework for web apps. But Im currently only looking for transitions..
Is there a way to achieve those "full web page" transisitons whitout the use of a javascript framework?
Also those framework such as iUI put all the pages inside one only( jQuery Mobile does not which is great ) separating them inside several divs.. this might be problematic with iScroll i guess?
The finest would be to be able to do those transitions between separate html pages, but I don't know if it's even possible ( I mean whitout the use of AJAX world techniques)
I only target modern devices using webkit (Android, iDevices..)
Thanks a lot for your help
You can have a look at http://maker.github.com/ratchet. It mimics the iPhone behavior quite closely, including all transitions.
forget iScroll for mobile applications. It works well but not for all webkit devices and you will have issues with a good chunk of Android devices. If you want something like a native app you need to go for a container model. A container model is basically having a header and a footer and a dynamic container in the middle. This is used by mobile sites like Twitter and Flikr. The dynamic container you can load either with an iframe or ajax (but personally I would stay away from iframes and mobile anything). Also before using any frameworks out there consider the benefits vs cost (size, future dependency and scalability, overhead parsing the JS... etc) because mobile is not desktop development and many developers seem to forget that fact. I currently work for a major social networking site and we have our own framework with is not a byte more then what we need. We used JQuery in the past but it turned out to be too much bloatwhere for the webkit devices we serve (size + parse time + dependency.. etc) and we ended up killing it.
This sounds a bit too good to be true, so please tell me if it is.
If I have just one single version of a mobile website (no variations for
different devices, just one website for all mobiles), how reliable it is
to detect mobile devices by screen resolution?
And simply serve the mobile version if screen resolution is < than say 400px.
NOTE: My question assumes that javascript is enabled. Also,I'm aware there's
user agent detection, but I'd like to do without it.
Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)
Width seems to be most reliable on window.outerWidth across all OS's.
Read a most excellent analytical report here:
http://www.tripleodeon.com/2011/12/first-understand-your-screen/
You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
There's a detailed article on this subject over at alistapart
Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.
I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test.
I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.
I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.
Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?
It depends on what you want to achieve.
If you design for different screen resolutions regardless of device type then it is fine to use resolution ranges.
If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.
You used a 400px threshold in your example, the Galaxy S8+ reports 412x846 with this code:
console.log("width: " + screen.width + ", height: " + screen.height);
Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.
You may get away with it if you just want it to mostly work or if you want to detect specific phones.
However it is not reliable to use screen resolution alone to detect the device type.