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
Related
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 ;-)
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 :-)
For example if I am developing an web application for iPhone, Blackberry mobiles. I will try to design content as per the device screen. If I open the same website in Tablets, screen size will be different and content will be expanded to screen width because it is liquid layout. This is what I am wondering. If I design a button using jQuery mobile, it will occupy the total width of the screen(Although we can change, this is not my case). But in tablet PC it will be expanded to total width of the screen, it does not look good. Is not it? So, here my question is What are things does jQuery mobile developer should take care of. And Is it necessary to develop website for different screen resolutions...?
If you are using Jquery mobile latest version.It supports the responsive web designs.
There are certain specifications for header,content,footer of the web pages in jquery mobile.
Go along with that.Also the grid layout displays the web page neatly in cross devices.
Developers need to customize the desired design accordingly with jquery mobile css.
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.