#14 Tīmekļa vietnes izstrāde -vārdnīca

Kaspars Zemītiskaspars.zemiitis@gmail.com

07.11.2013

Tīmekļa vietnes izstrāde

Izstrādi var iedalīt soļos:1. Ideja. Definēt prasības (kas ir jāizveido);2. Izlemt, kas un ar kādiem rīkiem veidos tīmekļa

vietni;3. Kāda būs vietnes struktūra, saturs un kā to pasniegs;4. Izvēlēties domēna vārdu;5. Iegādāties hostingu (FTP pieeju serverim);6. Izvēlēties dizainu – attēlus, fontus, grafiskos

elementus;7. Atcerēties par SEO (meklētāju optimizāciju):

Tīmekļa vietnes izstrāde

8. Testēt mājas lapu:a) Izmantot testa vidi;b) Lietotāju apskati – atsauksmes;c) Lapas veiktspējas pārbaudīšana uz dažādām

pārlūkprogrammām; rīku izmantošana;d) Kļūdu dokumentēšana/ pārbaudīšana;

9. Tīmekļa vietnes atklāšana;10. Tīmekļa vietnes uzturēšana;11. Brenda identitāte;

Vēl neapskatītais -Vārdnīca

Call-to-Action (CTA)• A call-to-action is a text link, button, image, or some other

type of web link that encourages a website visitor to take an action on that website, such as visiting a landing page to download a piece of content.

A/B testing

• also known as split testing, is one of the most effective ways to make measurable (and scientific) improvements to your website.

• This practice creates two (or more) versions of a piece of content, such as a headline or call-to-action (CTA) button, and shows each version to a different, yet similarly sized audience to discover which test has a better response.

A/B testing

Above the Fold:

• This website design term is a legacy from printed newspaper days. “Above the fold” describes the part of a web page that the visitor can see without scrolling, and is usually considered the most important real estate on your page.

Above the Fold:

Redzamā daļa

‘Neredzamā’ daļa

Bounce Rate• The bounce rate of a page is the percentage of

people who left your website after viewing that page. A page with a high bounce rate is performing poorly. Comparing your high bounce pages to your low bounce pages is a great way to find out what’s working for your visitors and what isn’t.

Bounce Rate in Google Analytics

Avots: http://blog.kissmetrics.com/what-you-can-learn-from-bounce-rate-how-to-improve-it/

Impression

• An impression (in the context of online advertising) is a measure of the number of times an ad is displayed, whether it is clicked on or not.[1] Each time an ad displays it is counted as one impression.

Avots: http://en.wikipedia.org/wiki/Impression_%28online_media%29

Click-Through Rate (CTR)

• Click-through rate (CTR) is a way of measuring the success of an online advertising campaign for a particular website as well as the effectiveness of an email campaign by the number of users that clicked on a specific link.

• The click-through rate is the number of times a click is made on the advertisement divided by the total impressions (the times an advertisement was served):

Avots: http://en.wikipedia.org/wiki/Click-through_rate

Cookie• A cookie is a piece of data that a website stores in a visitor’s

browser to track that visitor’s browsing history on your website. It's also a crucial component of the technology behind personalization.

Conversion

A conversion happens when your site visitor completes the goal of your individual page, such as clicking a CTA button or making a purchase.

• Conversion Path: The conversion path is the step-by-step series of clicks that a visitor goes through on your website, from their first interaction with you to whatever goal you’re trying to accomplish on your site.

• Conversion Rate: The conversion rate of a page is the percentage of people who completed a desired action on a single page, such as filling out a form. Pages with high conversion rates are performing well, and pages with low conversion rates are performing poorly.

• Latent Conversion• Conversion Rate Optimization (CRO)....

Conversion Path

Avots: http://blog.herodesignstudio.com/a-website-redesign-requires-ongoing-improvements/

Dynamic Contentalso called as "smart content" or "adaptive content" is a term for the aspects of a website, ad, or email body that change based on the past behavior of the viewer. It creates an experience that's customized specifically for the visitor or reader at that moment.

Form

• A form is the place your page visitors will supply information in exchange for your offer. It’s also how those visitors can convert into precious sales leads. As a best practice, only ask for information you need from your leads in order to effectively follow up with and/or qualify them.

Friction

• Friction is any element of your website that is confusing, distracting, or causes stress for visitors, causing them to leave your page. Examples of friction-causing elements include dissonant colors, too much text, distracting website navigation menus, or landing page forms with too many fields.

Incentive

• An incentive is an element you add to your page that stimulates the visitor to convert. In optimization circles, online incentives are used to overcome the friction on the page.

