I'm just reading up on how to develop sites with responsive layouts. I think I've grasped the idea and can now style content differently, depending on browser dimensions.
However I've also looked into Jquery mobile and I like the UI that they use.
My question is, is it possible to combine the two? ie. Could I have a web page that renders normally when viewed on a pc/mac, but when the browser width drops sub 320px (for example), could I switch over to using Jquery mobile?
I thought this'd be possible by including the jquery mobile scripts in my page, along with the 'data role' attributes, but only including the jquery mobile stylesheet if the browser is a particular size, ie:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
Is this at all possible? I can't tell whether I'm trying to use Jquery mobile for something it's not designed to deal with? Should I just have an entirely separate site ie. http://m.mysite.com that has standalone mobile content? Or is it possible to have an adaptive website?
Thanks!
Yes jQM Supports Media queries:
http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html (Grade A)
http://jquerymobile.com/test/docs/api/mediahelpers.html
http://jquerymobile.com/gbs/
that is a very interesting question...
The answer depends on factors like how differnt the 2 designs are like one below 320px and other above that..
If the difference is huge, having a separate mobile website is a good idea..
But if the difference is minimal, you can just handle that with the CSS Media Queries.
You can combine the CSS Media Queries with Responsive Web Design to handle different sized screens..
The question was not really answered as it was asked.
You cannot use JQM only on the mobile site and not on the desktop verion using only CSS media queries. You'd have to do completely separate sites and do a redirect.
A possibly better option is to use JQM on both mobile and desktop version, in which case CSS media queries work perfectly. The problem with doing that is it limits both how you can use JQM and how you design your site. You really can't take an existing modern desktop design and make it JQM.
The JQM demo itself uses media queries to turn it into a two column layout on desktop and tablet sized browsers, and single column on phones. Issues with doing it that way: the entire page acts like a page, meaning divs such as side menus transition and reload with a new page (which is why they only use the fade transition). Normal AJAX loading of content that doesn't involve the whole page will need to either be made to involve the whole page, or done custom outside the normal JQM way of doing things. Might not be too hard in some cases but it will up the JS code and make certain applications much more complicated. I can also see the CSS getting quickly out of hand for designs that are more complicated than the JQM demo.
Related
I'm making a website and want the font size to be readable on mobile, desktop, and also when printed.
I find the default font size on my desktop looks good on desktop, but is way too small in mobile (and often I notice default fonts are way too big when printed).
What's the best practice for setting a font size that is legible on mobile, desktop and print?
Generally speaking you can accomplish this one of several ways. Two concepts that come to mind would be to have a stylesheet that is for web which would control your desktop, tablet and mobile styling. You can then have a separate stylesheet that targets print which is a less complicated stylesheet. You can also use media queries to target media type also. A reference for how to accomplish this can be reference by visiting https://www.w3schools.com/css/css3_mediaqueries.asp
I am buillding a website which looks great on a desktop however when i view it on a mobile it doesnt really work. I was wondering how I could set up a method/system which would automatically load the mobile site when being viewed on a device. Is there a way to do this? I have no problem with building 2 different sites but I would just like it to be automatic.
If you take a look you will see what I mean -
redchevron.co.uk
Thanks
As a general rule, you shouldn't build two separate sites if you can avoid it. The general best practice is to use responsive design techniques to build a single site that automatically adapts its appearance and behaviour to suit different devices.
To automatically adapt the layout and styling of your site for devices, use CSS Media Queries. That's a big subject - so here's some places to start your research:
Beginners guide to responsive web design
Media queries for standard devices
Mobile first responsive design
In short - Media Queries allow browsers to use styles (and ignore others), depending on properties of the device displaying the site. For mobile, the most common technique is to set up a media query for screens smaller than x pixels wide, and include your mobile styles within it.
To adjust behaviour for different devices, you can use javascript to detect various attributes of the user's device (is it a touch device, for example), and adjust to suit. It's worth noting though, that your site's functionality should work without javascript - it's important to create a solid, HTML only site as the foundation for whatever other work you do.
I have a website for my business coded entirely in HTML. No CSS at all. The problem is that every page except my index.html home page is scaling the text (on android) and reflowing it so that it is a readable size on the page.
So my question is: how would I go about making my website display properly on mobile devices using only HTML?
Have you evaluated if using a viewport meta tag would suffice for your needs ?
https://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
I believe chrome supports the viewport tag as well.
It's not possible to build a responsive website using only HTML. You need things like CSS and jQuery to make it responsive.
If you post your code, I will give you a few examples on incorporating more of a responsive design.
I want to create a website with responsive design. Now I would not only provide different CSS files for different resolutions. Ideally i will also provide different css files for different input devices. For example: Link should be shown larger for touchscreens, as for devices with mouse.
I can detect resolutions with CSS media querys, is there a way to detect touchscreens or general the type of input device?
You can use a library like modernizr to detect features (like touch) and then apply styles based on that. Check it out here:
http://modernizr.com
I'm embarking on my first mobile site. Its a simple one and should be easy enough but I do have some questions:
Please answer any or all q's you can!
1) How do I tell the site to serve the "styles_mobile.css" sheet to mobile traffic? Is there a most commonly used piece of code for this?
2) I have an index page and am creating a new mobile one: "/index_mobile.htm" is that "wrong". Should the mobile page be it's own entity (e.g. /mobile.htm) or based of the existing index page? How do I redirect it? How do I create the address "m.mywebsiteaddress.com"
3) Currently I am making edits on my laptop and then to see what they look like am having to upload them to my ISP to see the effects of my edits on my iphone - how do I do this straight from my Mac?
4) s there a standard structure wrt html elements? E.g. a standard doc has html, head and body elements. HTML5 now has header, nav and footer elements - are there any mobi specific ones I should be aware off?
That's all for now but I can see myself adding to this over the next few days. Any pointers or ad hoc advice welcome
My experience with mobile is that you need to think about it as being a different site altogether. Different html, different css, different js. Many implementations i've seen just tag this to the address m.site.com or just www.site.com/m/. The key element is to think about them separately.
About your questions:
There various frameworks that help discriminate traffic depending on the device. The trick is to check for the user agent sent by the browser to do the discrimination. Depending on the user agent you would send traffic to each of the two sites you've created. Spring has some basic functionality to do this spring-mobile.
This goes back to the first part of my answer. I usually create a directory called /m containing the html, css, and js under it. You can use an http redirect, based on the user agent, to send the traffic to each site. As for creating the m.site.com, it depends on what you have setup and wether you can create subdomains.
You can publish directly on your mac, depending on what software you are using. In your mac you can go to system preferences/sharing and enable web sharing. This will actually activate an apache server in your mac. If you put your files in /Users/yourid/Sites/project you can then access that by hitting http://yourlocalip/~yourid/project. I'm doing this by memory so I might be off here or there.
I would suggest you take a look at jquery + jquerymobile for your mobile site. It will take away a lot of grief in the process.
1) How do I tell the site to serve the "styles_mobile.css" sheet to mobile traffic? Is there a most commonly used piece of code for this?
You can use link stylesheets that have media queries in them:
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">
2) I have an index page and am creating a new mobile one: "/index_mobile.htm" is that "wrong". Should the mobile page be it's own entity (e.g. /mobile.htm) or based of the existing index page? How do I redirect it? How do I create the address "m.mywebsiteaddress.com"
The other option is to serve one page (index.html) and just start stacking floated elements on top of one another as the viewing area shrinks. View http://www.html5rocks.com/en/ in both your desktop and on your phone. Or, if your phone is not near you at the moment, simply resize your browser and watch as the site starts getting rid of multiple columns and creates a one-column view. They are only serving one file (i.e. index.html) and not redirecting mobile users to a mobile page (i.e. mobile.html).
3) Currently I am making edits on my laptop and then to see what they look like am having to upload them to my ISP to see the effects of my edits on my iphone - how do I do this straight from my Mac?
Install Apache Server on your Mac, do a port forward on the proper ports (ports 80 and 8080 IIRC), and you'll be able to view the pages on your phone without having to constantly upload the files to an ISP. The URL will be (http://xx.xxx.xx.xx) or something similar to it.
4) s there a standard structure wrt html elements? E.g. a standard doc has html, head and body elements. HTML5 now has header, nav and footer elements - are there any mobi specific ones I should be aware off?
No, mobile browsers render the same HTML tags as desktop browsers. The one thing you should consider doing is using the HTML5 doctype (which mobile browsers support) because I've had a LOT of trouble getting "mobified" websites using XHTML or HTML4 doctypes to look OK in mobile browsers even when using the viewport meta tag as the sites would look extremely zoomed out.
Here's by far the best resource I've stumbled upon in regards to mobile web development.
http://www.html5rocks.com/en/mobile/mobifying/
The previous two answers were good, but I don't wholly agree with them. They are too complicated.
Use CSS media queries to style your content differently for different screen widths and/or orientations.
Don't bother. For maintainability, you should just create one site which is styled differently with media queries.
Again, media queries. Instead of using (max-device-width: 480px) for mobiles, you could use (max-width) and develop/debug directly in the browser. Otherwise, if you're on OS X, the iOS Simulator that comes with Xcode works nicely (includes iPads too!)
No. It's just a webpage as normal.
As a side note, I don't think you should take the advice of loading in another stylesheet for mobile devices. Loading another stylesheet means one extra HTTP request. You can keep all of your media query styles in your main stylesheet.
To use media queries inside your "regular" stylesheet (i.e. desktop stylesheet), do the following:
/* desktop */
body { background: #FFFFFF; }
header { width: 100%; }
/* queries for devices with a max viewing area of 480px */
#media only screen and (max-width: 480px) {
body { background: #444444; }
}
The above CSS can be tested in a desktop browser. For instance, put the styles above into a style tag and view the page in a browser in a width greater than 480px (a maximized window will do). Then, resize the window width until you see the background change into a dark color (which will happen once the window width is less than 480px).