I am a web developer and do not have any experience with developing mobile friendly websites.
When we are developing a mobile friendly website, do we need to create separate files for mobile version? Or can we use same files that we created for desktop version?
I recommend that you use one file set with a responsive design.
there are different ways to do this.
1) You can use bootstrap for that.
2) What I sometime do is that i use the css #media. Take for that a look at this link.
If you are going to develop a big site like flipkart, ebay or facebook, then its better you do separate mobile version, because such type of websites will take more time to load in mobiles. You need to display only relevant content in mobiles.
If its a simple website, better use Bootstrap.
Both you can make one file launch another, or have one big monster file.
How to detect Safari, Chrome, IE, Firefox and Opera browser?
But I think this might be more of what your looking for.
This is how I did it. It could fit only my design. My pages look like a blog page. The DIV floating left is the main content. Then I follow it with small DIV boxes for ads. The main DIV is 40em wide. And has side margins 4em each. That totals 48em = 768 device pixels.
So, I added the following meta instruction to every page:
<meta content="width=768" name="viewport">
That nicely gets the page on the smartphone, except the text is too small. The ads slide down to the bottom. Next, I went to my CSS file. There, I format my regular text with 'para' class:
.para {font-size:1.2em;line-height:140%;font-family:arial,helvetica,sans-serif;color:#333}
#media only screen and (max-width: 768px) {.para{font-size:2em;}}
The upper line is for PCs and the #media one is for phones. Notice that I increased the text size to 2em for the screen just 768px wide.
This all passes Google Mobile Friendly test. You can view-source my web site:
Read source-code of this and test it here.
NOTE: I keep changing my work. This site might be gone in few days.
Good luck.
Related
I am trying to convert my current website to a mobile version. I will be creating different views (I am using codeigniter) but want to make sure the CSS will look perfect on all phones. What are the universal/standard specs for a mobile website?
Also, what language is recommended? I was thinking just changing the CSS to a specific width and redesigning according to that width.
As there is no fixed limit of screen width/height of mobile devices. You must consider using percentage value for sizes. That way your mobile site will be more compatible.
For info on effective mobile websites, ie, what you should include and what not. Take a look here
http://www.qsrweb.com/article/202567/3-tips-for-creating-an-effective-mobile-website
For width related queries, see this,
Mobile version of my website, what design width is optimal?
A quick google search yields the following:
W3C's thoughts: http://www.w3.org/standards/webdesign/mobilweb.html
Smashing Magazine's thoughts (I have enjoyed some of their comparison articles before): http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
You will want your page to be easy on the fingers, keep the text displayed to a minimum at first (i.e. summary + expanding things), and overall run fast. You will probably want to have multiple levels of fallback on things like CSS so that people running a CSS 1/2 browser can still use the website, even though CSS3 browsers may have a better experience.
Your site could also make use of media queries to choose a stylesheet based on the size of the user's screen (there are several standard sizes, especially if you consider the popular devices).
Javascript and other things like that should also work well for fallbacks. Using things like HTML5 canvases and WebSockets and such are good since they can be assisted directly by the mobile device hardware, but your script should handle those things not being available as well.
And, as always, an easy to navigate page goes a long ways just as it does with normal development. If the user can tell just by looking at the page how to use it intuitively (remember, intuitive for you isn't always the same as someone else), then I would think you are on the right track.
There are many takes on designing sites for mobile devices. The most straightforward, is to build an entirely separate user interface, just for the mobile site.
The next method would be to use CSS media-queries. This allows you to re-use your current UI and styling, but you can tailor it's content to specific widths and devices.
Lastly, is fully responsive design. It's rather similar to media queries, except that it uses percentages, instead of absolute pixels. It's the most seamless way, that a standard width-webpage can scale to fit the screen of a smaller mobile device. It can even scale up easily!
Here's a good place to start learning about responsive web design, and how it applies to mobile devices - http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Try scaling the size of your browser while on that site. Notice how the layout changes. That's CSS media queries at work.
hopefully my questions won't be too vague.
I designed a pretty simple website. You can see an image of it >>> here
But now I'm trying to make a mobile version.
However I'm contemplating using a different html for the mobile version since the desktop version has jquery pop-ups (prettyPhoto) and a very large backround that scales, which aren't great on mobile screens.
I'm unsure of how to do that. My first question therefore is:
1.) How do I call a different html for mobile?
Also, for tablets, the website renders pretty well in landscape mode but becomes weird in portrait mode. So my second question is:
2.) Can this different html be called based on width? If so, any ideas how?
So if tablet is viewing website in portrait mode, they get the mobile version, if they are seeing it in landscape mode, they get the desktop version.
I am not sure what you are attempting to do, but from experience as both developer and mobile user, what you propose is not a good idea. Again, since you have not mentioned what you are attempting to do, I am speaking generally. Consistency is very important for UX, and delivering completely different behaviours and looks for orientation does not sound like a good usability. Also, remember that on today's tablets, switching orientations is very easy. Would you load each version on each orientation change? What if the user is on 3G?
But technically, it is possible to load depending on width or orientation. Use AJAX, and load the appropriate content.
In the past, I've created a "global" style sheet that all browsers and devices that support CSS should be able to receive.
The problem with that is that my old Nokia understood background image but the screen was so bad that the background images made the website look awful.
I then started putting any background images inside a CSS file with a media query so that old phones like this wouldn't understand it. However, this creates a lot more work. So I've started putting "global.css" behind a media query. The idea is that if the phone isn't capable of understanding media queries I don't want it to read my style sheet. Older (desktop) versions of IE are still served the CSS using conditional comments.
SO my question is, if a phone doesn't understand the CSS, would it provide its own fall back just like a desktop browser does? So at least a h1 is bigger than h2 etc and the text isn't all lumped in one huge block?
I'm guessing this could be a "It depends" answer but I'd appreciated feedback on this. I don't have my old nokia to hand so can't see what that is doing at the moment.
Many thanks
It does depend on lots of factors, such as vendor and how old the device is. However, in my experience generally they do render h1's bigger than normal text; can't say the same for h2's of further down the h's, though.
Usually for old mobile sites (back when XHTML-MP was the new thing and WML was all the rage) we used to set font sizes with CSS using these font-size values:
xx-small, x-small, small, medium, large, x-large and xx-large
From my experience, I can tell you that only small, medium and large work reliably across most feature phone mobile browsers.
All Nokia browsers (including the old XHTML MP versions) did include a default style sheet. This included basic styling for all the headers, a basic bullet and default bullet margins for lists and a bold and italic style. The various headers were not always that well differentiated but they was enough of a difference that one was discernable from another. The only real gotcha was with italicised text. There was often no italicised font per se so the browser would shift each character's pixels to the right to simulate a slanted font. This often resulted in poor legibility.
I want to know how to design a website. The website is shown normal on the web and mobile, but I need to know which one is better?
Design two different templates (one template for mobile and the other one for a normal monitor).
Check online through the user's device to see if its using a mobile device so I can change the stylesheet.
Is this correct? If there are any ideas, please tell me.
Thanks
I would go for 1. Normally you don't want to show as much content on your mobile website as your "normal" desktop website. But include a link to your normal website from your mobile website.
I would go for one, as axelios suggested, I would include a link.
I, as a user, find extremely annoying websites that refuse to display the full site because they "recognised my browser as a mobile browser". Several newssites do that, which has eventually diminished the number of news I read, and some shops did so, which means I don't visit their sites anymore... so I strongly discourage the second solution.
I host a small web shop for a client who wants it to be easily accessible from mobile devices.
How do I detect if the user is browsing my site from a mobile device?
When I have done that, should I:
Check if the user has mobile device and then forward them to another site?
I think the advantages would be:
I can optimize layout from both sites for screensize
I can use different techniques in the two sites (eg. jquery mobile for mobile)
Use CSS for the different screen sizes => like on tutsplus
I think the advantage would be:
I only need one site but it seems to me heaps of work when talking about a small webshop
Ideally, you should try using jQuery Mobile page structure with your own CSS and JavaScript for non-mobile devices.
You can easily detect user's browser and conditional script includes as per html5 [boilerplate]:3
/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
#media screen and (max-device-width: 480px) {
Main things to consider when aiming at iPhone users:
ensure there's no vital flash objects
on the page as it isn't supported by
many mobile browsers (yet?)
appropriate screen size (using
viewport meta tag)
keeping in mind that there's no mouse
cursors, meaning no
hover/double-clicks are available any
mouse dragging gestures are different
on touch devices
remember all pop-ups are open in new
tabs and won't be seen at the same
time as the main window, use
javascript modal divs as alternative
test all your javascript and css to
ensure everything looks and works the
same (Safari requires -webkit- prefix
for the newest CSS properties)
create a Home screen icon for your
website (a nice thing to have)
most of these things are covered here
take a look at Safari Dev Center for tutorials/videos/coding how to's etc.
There are several options but this is my favorite:
http://code.google.com/p/mobileesp/
Comes with a API in a couple of different languages as well
You don't need jQuery at all if you don't want to use it. We don't. Not that there's anything wrong with that.
Number 2 is the best option. If you create a site with mobile in mind first, it's far, far easier to expand and manipulate for the desktop than trying to shrink things to a mobile screen.
JQuery Mobile is currently in beta 1 right now. Beta 2 will be out within a month. It is fairly stable at the moment and you can gain a lot of knowledge about what is considered "best practice" from them. You can use media queries for screen sizes for different platforms which JQuery Mobile also supports.
http://jquerymobile.com/