• Examples include a visual that reinforces the value of your offer, or a free trial or cost calculator you offer in exchange for downloading a report or taking a survey.

Landing Page

• Literally the page where your prospects “land” on your website, a landing page also must exist to collect a visitor’s information through a form.

Avots: http://niftymarketing.com/optimal-local-landing-page-infographic/

Microsite• A microsite is a cross between a landing page and a “regular” website. Microsites

are used when marketers want to create a different online experience for their audience separate from their main website. These sites often have their own domain names and distinct visual branding.

• ‘They are not optimal for link-building. It’s true that your microsite could potentially score a lot of inbound links from other domains, which you can then redirect to your main site. But the problem is that you’ve only created one referring domain, which is your microsite. As a result of you making your microsite play middleman, you won’t get the benefits that come from trusted domains linking to your site.

• They require resources. When considering whether to implement a microsite, keep in mind that you will need adequate resources to create and maintain each one, including any necessary SEO-related efforts.

• They can help or hurt your branding. If you have multiple microsites, each with its own unique look, feel, and tone, you run the risk of losing your brand identity. On the other hand, if you are promoting a product, service, or initiative to a very specific target group — one that wouldn’t normally visit your main site — a microsite could be a viable option.’

Avots: http://spectate.com/2011/03/pros-and-cons-of-microsites/

MicrositeA microsite may contain information about a special event or initiative, promotional offers, specific products, or editorials.

Multivariate Test

• A multivariate test evaluates a number of different page elements on a web page simultaneously, in contrast to A/B testing, which compares the success of variations of one element.

• For example, a multivariate test may test three different images, two CTA buttons, and two headlines in an effort to find the page combination that performs best. An A/B test, on the other hand, would test two different images on one page, leaving all other variables constant. Because multivariate tests can be complicated and require significant traffic, they are generally reserved for more advanced marketing testers.

• Kādu testēšanas pakalpojumu izvēlēties:– http://www.conversion-rate-experts.com/split-testing-software/

For example, a multivariate test may test three different images, two CTA buttons, and two headlines in an effort to find the page combination that performs best...

Avots: http://www.ionicmedia.com/blog/2010/10/23/using-multivariate-testing-to-improve-key-conversion-rates-on-your-site/

Personalization

• Personalization is a means of targeting your audience, so that each web page or email message appears to have been created specifically for a single person. Examples of personalization include adding a name to an email subject line, showing products based on the visitor’s past purchase history, or surfacing dynamic images based on location or industry.

Mobile Optimization

• Mobile optimization means designing and formatting your website so that it’s easy to read and navigate from a mobile device. This can be done by– either creating a separate mobile website (for

example, m.mysite.com)– or incorporating responsive design in initial site

layout.

So How Do I Get A Mobile Friendly Site?

• 3 options:

– 1. Create a completely separate version of website (Two separate versions of the site. This makes website hard to maintain, because you have to make any changes to your website in 2 places. )

