I used to be a Flash developer with some knowledge on HTML. I am jumping into the mobile website development now. I really got confused where to start. I did went to Safari web developer resources but it does not seem to be a good place to start. I am essentially looking for a place to start (e.g., book, tutorial website, etc). Thanks in advance
for mobile website development i think thats the wrong road...(kinda)
you should google up css media types which will change your page on the fly from screen to mobile sizes depending on what you set.
for example
#media screen, projection, tv {
#foo { css here for mobile constraints }
}
or declare a seperate mobile stylesheet in the head area...kinda like this
<link href="scripts/mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="scripts/mobile.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 480px)" >
and if your COMPLETELY lost...go to lynda.com and search there..they have alot of decent stuff(some disagree) for begginers.
or go here for begginer stuff http://teamtreehouse.com/
and like always..if you need to SEE it in action, youtube it lol.
good luck
Related
I'm building a site in ASP.Net which has a responsive layout using the following:
<meta name="viewport" content="width=device-width; initial-scale=1"/>
on the aspx page, and in my styles.css using
#media screen and (min-width: 319px) {
#divname {color:#808080}
}
This is all working great when I test the site locally when I use "Start Debugging". However, when I upload the site to my Windows 2008 R2 server with IIS7 all browsers do not respond to the viewport size, and styles inside the #media screen... are ignored.
Is there something special I need to make this work on my server?
My first suspicion is that it's something unrelated to your server.
Doublecheck that there isn't a caching issue with any old files
Make sure your browser hasn't cached old files
Use devtools and check you don't have any 404s
Check you don't have any CSS errors: http://jigsaw.w3.org/css-validator/
Good luck!
The solution was removing my site from my IE Browser Compatibility View.
I'm trying to make a website responsive and looking good on smartphones and tablets.
Here's a link to this website: http://fineart.d.dev.vendo.no/
The problem is that my mobile devices don't see a media queries I wrote specifically for them.
I know that this question is really often asked here on Stackoverflow but I didn't found any solution for this problem. Here's my code:
#media only screen and (max-width: 768px) {
/* Some mobile-specific code goes here */
}
I tried to use max-device-width and added
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
to the section but without success :(
Could you please help me to solve this issue? I realy stuck with it and need your help.
Thank you in advance!
I'm not seeing the viewport meta tag in the head of the page -- am I missing something?
I would recommend using this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Having "maximum-scale=1" will prevent users from scrolling, which is commonly seen as an accessibility problem. Let a user zoom if they need to.
As for the media queries, I looked at your CSS, but I didn't actually see any media queries present. Are you sure that the CSS file with those queries loading?
Is there any specific html tag or meta tag that tells a web page is designed for mobile devices? I have created a mobile sitemap linking the mobile web pages, but I am afraid of search engines don't identify these webpages as mobile versions.
I Recommend using Media Queries in your CSS and focusing on developing your mobile website first if you're going to use this technique.
Basic Example
#media only screen and (min-width: 480px){
//insert styles SPEFIC to resolutions greater than 480px wide
}
Regarding the comment:
//default CSS
.hidden-for-mobile{ display: none;}
//overrides the hidden style, and displays your element in larger resolution browsers.
#media only screen and (min-width: 480px){
display: inline; //or block or whatever you want
}
there may very well be a different or better way to implement this, but the point is...
If you are trying to control the look/feel of your website, do your best to keep it in the stylesheets
pro tip: You will want to use em / % based widths to ensure your site responds to your users browsers properly
Check out a working example with HTML5 Boiler plate here.
And Media query browser support list here
Additionally, if you are concerned about tracking your user base, Google Analytics can do that for you. You can break down your traffic however you'd like.
No, there is not. You can use JavaScript to detect mobile browsers, and direct users to special mobile versions of your webpages, but there is nothing that says for a specific page this is for a mobile browser.
If you are concerned that you will be presenting duplicate content to Google, block the spidering of your mobile site via a robots.txt file, then ensure that mobile users are always redirected to the correct mobile site.
If you're concerned about styles and things then see How to setup HTML for mobile Devices with an header-image, that takes whole width of browser?
Else, if you don't want search engines linking to m.domain.com instead of domain.com (or whatever) then I'd think about doing some PHP header detection to redirect to the main site.
To ensure they're not crawled at all so will never show in search results, add
<meta name="robots" content="noindex" />
I´m using a different stylesheet for smartphones and smaller screensizes using <link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/smartphones.css" />
The thing is that in my browser it works ok (when I make the window smaller, or when I use a site that emulates some smaller devices), but it won´t work when I try to access my site using my phone.
I´ve tried with an HTC Wildfire (240x320 px) and I´ve set my smartphones.css stylesheet to get called if the screen is smaller than 700px.
I´ve deleted the cache, and I´ve even tried with a couple of other phones... it still appears the complete, normal, big sized window version of my site.
Any thoughts on what could be wrong?
The site is liganet.net
Thanks!!
It might be that your smartphone is not telling your website that it's screensize is small. It happens with smartphones sometimes. My HTC Wildfire scrolls the window and keeps it big, instead of telling the website that it should be handed a smaller version.
Maybe you should check for HTTP headers for User-Agent instead of relying on screen size for this.
hey just add this in tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and it will work.
I have a main site and a mobile site, and am looking at having Apache redirect users based on their reported user-agent as the next step up in providing a better mobile experience. E.g. a user who visits http://jonathanscorner.com/spectacles/ is redirected to http://jonathanscorner.mobi/?url=/spectacles/. At present what I have tried in my httpd.conf does not seem to have effect on my iPhone; what I had tried was:
RewriteCond %{HTTP_USER_AGENT} (andriod|avantgo|blackberry|blazer|elaine
|hiptop|iphone|ipod|kindle|midp|mmp|mobile|nokia|o2|opera.mini|opera.mobile|palm
|pda|plucker|pocket|psp|smartphone|symbian|treo|up.browser|up.link|vodaphone|wap
|windows.ce;.iemobile;|windows.ce;.ppc;|windows.ce;.smartphone;|ziino) [NC]
RewriteRule (.*) http://jonathanscorner.mobi/?url=$1 [R=302,L]
with an eye to changing to a 301 when things were working nicely.
The immediate question I have is why this is not redirecting http://jonathanscorner.com/spectacles/ when I visit with my iPhone (and what I can do to easily bounce mobile phone users to the mobile site); my broader question is what small steps I can take to improve visiting experience for mobile users. The main site has some real artistry in a graphic-heavy design; the mobile site is meant to provide a light touch with e.g. one small network hit per page.
Looks like your user-agent strings are missing something, maybe these links could help you.
http://www.mattcutts.com/blog/iphone-user-agent/
http://www.gtrifonov.com/blog/2009/04/08/IPhone_User_Agent_Strings.aspx
http://deviceatlas.com/
This page got the best base of mobile user agents on the net. It also has APIs to work with the different UAs. Maybe it's of some use for you?
BTW; the developer version is free, but if you are serious about it, the small fee for the professional version should be well worth it.
After looking around, automagically adapting user-agent strings from WURFL and seeing redirection activate for FF, I opted for something with a little less magic and danger of bouncing a desktop user to the mobile site.
You can see the result at http://JonathansCorner.com/ on the home page: just a link at the top of the page that says "Mobile-friendly site" and shows up on most mobile usage but not most desktop usage. This is nowhere near perfect, but it is a modest improvement. (And, AFAICT, it doesn't have stuff that search engine spiders will interpret as text shown to search engines but hidden from regular users, which is penalized as blackhat SEO.)
How I did it: Following http://www.alistapart.com/articles/return-of-the-mobile-stylesheet, I set my main stylesheet to not display divs of type mobile_notice. This is countermanded in a mobile stylesheet that catches iPhones. From the page header:
<pre>
<link rel="stylesheet" href="/include/style.cgi" type="text/css" />
<link rel="stylesheet" href="/include/mobile.css" type="text/css"
media="handheld" />
<link rel="stylesheet" href="/include/mobile.css" type="text/css"
media="only screen and (max-device width: 480px)" />
</pre>
Most of the browsers that don't use JavaScript are not wizards using NoScript or the like; they are less capable mobile browsers, probably the ones which need the simplified mobile site the most:
<pre>
<noscript><h1><a href="http://JonathansCorner.mobi/">Mobile-friendly
version</a></h1></noscript>
</pre>
And, without search-engine-penalized text that appears to be spider food hidden from the general public, I add a nice, deprecated document.write() so phones with more capable browsers will see a div that displays on mobile phones only.
<pre>
<script>
document.write("<div class='mobile_notice'><h1><a href='http://JonathansCorner.mobi/'>Mobile-friendly version</a></h1></div>");
</script>
</pre>
Net effect? A modest improvement; on mobile devices there is an invitation to use the mobile site, but visitors can stay on the full web main site if the want. And it avoids stuff that is penalized by search engines.
There is room for improvement--in particular, this does nothing for visitors who enter someplace else than the home page and don't stay around long enough to see this invitation. But I think it's a real improvement.