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.
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
How to make a website layout and website content fix when the size of our monitor changes???Just like from 15" monitor change to 21" monitor...all of the content in website doesn't change.
Sometimes when we see our website in another laptop with different monitor size, the content of the website fall apart.
I make an application in which I use div tag but one problem is that in other or big resolution monitors it shows different view and some other monitors show another view of my Website. So how can I fix the view for all the monitor resolution.
I think media queries sound like they could be your saviour. You can use them to create a responsive site - from mobile to tablet to desktop etc. With media queries you can target different resolutions and fix/sort/adapt your design using CSS to make the best viewing experience for the user. This approach would be called Responsive Web Design, which is quite the buzzword(s) at the moment.
Some quick links for info:
Link 1
Link 2
If you feel like buying a book/e-book, I would recommend:
Responsive Web Design
Well come to the world of responsive web design, Your perfect solution lies in here
You need to explore Media Queries, Responsive Images as well.
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.
My apologies for a more "theoretical" question, though I suppose this is more of a "state-of-the-industry" question: I'm curious about the options available for building a website meant to target multiple platforms (desktop browsers + touchscreen devices, like tablets and smartphones).
Technologies like CSS3 Media Queries give us the ability to format our content based on screen size (among other things), which is great - but what about other functionality? For instance, touch events - these can still get very sticky depending on what device you're targeting, etc. So is it possible to build one site to target all of these platforms? Or is it still necessary/better to use device detection scripts to redirect to versions of the site meant for touchscreens (Apple-devices or otherwise)? Or perhaps, does it depend on what you want to do? Is there a line drawn that, once crossed, would require a separate version of a site to be made? Anyone care to share their experiences?
It all depends on how complex your website features will and and how they differentiate from the offline or online version.
Sometimes it's better to make a totally different version of your website and redirect to it, sometimes, a few touchevents calls on the page will not make any different for desktop users, while mobile will see something different.
One good case to look at is the WP-Touch plugin for Wordpress. While you have a version of wordpress for regular browsers, it tweaks PHP into delivering a totally different and mobile experience for the mobile user.
If you have the patience, resources and time to make a proper mobile website from your regular one, do it! If you don't, a different stylesheet and some touch events properly coded can seal the deal
I'm building a small site for a company, and would like to build a version optimised for smartphones with full internet browsers (iPhone/Android etc).
I'm leaning towards media queries, because this is supported by webkit which most of these seem to use.
Is this the best? If so, what media query would be the best?
I'm leaning towards:
#media (max-device-width: 480px)
If your site can adjust everything you need via CSS you should be good.
Keep in mind the things that differ in the mobile web:
Overall width/height is much smaller
Font-sizes are typically made bigger for readability
Flash isn't supported across many devices (cough iphone)
Strip anything that isn't needed don't waste bandwidth on things mobile users don't care about
add mobile-friendly attributes to phone #'s for easy dialing
That said, once you get into it you may find that you really want/need to provide a different "View" for the mobile users... e.g. redirecting them from example.com to m.example.com and altering the content on the page dramatically. If you are using an MVC-like framework you should be able to make a set of simplified views for your pages that are optimized for mobile devices.
Example sites (Desktop vs. Mobile vs. Touch-optimized)
Digg: Full | Mobile
Yahoo: Full | Mobile
Facebook: Full | Mobile | Touch
For touch phones, create a jQTouch version.
For keyboard phones just make a stylesheet optimized for small screens.
For the iPhone and Android, I wouldn’t bother as they both have fully functioning web broswers. (Unless the site is Flash, iPhone only.)
You should be able to target any device you want with a custom CSS file, for stuff like a Blackberry etc.