<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>tsevdos.com &#187; mobile web design</title>
	<atom:link href="http://www.tsevdos.com/category/mobile-web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tsevdos.com</link>
	<description>Web design, internet news and blogging tips</description>
	<lastBuildDate>Wed, 11 Jan 2012 13:46:55 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Mobile app vs native app</title>
		<link>http://www.tsevdos.com/2011/06/21/mobile-app-vs-native-app/</link>
		<comments>http://www.tsevdos.com/2011/06/21/mobile-app-vs-native-app/#comments</comments>
		<pubDate>Tue, 21 Jun 2011 07:01:51 +0000</pubDate>
		<dc:creator>John Tsevdos</dc:creator>
				<category><![CDATA[mobile web design]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[app]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[native]]></category>
		<category><![CDATA[smartphone]]></category>
		<category><![CDATA[tablet]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.tsevdos.com/?p=846</guid>
		<description><![CDATA[Ο τίτλος θα μπορούσε να είναι και “θέλω να φτιάξω ένα site που να παίζει σε όλους τους browsers, κινητά και tablets που υπάρχουν στην αγορά”. Δυστυχώς όμως μερικά πράγματα δεν γίνονται όσο μαγικά θέλουμε&#8230; Αλλά καλύτερα ας πάρουμε τα πράγματα από την αρχή. Το mobile web έχει μπει για τα καλά στην ζωή μας, μιας και [...]]]></description>
			<content:encoded><![CDATA[<p>Ο τίτλος θα μπορούσε να είναι και “θέλω να φτιάξω ένα site που να παίζει σε όλους τους browsers, κινητά και tablets που υπάρχουν στην αγορά”. Δυστυχώς όμως μερικά πράγματα δεν γίνονται όσο μαγικά θέλουμε&#8230; Αλλά καλύτερα ας πάρουμε τα πράγματα από την αρχή. Το mobile web έχει μπει για τα καλά στην ζωή μας, μιας και μπορούμε πολύ εύκολα είτε με ένα <strong>smartphone</strong> είτε με ένα <strong>tablet</strong> να κάνουμε σχεδόν τα πάντα και μάλιστα ενώ είμαστε μακριά από το γραφείο μας. Η πλειοψηφία των παραπάνω συσκευών λειτουργεί με μόλις 2 λειτουργικά, το <strong>iOS</strong> της Apple που είναι ενσωματωμένο σε όλες τις συσκευές της (iPhone, iPad, κτλ.) και το <strong>Androind OS</strong> το οποίο είναι η πρώτη σοβαρή και open source επιλογή για τους υπόλοιπους κατασκευαστές.</p>
<p>Το πρόβλημα συνήθως ξεκινάει με το πως θα φαίνεται το site μας σε μια τέτοια συσκευή. Για κάποιο περίεργο λόγο, οι περισσότεροι χρήστες/πελάτες είναι αρκετά μπερδεμένοι, μιας και δεν ξέρουν τι λύσεις υπάρχουν (και υπάρχουν λύσεις για όλα τα budgets), ποια είναι τα πλεονεκτήματα και μειονεκτήματα τους, και γενικότερα επικρατεί μια σύγχυση για το θέμα, με αποτέλεσμα να δημιουργούνται προβλήματα και παρεξηγήσεις. Ελπίζω το παρακάτω άρθρο να ξεδιαλύνει κάπως το τοπίο έτσι ώστε να επωφεληθούμε όλοι. Σε αυτό το σημείο θα ήθελα να τονίσω πως <strong>δεν</strong> είμαι κανένας φοβερός mobile guru/expert, και ίσως κάπου κάνω λάθος, γι&#8217; αυτόν τον λόγο όποιος έχει να συμπληρώσει/προσθέσει κάτι, απλά ας μου αφήσει ένα σχόλιο. Έχουμε και λέμε λοιπόν, το site μας μπορεί να εμφανιστεί στο smartphone/tablet μας με δύο τρόπους.</p>
<h2>Web app</h2>
<p>Επιλέγοντας αυτήν την λύση, εννοούμε πως θα χρησιμοποιούμε τον <strong>browser</strong> της συσκευής μας (smartphone/tablet) για να δούμε το site μας. Μια αρκετά απλή λύση μπορεί να είναι η χρήση κάποιων <a title="CSS Queries" href="http://www.w3.org/TR/css3-mediaqueries/">CSS queries</a> (<a title="Responsive Web Design" href="http://www.alistapart.com/articles/responsive-web-design">Responsive Web Design</a>) έτσι ώστε το site μας να φαίνεται λίγο πιο μαζεμένο και optimised στις συσκευές (οθόνες) που έχουμε αποφασίσει να υποστηρίξουμε. Αυτό δεν σημαίνει πως μπορούμε να φτάσουμε μέχρι εκεί. Ανάλογα με τις ανάγκες του project, και φυσικά το budget του, το mobile site μπορεί να γίνει όσο πολύπλοκο θέλουμε, χρησιμοποιώντας όσο καλύτερα γίνεται τις δυνατότητες της συσκευής και του browser που μας παρέχει. Για παράδειγμα η Google (λόγω και του Android), αποφεύγει τις <strong>native</strong> εφαρμογές, προσφέρει όμως σχεδόν σε όλες της τις υπηρεσίες ειδικά διαμορφωμένες web εφαρμογές για κινητά και tablets (μπείτε στο Gmail από τον browser του κινητού σας και θα καταλάβετε τι εννοώ).</p>
<p>Τα <strong>πλεονεκτήματα</strong> μιας <strong>web app</strong> είναι αρκετά. Το πρώτο και σημαντικότερο είναι πως δεν χρειάζεστε κάποιο συγκεκριμένο SDK (όπως πχ. το iOS SDK) για να δημιουργήσετε την web εφαρμογή σας. Μπορείτε να χρησιμοποιήσετε web τεχνολογίες όπως <strong>HTML</strong> (<strong>HTML5</strong> καλύτερα), <strong>CSS </strong>και <strong>Javascript</strong>! Σε αυτό το σημείο αξίζει να σημειώσω πως οι browsers των κινητών/tablet (των σοβαρών κατασκευαστών τουλάχιστον) είναι φοβερά εξελιγμένοι και με πολλά χαρακτηριστικά, πράγμα που σημαίνει πως ήδη υποστηρίζουν πολλά HTML5 και CSS3 καλούδια. Το δεύτερο πλεονέκτημα μιας web app είναι πως, αν είναι καλοσχεδιασμένη φυσικά (βλέπε <a title="Progressive Εnhancement" href="http://en.wikipedia.org/wiki/Progressive_enhancement">Progressive enhancement</a>, <a title="Ρesponsive Web Design" href="http://www.alistapart.com/articles/responsive-web-design">Responsive Web Design</a>, κτλ. κτλ.), μπορεί να καλύψει την πλειοψηφία των συσκευών και των browser που υπάρχουν! Αυτό σημαίνει πως με μόλις μία εφαρμογή μπορεί να καλυφθούν όλα τα κινητά και tablets ανεξαρτήτου κατασκευαστή και λειτουργικού συστήματος. Τέλος ακόμα ένα πλεονέκτημα μπορεί να θεωρηθεί και η ανεξάρτητη διανομή, μιας και στην ουσία η εφαρμογή ζει στο web και όχι σε κάποιο store (o χρήστης απλά συνδέεται με την εφαρμογή χρησιμοποιώντας τον browser του). Χαρακτηριστικό παράδειγμα φοβερής web εφαρμογής που ήθελε να παρακάμψει το γνωστό για την εκκεντρικότητα του <a title="Apple App Store" href="http://www.apple.com/iphone/apps-for-iphone/">Apple App Store</a>, είναι η εφαρμογή της <a title="Financial Times web app" href="http://apps.ft.com/">Financial Times</a>. Ρίξτε οπωσδήποτε μια ματιά από το κινητό σας και δείτε τι φανταστική δουλειά έχουν κάνει&#8230;</p>
<p>Τα <strong>μειονεκτήματα</strong> τώρα (ναι υπάρχουν και αυτά) έχουν να κάνουν κυρίως στο ότι δεν είναι εγγενής (<strong>native</strong>) εφαρμογή (τι έγραψα τώρα!). Οι web εφαρμογές λοιπόν, είναι συνήθως λίγο πιο αργές σε ανταπόκριση, μιας και στέλνουν σε έναν server κάποιο request και περιμένουμε απάντηση, ενώ συνήθως δεν έχουν και την &#8220;γυαλάδα&#8221; του <strong>native user interface</strong>. Επίσης οι web εφαρμογές μπορούν να κάνουν μόνο ότι μπορεί να καταλάβει ο browser της εκάστοτε συσκευής, δεν έχουν με άλλα λόγια πρόσβαση σε πιο advanced χαρακτηριστικά της συσκευής (όπως πχ. camera, GPS, πυξίδα, γυροσκόπιο, κτλ.).</p>
<h2>Native app</h2>
<p>Εγγενείς (<strong>native</strong>) εφαρμογές ονομάζουμε αυτές που τις κατεβάζουμε και της εγκαθιστούμε στην συσκευή μας από κάποιο store (πχ. App Store), είτε δωρεάν, είτε πληρώνοντας κάποιο χρηματικό ποσό. Η κάθε εφαρμογή έχει φτιαχτεί ειδικά για την συγκεκριμένη συσκευή, πράγμα που σημαίνει πως εκμεταλλεύεται πολύ καλά τα χαρακτηριστικά της εκάστοτε συσκευής, αλλά όπως καταλαβαίνεται πρέπει να γράψετε τουλάχιστον 2 διαφορετικές εφαρμογές (και να δουλέψετε με 2 διαφορετικά SDK) έτσι ώστε να δημιουργήσετε εφαρμογές για τα 2 βασικά λειτουργικά των κινητών/tablet (iOS και Android).</p>
<p>Τα <strong>πλεονεκτήματα</strong> και εδώ είναι αρκετά, με πρώτο και σημαντικότερο πως δεν χρειάζεται να είσαι συνδεδεμένος στο internet για να χρησιμοποιήσεις την εφαρμογή (εκτός φυσικά και αν αυτό είναι requirement της ίδιας της εφαρμογής). Το user interface και η απόκρισή είναι πολύ πιο γρήγορα και συνήθως πιο εντυπωσιακά από τα αντίστοιχα μιας web εφαρμογής, ενώ μπορούμε να χρησιμοποιήσουμε και όλα τα advanced χαρακτηριστικά της εκάστοτε συσκευής όπως camera, GPS, πυξίδα, γυροσκόπιο, κτλ. (εδώ την έχει πατήσει λίγο το Android μιας και οι κατασκευαστές εκτός από ότι είναι πολλοί, προσφέρουν και διαφορετικά χαρακτηριστικά στις συσκευές τους, πράγμα που δημιουργεί αρκετά προβλήματα στους developers).</p>
<p>Το βασικότερο <strong>μειονέκτημα</strong> τώρα, το ανέφερα και πιο πάνω, δεν είναι άλλο από το γεγονός πως η εφαρμογή είναι platform-dependent, που σημαίνει πως πρέπει να γράψετε την ίδια εφαρμογή για πολλές πλατφόρμες (τουλάχιστον 2), χωρίς να κάνω λόγο για τις υποπεριπτώσεις τους (όπως πχ. τις αλλαγές που μπορεί να υπάρχουν σε hardware χαρακτηριστικά πχ. retina display, ή εντελώς διαφορετικά hardware setup σε android συσκευές). Τέλος ένα μικρό μειονέκτημα μπορεί να θεωρηθεί και το γεγονός πως για να γίνει update η εφαρμογή, πρέπει να ξανά-ανέβει στο εκάστοτε store (αφού εγκριθεί κτλ .κτλ.), να την ξανά-κατεβάσει και να την ξανά-κάνει install ο εκάστοτε χρήστης (στην περίπτωση της web app το update είναι πολύ πιο άμεσο).</p>
<p>Αυτά τα λίγα περί web και native εφαρμογών για κινητά και tablets. Ελπίζω να ξεκαθάρισα λιγάκι το τοπίο, μιας και για κάποιο ανεξήγητο λόγο τα πράγματα είναι αρκετά μπερδεμένα! Αν κάποιος θέλει να συμπληρώσει κάτι, ας αφήσει απλά ένα σχόλιο&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tsevdos.com/2011/06/21/mobile-app-vs-native-app/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Tsevdos.com και WPtouch plug in</title>
		<link>http://www.tsevdos.com/2010/03/15/tsevdos-com-and-wptouch-plug-in/</link>
		<comments>http://www.tsevdos.com/2010/03/15/tsevdos-com-and-wptouch-plug-in/#comments</comments>
		<pubDate>Mon, 15 Mar 2010 09:18:01 +0000</pubDate>
		<dc:creator>John Tsevdos</dc:creator>
				<category><![CDATA[mobile web design]]></category>
		<category><![CDATA[plug-ins]]></category>
		<category><![CDATA[tsevdos.com]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[plugins]]></category>
		<category><![CDATA[site]]></category>
		<category><![CDATA[wp]]></category>
		<category><![CDATA[wptouch]]></category>

		<guid isPermaLink="false">http://www.tsevdos.com/?p=609</guid>
		<description><![CDATA[Εάν έχετε κάποιο WordPress installation και θέλετε να δημιουργήσετε εύκολα και γρήγορα μια mobile έκδοση του site σας η οποία θα λειτουργεί σε όλα τα κινητά τηλέφωνα (iPhone/iPod touch, Android, BlackBerry Storm κτλ.), τότε το WPtouch plug in είναι ακριβώς αυτό που χρειάζεστε! Προσωπικά με κέρδισε από το MoFuse που χρησιμοποιούσα μέχρι τώρα, για δύο [...]]]></description>
			<content:encoded><![CDATA[<p>Εάν έχετε κάποιο WordPress installation και θέλετε να δημιουργήσετε εύκολα και γρήγορα μια <strong>mobile έκδοση</strong> του site σας η οποία θα λειτουργεί σε όλα τα κινητά τηλέφωνα (iPhone/iPod touch, Android, BlackBerry Storm κτλ.), τότε το <a title="WPtouch official site" href="http://www.bravenewcode.com/products/wptouch/">WPtouch plug in</a> είναι ακριβώς αυτό που χρειάζεστε! Προσωπικά με κέρδισε από το <a title="MoFuse" href="http://www.mofusepremium.com/">MoFuse</a> που χρησιμοποιούσα μέχρι τώρα, για δύο κυρίως λόγους. Πρώτον, δεν χρειάζεται να έχω ή να ρυθμίσω κάποιο διαφορετικό mobile domain (πχ. m.tsevdos.com) για να λειτουργήσει. Οι mobile χρήστες μπαίνουν κατευθείαν στο site μου, και μόλις το <a title="WPtouch official site" href="http://www.bravenewcode.com/products/wptouch/">WPtouch</a> αντιληφθεί πως έχει να κάνει με mobile user agent, απλά του &#8220;σερβίρει&#8221;  την mobile έκδοση. Το δεύτερο χαρακτηριστικό που με κέρδισε, είναι ότι υποστηρίζει όλους τους σοβαρούς mobile browsers και συσκευές που υπάρχουν, και όχι μόνο το iPhone, όπως κάποιες άλλες λύσεις.</p>
<p>Το συστήνω ανεπιφύλακτα, μιας και σε χρόνο μηδέν, αλλά και χωρίς κόπο μπορείτε να κάνετε το WordPress site σας mobile-friendly.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tsevdos.com/2010/03/15/tsevdos-com-and-wptouch-plug-in/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Mobify.me</title>
		<link>http://www.tsevdos.com/2009/04/28/mobifyme/</link>
		<comments>http://www.tsevdos.com/2009/04/28/mobifyme/#comments</comments>
		<pubDate>Tue, 28 Apr 2009 08:19:40 +0000</pubDate>
		<dc:creator>John Tsevdos</dc:creator>
				<category><![CDATA[mobile web design]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[site]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.tsevdos.com/?p=388</guid>
		<description><![CDATA[Πολύ ενθουσιάζομαι όταν ανακαλύπτω πραγματικά έξυπνες και πρακτικές λύσεις. Την συγκεκριμένη υπηρεσία την ανακάλυψα από το blog της Veerle και περιμένω πως και πως να γυρίσω σπίτι για να &#8220;παίξω&#8221; λίγο μαζί της. Η υπηρεσία ονομάζεται Mobify και σου επιτρέπει να δημιουργήσεις σχετικά εύκολα μια custom mobile έκδοση του site σου. Η διαφορά με τις [...]]]></description>
			<content:encoded><![CDATA[<p>Πολύ ενθουσιάζομαι όταν ανακαλύπτω πραγματικά έξυπνες και πρακτικές λύσεις. Την συγκεκριμένη υπηρεσία την ανακάλυψα από <a title="Veerle’s blog goes mobile post" href="http://veerle.duoh.com/blog/comments/veerles_blog_goes_mobile/">το blog της Veerle</a> και περιμένω πως και πως να γυρίσω σπίτι για να &#8220;παίξω&#8221; λίγο μαζί της. Η υπηρεσία ονομάζεται <a title="Mobify.me site" href="http://mobify.me/">Mobify</a> και σου επιτρέπει να δημιουργήσεις σχετικά εύκολα μια custom mobile έκδοση του site σου. Η διαφορά με τις υπόλοιπες υπηρεσίες, όπως για παράδειγμα το <a title="mofuse site" href="http://www.mofuse.com/">Mofuse</a> που χρησιμοποιώ αυτήν την στιγμή στην <a title="Tsevdos.com mobile version" href="http://m.tsevdos.com/">mobile έκδοση του Τsevdos.com</a>, είναι πως επιτρέπει πλήρη customization και έλεγχο της  mobile έκδοσης του site σας &#8211; κάνετε δηλαδή πραγματικό mobile web design &#8211; και δεν στηρίζεται σε κάποια έτοιμα templates τα οποία δημιουργούνται αυτόματα μέσω RSS feed (όπως λειτουργεί το <a title="mofuse site" href="http://www.mofuse.com/">Mofuse</a> για παράδειγμα).</p>
<p>Με αυτόν τον τρόπο ένα μικρο-μεσαίο site μπορεί πολύ εύκολα να αποκτήσει μια αξιοπρεπέστατη και custom mobile λύση, με σχεδόν μηδενικό budget και χωρίς την σπατάλη πολύτιμων resources και χρόνου σε extra development ή την εκμάθηση πολύπλοκων API. Επίσης δεν χρειάζεται να κάνετε τίποτα το ιδιαίτερο για την ανανέωση του, πέρα από το να ανανεώνεται το κανονικό σας site. Στην συνέχεια απλά και ανάλογα με τις ρυθμίσεις και το περιεχόμενο που έχετε επιλέξει, η mobile version site σας ανανεώνεται αυτόματα!</p>
<p>Από μια γρήγορη ματιά που του έριξα, είναι κάπως πολύπλοκο και δύσκολο στην χρήση, τουλάχιστον μέχρι να καταλάβεις πως λειτουργεί, όμως αυτό είναι και η δύναμη του, μιας και με αυτόν τον τρόπο μας προσφέρει πλήρη ελευθερία στις δημιουργίες μας.</p>
<p>Τέλος οι τύποι είναι και πολύ έξυπνοι στο marketing μιας και επικοινώνησαν με μεγάλα sites/blogs όπως το <a title="Veerle's blog" href="http://veerle.duoh.com/">Veerle&#8217;s blog</a> και το <a title="A List Apart" href="http://alistapart.com/">A List Apart</a> και τους δημιούργησαν &#8211; δωρεάν φυσικά &#8211; τις <a title="Veerle's blog mobile version" href="http://mobify.me/gallery/veerle/">mobile</a> <a title="A List Apart mobile version" href="http://mobify.me/gallery/alistapart/">version</a> τους!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tsevdos.com/2009/04/28/mobifyme/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