– 2. Create an adaptive layout (Easier to maintain, because all changes only have to be made once. However you'll need a professional to set it up for you.)

– 3. Build a mobile landing page (This is the least expensive option. You basically build one mobile page with all the basics. You can can do this yourself.)

Avots: http://www.eznetu.com/mobile-menu.html

Avots:http://www.eznetu.com/mobile-menu.html

Mobile version vs desktop version

• Desktop site presents you with the idea of being able to look around, navigate to products you might want.

• The mobile website starts by finding your location, if possible taking advantage of mobile capabilities like information from the GPS, so we can show you where the closest store is.

Tīmekļa vietne, kas ir pielāgota mobīlajām ierīcēm, var palielināt vietnes lietošanas ērtumu un ne tikai!

Responsive Design

• PC, portatīvie datori, viedtālruņi, planšetdatori...

Responsive DesignBūtu labi, ja katrā no ierīcēm būtu viss ērti atrodams un viegli navigēties...

Responsive Design

Responsive web design is an approach to designing websites. Instead of building a separate, distinct website for each specific device it could be viewed on, the site recognizes the device that your visitor is using and automatically generates a page that is responsive to the device the content is being viewed on -- making websites always appear optimized for screens of any dimension.

<div id=“header”>Logo</div><div id=“navigation”>Menu</div><div id=“content”> Articles</div><div id=“footer”>About/Contacts</div>

• width and height (of the browser window)• device width and height• orientation – for example is a

phone in landscape or portrait mode?• resolution

1. Tiek izmantota viena HTML datne (tātad ir viena vietne)

2. Tiek noteiktas konkrētās ierīces ‘spējas’:

3. Un pateikts kāds būs izskats, izkārtojums konkrētajai ierīcei, piešķirot konkrētus CSS stilus elementam

‘Ierīce bez ierobežojumiem’ izmanto citus CSS sitla likumus

Piemēram, platums nav ierobežots uz 400px, bet drīkst ‘izplesties’

Responsive and Adaptive (Similar in their goal)

– Responsive and adaptive web design are essentially about creating web designs that are optimized for the size of the screen or the type of device that is used.

– The basic concept is that you create a website that works on multiple screen sizes, most commonly to work well on at least three different screen sizes — a small mobile screen, a tablet-sized screen, and a larger desktop computer monitor.

Responsive vs Adaptive ( Different approaches)

Responsive • Pages are responsive by changing layouts when the viewport (or screen/window

size) changes and the current layout cannot deliver and present contents effectively. Design change in real time!

‘You create one web page and then use multiple sets of CSS rules to change the format and layout based on the size of the browser window.’

Adaptive • Pages are adaptive by changing layouts and selecting contents according to the

device capabilities; screen or window size is just one of the many device capabilities to consider. Flash animations, for example, may be delivered on desktops but filtered or hidden on mobile devices.

Adaptive design requires that you create many different versions of each web page, and install complicated programming on your web server that detects each device and delivers a version of the site optimized for the specific size and features of that cell phone visitor. With adaptive design you can send completely different versions of your site to each device.

Adaptive design is more complex more expensive.

Flexible

Predefined

Mobile apps

• A mobile application (or mobile app) is a software application designed to run on smartphones, tablet computers and other mobile devices.

Mobile apps

• They are usually available through application distribution platforms, which are typically operated by the owner of the mobile operating system, such as the Apple App Store, Google Play, Windows Phone Store, and BlackBerry App World

The term "app" has become popular, and in 2010 was listed as "Word of the Year"

OS

Application distribution platforms(kur var lejuplādēt aplikācijas)

App vs mobile site

Avots: http://blog.imediainc.com/blog/bid/281141/Mobile-App-Mobile-Website-Or-Both

Typical activities

Are there any other options?

Web apps • Run in the phone’s browser. • This means the app works across all devices, and

ensures cross-platform compatibility. • The same base code can be used to support all

devices, including iPhone and Android. • However, web apps do not make use of the phone’s

other features, such as the camera or geolocation. • Web apps cannot be deployed to the phone’s

marketplace.

Are there any other options?

Hybrid mobile apps are a mix between these two types (native app and web app) of mobile applications.

• Using a development framework, companies can develop cross-platform applications that use web technologies (such as HTML, JavaScript and CSS), while still accessing the phone’s features.

• A hybrid app is a native app with embedded HTML.• Selected portions of the app are written using web

technologies.

Are there any other options?

• The web portions can be downloaded from the web, or packaged within the app.

• This option allows companies to reap all the benefits of native apps while ensuring longevity associated with well-established web technologies.

• The Facebook app is an example of a hybrid app; it is downloaded from the app store and has all the features of a native app, but requires updates from the web to function.

• o

1. m.vietne – lētāk izveidot, bet maza atdeve lietotājam. ‘Gandrīz tā pati vietne’

3. Hibrīd aplikācija, salīdzinoši dārgi izveidot.

Katrai OS jāveido sava, bet var izmantotweb tehnoloģiju priekšrocības.

2. Web aplikācija. Strādā no pārlūkprogrammas,

bet nav piekļuves visām ierīces tehnoloģijām-kamerai, geolocation. Nevar ievietot – app

izplatīšanas platformās - App store, Android market.

4. Aplikācija, dārgi izveidot, bet var izmantot visas ierīces iespējas – kamera, geolocation,

kontaktu grāmata, kalendāru... Var strādāt offline režīmā. Iespējams izvietot - App store, Android market...

Katrai OS jāveido sava.

Jāizvērtē prasības #1

Jāizvērtē prasības #2

• Google ieteikumi par mobīlajām lapām:• https://support.google.com/webmasters/ans

wer/72462?hl=en&ref_topic=2370586

Testēšana/ pielāgošana

Avots: http://visualwebsiteoptimizer.com/

MD 10

1. Aprakstīt vismaz 5 aspektus, kas jāņem vērā veicot SEO optimizāciju.– Aspekta nosaukums;– Aspekta pielietošana;– Aspekta pielietošana Wordpress vietnē;

2. Jāizvērtē vai tīmekļa vietnei ir nepieciešama –– m.versija,– aplikācija (kāda veida aplikācija – native, web aplikācija,

hibrīdaplikācija). Jāapskata vismaz 4 kritēriji.

3. Notestēt savu tīmekļa vietni (tiks precizēts lekcijās 13.-14.11.2013)