if we had a responsive web site with HTML, Css and Nodejs for it's back-end, can we make it to act like PWA application?
- I know the difference will the Service-worker file, but i wanna to find out is it the exact difference?
Here is the difference between PWA(Progressive Web Application) and RWD(Responsive Web Design):
PWA
Users access the website through any browser, and on a supported
browser (Chrome, Firefox, Safari, and even Edge!) it asks the user if
they want to install the web app to their home screen. This lets users
download and the store the website on their devices (which then gets
updated with Service Workers in the background).
RWD
Responsive web design (RWD) basically refers to the practice of
designing a website that can be accessed with any technology you might
use to build a site. RWD allows the website to be fully functional
(and look good) no matter what size screen the user has in front of
them. It has been around since 2001, when Audi launched the first
documented responsive site.
Therefore, PWAs and RWD are not two independent ways to create a website — in fact, PWAs will almost certainly utilize RWD.
Here's some tips:
The best solution is to choose the best solution for your particular site. If you’re looking to maximize those app-like features (like easy home screen app access, offline use, and high-quality, full screen functionality), you may want to choose a PWA.
If you’re looking to maximize site speed and accessibility for the most users, RWD might be the better choice.
If you're asking if you can make a PWA without a service worker then i believe you can't since it (service worker) and the manifest.json file are both required to save an application to the homescreen.
from the google documentation:
In order for a user to be able to install your Progressive Web App, it needs to meet the following criteria:
The web app is not already installed.
and prefer_related_applications is not true.
Meets a user engagement heuristic (currently, the user has interacted with the domain for at least 30 seconds)
Includes a web app manifest that includes:
short_name or name
icons must include a 192px and a 512px sized icons
start_url
display must be one of: fullscreen, standalone, or minimal-ui
Served over HTTPS (required for service workers)
Has registered a service worker with a fetch event handler
The Kindle Fire browser has a Desktop or Mobile view mode setting, and the 3 choices are:
Automatic: Optimize for each website
Desktop: Optimize for desktop view
Mobile: Optimize for mobile view
My question is, when it's set to Automatic, what exactly is it looking for/keying off of on each website, to decide if it's a desktop optimized site or a mobile optimized site. I'm asking because I'd like to force it into one mode if a user has their Kindle set to Automatic.
Don't assume automatic is per-request. As you can imagine, Silk can figure out the most popular sites like every other mobile device manufacturer does. Then in the background Silk does A/B testing in order of the most popular sites to see if there is a difference. If there is, then the Silk team uses some proprietary techniques to decide which one is better for the Fire. For example, if the desktop site is full of Flash, then mobile is the obvious better choice. If the mobile site is less functional than the desktop site and the desktop site looks fine, then (based on judgement) the desktop site is better.
There is nothing you can do as a developer to force one or the other because, as you can imagine, that would allow developers to override what should be a user setting.
So, my best advice is to make your site like normal. If you want Fire users to use the desktop site then provide that behavior by sniffing out user-agent strings.
Does that provide clarity?
Many of the web sites have mobile compliant pages for mobile browsers. We have a few URLs and we want to know whether the pages pointed to by these URLs have mobile compliant pages. So opened all these URLs in a browser on a mobile and checked whether the browser is loading a huge page or small mobile friendly page. Is this the correct way of checking or are there better ways of doing it?
Use any smartphone simulators for iphone http://www.testiphone.com/
I am developing a site that is tested only in Firefox and IE. Now I need to make the site accessible from mobile also.
So I need to know whether I need to calculate the time needed to shift the site. Is this created as a new application or the same application is modified?
When accessing stackoverflow.com from my mobile the design is entire changed. How is this done? Is it a separate application?
Thanks
Whether or not you need to create a new application for mobile depends on the site you have. The website at my workplace could not possibly fit on a mobile phone screen (too many frames), but other sites that have a more adjustment-friendly layout might just need a little tweak.
I would test your site on a mobile browser emulator, there are a bunch of them listed on this site.
Also, you might consider switching your firefox's user agent (here) so you can browse popular site's mobile versions, along with the source they used to lay it out.
Usually different CSS templates chosen using UA string matching. My phone has a fairly fully enabled web browser on it, so I get the whole of stackoverflow the same.
Some phone browser may also "mobile optimise" the layout, or in the case of opera mini, it does it on opera's proxy server and then sends modified data to the phone.
Javascript support is more of a problem, expect it to be minimal in most cases, although it is getting better.
How can i start the development of a site that can be browse from mobile phones? For example, if you browse Gmail site from an iPhone the site looks different from the normal site. You have to design two differents sites to do this? How can I know if the site is accessed by a mobile browser?
You don't HAVE to design two different sites, but you probably want to if it's important to let mobile users access your site.
There are a few ways to deal with this problem, each with pros and cons. I'm assuming that your site has its information in a database, and publishes that data using a set of templates? (Like a Ruby on Rails or Django site; a PHP site; a blog; etc.) If you've hand-coded a bunch of static HTML pages, this is going to be way more labor intensive for you.
1: Same HTML, different stylesheets for SCREEN and MOBILE
The idea: You deliver the same HTML structure to all requests. You create a stylesheet for SCREEN and one for MOBILE.
Good: For you, the programmer. It's easier for you to maintain 2 stylesheets than it is to maintain 2 totally separate template sites.
Bad: For your users. A site that's easy to use on a mobile device usually is inefficient for a normal browser; and sites optimized for a desktop / laptop often fail miserably on a mobile device. Obviously it depends on how you code your pages, but in most cases, pushing your normal site to a mobile browser will be bad for your users. (See http://www.useit.com/alertbox/mobile-usability.html for a summary of Jakob Nielsen's recent usability research on mobile sites.)
2: Maintain separate sites
(Gmail maintains even more than 2 systems! They basically have different container applications / templates that process the same data: the full AJAX browser version; the plain HTML browser version; a basic mobile version; a native Blackberry application; and a native iPhone application.)
This is the emerging standard for sites that really care about having both a mobile and desktop presence. It's more work for you, but in general it's much better for your users.
On the upside, you can probably create one stripped down pure HTML site that works for mobile and that acts as a fallback for the rare web user who doesn't have javascript, or who has major accessibility issues that prevent them from using the "full" site.
Also, depending on your user base: in the US, people generally have access to a desktop / laptop, and use their mobile devices for auxiliary access. For example, I book my plane tickets and rental car using my desktop computer, but I want to look up my reservation code on my mobile. In many cases, you can get away with limiting the functionality that you offer on the mobile site, and require the full computer to perform uncommon use cases.
The basic procedure:
Design & build UIs for mobile and screen.
Launch the sites at two different URLs; the emerging convention is www.yoursite.com for the desktop version, and m.yoursite.com for the mobile version. (This allows users to browse directly to m.yoursite.com if they know of the convention.)
On www.yoursite.com, sniff the user agent and test to see if the user's browser is mobile. If so, direct the user to m.yoursite.com.
There are sniffers written in various server languages (PHP, Perl, whatever) that you can probably use. Check the licenses. Here's an example of a sniffer written in php.
From Wikipedia's article on user agent sniffing: "Websites specifically targeted towards mobile phones, like NTT DoCoMo's I-Mode or Vodafone's Vodafone Live! portals, often rely heavily on user agent sniffing, since mobile browsers often differ greatly from each other. Many developments in mobile browsing have been made in the last few years, while many older phones that do not possess these new technologies are still heavily used. Therefore, mobile webportals will often generate completely different markup code depending on the mobile phone used to browse them. These differences can be small (e.g. resizing of certain images to fit smaller screens), or quite extensive (e.g. rendering of the page in WML instead of XHTML)."
On m.yoursite.com, provide a link back to www.yoursite.com. Users who click on this link should NOT be redirected back to the mobile site, and how you accomplish this depends on your implementation.
You may want to follow Quirksmode for his emerging articles about mobile testing.
3: Templates output different data chunks depending on the user-agent, and maintain separate stylesheets
Like (2), this requires you to sniff the user agent. Unlike (2), you're still using all the same page logic and don't have to maintain two separate sites. This might be okay if you're just dealing with a blog or website that's mostly about reading data.
In your template code, you can say things like
if( $useragentType != mobile ) {
echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}
This lets you mostly maintain one set of template files. You can also streamline the pages that you're sending to your mobile users, so they don't get a big bloated page when they just wanted to read your blog post or whatever.
The majority of mobile devices these days support "mobile stylesheets" which are simply alternate stylesheets to display things simpler. You can add a mobile stylesheet to your site in the normal way and include the media="handheld" attribute:
<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />
Then those styles will apply to mobiles.
The only problem with this method is if your HTML is bulky, it may take a while for the page to load since most mobile browsers are slower (except Opera Mini). That's why the bigger sites like flickr and digg use separate sites.
Additional notes:
Bulky HTML doesn't affect Opera Mini as much because it uses a proxy which does the rendering externally then sends a special "image" to the device.
Use simple, clean HTML then you can send the same to normal browsers and mobile devices
You'll have to check on the combinations of stylesheets with media attributes. IIRC adding the code above will make browsers ignore the first stylesheet. If you add media="all" to the first one, both will be used (and you can thus override the original styles rather than start afresh).
For checking how a weppage looks in a mobile Browser use Opera Mini Emulator
Check out the WURFL project. Its intention is to help developers target multiple phone browsers, and started way back before there was Mobile Safari, back in the days of HDML, WAP and XHTML-MP. It's up-to-date however, storing capabilities of modern devices such as iPhone. It has data on over 400 devices, and has libraries in Java, PHP, Perl, Ruby, Python, .NET, C++. Depending on how broad you want to target your mobile app it's something to look at. Here's a list of sites that use WURFL.
Another related project written by Luca Passani (the co-founder and maintainer of WURFL) is Switcher. You can use this to automatically redirect to the mobile version of your site.
Keep it simple, think opera mini and you will get it right.
(iPhone has more off a normal browser...)
Focus on content
Avoid plugins
Follow the web standards
Separate content from layout/design, use css as much as posible.
Use text and pictures.
Add the rest of the bells and whistles if you must, but make sure the the site:s content is always available even when the bells and whistles are turned off.
If you can browse the page with a simple browser like lynx and normal browser like firefox then you are on the right track.
For more info feel free to visit the any browser campaign
Edit: In case it is not obvious you work with different css for different types of browsers, but always use the same content.
Visit the css zen garden for a nice demo.
Update:
Adding a link to css media types, and as stated by others it is the handheld option that is interesting.
http://www.w3.org/TR/CSS21/media.html
You have to design two differents sites to do this?
Yes
How can I know if the site is accessed by a mobile browser?
Your programming language has probably some way of looking through the client's information. PHP, for example, has a superglobal variable $_SERVER that has all kinds of information of both the serving server, and the visiting client. In this case, you would be interested in the value of $_SERVER['HTTP_USER_AGENT'], which would give the following result, should I visit a page:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16
This tells you that I'm running Mac OS X 10.5.6, using Safari 4.0. There are known keywords for various mobile browsers. One version of iPhone's browser, for example, has the following user agent:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
the "iPhone" already gives it away, but is further confirmed by the keywords "Mobile" and "Safari"
Most sites have a slightly different sub domain for mobile sites (most use "m"). e.g. flickr uses m.flickr.com
(there is a recommendation to use the .mobi TLD but I've never seen that used)
Make the design super simple, don't use too many graphics, where you need to keep them as small as possible.
This might be helpful for the design.
I would probably construct a different set of pages for mobile users, making use of the same business objects etc. as you're using for the main site.
If the differences between the design of the two sights isn't to great you might be able to get a way with just serving separate CSS files?
Your site should limiited to the mobile phone which can support on maximum requirements. you can not even entertain all the mobile phone.
Your web site should have different set of css style, and HTTP AGENT must check the client type according to the request Css selection should take place .