Is it a web site? A web app? Or a native app?

Many people are still confused about the difference between common types of applications(apps). Everyone seems to understand what a web site is, but when you say things like not all web sites are web apps or most web apps are also web sites, eye’s tend to glaze over. Let’s break things down.

What’s A Web Site?

website

A web site is a location connected to the Internet that maintains one or more pages on the World Wide Web. These web pages are just documents, typically composed in plain text interspersed with formatting instructions of Hypertext Markup Language (HTML).

Typically a web site is just a bunch of static pages that display the same information for any and all visiting users. Web sites are primarily informational. Take a basic portfolio page for example, it just displays a user’s/company’s work, an About section, and other pertinent information that may help visitors understand more about the user/company. To view someone’s portfolio page doesn’t require you to login, there’s no input fields for you to submit personal information, and the content you view on the page is the same content your friend would see if she was to visit the site from her computer.

A basic static web site, like a portfolio page or a coming soon page, should not be called a web application because it’s not doing any heavy lifting; by that I mean processing and saving data. It’s just a bunch of static content that’s displayed to users.

What’s A Web App?

web-app

A web application will have things like user authentication(login), allowing users to log themselves in and view information they might have submitted or saved from their previous session. Sites like Twitter, Facebook and LinkedIn are great examples of web applications. These are essentially programs that runs remotely, and depend fundamentally on a processing and a data storage backend. Web applications have databases that save your information and display it back to you every time you check back in. Web applications are very powerful and are able to reach anyone that is using a web browser connected to the internet.

The reason people understand the term web site better than the term web app is because back in the olden days, early 90’s to be precise, there weren’t any web apps. Back then everything was a static web site. We didn’t have big user centric apps with all these nifty features; we had basic informational pages that lived on the web. Once we started hooking up databases to web sites and adding all of these user centric features web sites gradually became robust web applications. The problem these days is whenever people here the term app they immediately think about those icons in their smart phone, which are actually Native apps and that’s what we’re going to discuss next.

What’s A Native App?

nativeapp-vs-webapp

As you may have extrapolated, both Web sites and Web apps live on the World Wide Web! We typically access the world wide web through a Web browser. A Web browser is a software application used to locate, retrieve and display content on the world wide web, including web pages, images, video and other files. You’re using a Web browser right now to view this blog post. You might be using Google Chrome or Safari or Mozilla Firefox but hopefully not the dying Internet Explorer!

A native application (native app) on the other hand is an application program that has been developed for use on a particular platform or device, like a smart phone operating on iOS. Because native apps are written for a specific platform, they can interact with and take advantage of operating system features and other software that is typically installed on that platform.

Native apps are Not accessed through a browser. If you have a smartphone you already have a bunch of native apps installed. Just look at all those icons on your home screen, those are all native apps you’ve either purchased through an app store or apps that came pre-installed. These apps are written for specific operating systems. If you have an iPhone you’re running iOS, Apple’s operating system. If you have some other type of smartphone you’re most likely running Android, which is an operating system that is developed by Google.

Because a native app is built for a particular device and its operating system, it has the ability to use device-specific hardware and software, meaning that native apps can take advantage of the latest technology available on mobile devices such as a global positioning system (GPS) and camera. But web browsers are becoming far more powerful and gaining access to smartphone cameras and GPS, you ever receive a pop-up in your browser asking for permission to access your camera or location?

Wrap It Up! No You Wrap It Up!

Web sites are just static pages on the internet, check out this classic. Web apps are dynamic pages that interact with a database. Native apps are stand alone apps that are native to your operating system and do not run in a browser. At Alkami we build web sites and web apps because we rarely encounter someone that absolutely needs a native app. 9.9 out of 10 times our responsive web apps meet the demands of the architect/entrepreneur.

Search Engine Optimization – Part 3

What’s the point of having a website if no one can find it? In part-2 of this wicked gnarly series we covered anchor tags, images, heading tags, robots.txt file, and re=’no-follow’. This is our final part and will focus on mobile.

Notify Google Of Mobile Sites

The world is going mobile! Mobile phones are everywhere and many users do most of their internet surfing on their mobile phones. As a webmaster, running a mobile site and tapping into the mobile search audience isn’t easy. Mobile sites require different management methods, which pose new challenging. While many mobile sites were designed with mobile viewing in mind, they weren’t designed to be search engine friendly. Let’s take a look at some troubleshooting methods that will ensure your site in crawled and indexed.

mobile-sitemap

Create a mobile-sitemap, which is slightly different from the desktop site-map we covered in part-1. A mobile sitemap can be submitted using webmaster-tools just like a regular site-map.

Some mobile sites refuse access to anything but mobile phones, making it impossible for Googlebot to access the site. Google has a specific crawler for mobile called “Googlebot-Mobile.” If you’d like your site crawled, allow any User-agent including “Googlebot-Mobile” to access your site.

Once Googlebot-Mobile crawls your URLs, Google checks for whether each URL is viewable on a mobile device. Pages Google deams are not viewable on a mobile phone are not stored in Google’s mobile site index. This determination is based on a variety of factors that our out of the scope of those post. Here’s the best place to start for gathering more information.

Guide Mobile Users Accurately

growth-of-mobile

Some companies like to build two separate versions of their website, one for desktop and another for mobile. The most common problem that arises with this scenario is mobile users land on the desktop version. Redirecting users to the mobile website is essential.

When a mobile user or crawler (like Googlebot-Mobile) accesses the desktop version of a URL, you can redirect them to the corresponding mobile version of the same page. Google notices the relationship between the two versions of the URL and displays the standard version for searches from desktops and the mobile version for mobile searches. -WebMaster Docs

Keep in mind that Google is not responsible for displaying the mobile version of your site in search results for someone using a mobile device. There’s many ways to enable Google search results to display the correct version of your site, but that’s a blog post of its own. The simplest way to solve this problem is to track a visitors User-Agent and provide a mobile user a link to view your mobile optimized site incase he/she lands on the desktop version.

At Alkami we don’t believe in building separate sites for different sized screens. We believe in building one responsive site using mobile-first design principles. What this means is we build you one site that looks and works great on any screen, and because we begin designing your site with mobile in mind you end up with a lean version that clearly gets your message across in as few words as possible.

Promote Your WebSite In The Right Ways

website-promotion

As we wrap up our final post of our 3-part series, I would like to beat the dead horse one last time by emphasizing the importance of positive promotion. Effectively promoting your new content will allow target users to locate your site. The more people discover and link to your site the more of a web presence you’re going to establish. Become a master at making announcement via blog posts. Write pertinent blog posts that speak to your target audience. Engage with your audience in as many positive ways as possible. Setup social media accounts for your business and share what’s going on in your ecosystem.

If you run a local business, adding its information to Google Places will help you reach customers on Google Maps and web search. The Webmaster Help Center has more tips on promoting your local business.

 

Search Engine Optimization – Part 2

What’s the point of having a website if no one can find it? In part 1 we discussed creating accurate page titles, making use of the description meta tag, improving structure of your URL’s, making your site easier to navigate, preparing a sitemap and offering quality content and services. Let’s continue our dive into the mysterious world of SEO.

Write Better Anchor <a> Text

anchor-tags

Anchor text is the clickable text that users will see as a result of a link. It is placed within the anchor tag <a href=”…”></a> . This text tells users and Google crawlers a little bit about the page you’re linking to. Links on your page may point to other pages or your site or pages of other sites. In either of these cases, the better your anchor text is, the easier it is for users to navigate and for Google to understand what the page you’re linking to is about. The anchor text you use for a link should provide at least a basic idea of what the page linked to is about.

Optimize Your Use Of Images

How you use your images is important. All images can have a distinct filename and “alt” attribute, both of which you should take advantage of. Sometimes images can’t be displayed to some users, this is where the alt tag comes in handy; it tells the user what the image is about. Filenames are important as well, make sure to name your image files properly. Anyone should take a glance at the filename and have a good idea of what the image looks like or contains.

Use Heading Tags Appropriately

header-tag-hierarchy

Since heading tags typically make text contained in them larger than normal text on the page, this is a visual cue to users that this text is important and could help them understand something about the type of content underneath the heading text. Use multiple heading sizes(<h1>, <h2>, <h3> etc…) in your document to create a hierarchical structure that visually separates different sections of your page.

Make Effective Use of robots.txt

robots-txt-file

A “robots.txt” file tells search engines whether they can crawl parts of your site. This file, which must be named “robots.txt”, is placed in the root directory of your site. You may have a page or a few pages you don’t want users to land on by clicking a link they came across while doing a Google search. You can tell Google to not display these pages in their search results in your “robots.txt” file.

Be Aware of rel=”nofollow” For Links

rel-nofollow

Setting the value of the “rel” attribute of a link to “nofollow” will tell Google that certain links on your site shouldn’t be followed. No-following a link is adding rel=”nofollow” inside of the link’s anchor tag <a>. This would be very useful if your site has a blog with public commenting turned on. Links within those comments could pass users to sites you might not agree with. Blog comment areas are very susceptible to comment spam. No-following these user-added links ensures that you’re not giving your page’s hard-earned reputation to a spammy site.

Most blogging services like WordPress automatically nofollow user comments, but those that don’t can often be manually edited to do this. This advice also goes for other areas of your site that contain user generated content. It’s ok to allow users the right to link to other pages from your site, just be careful and make sure these are pages you agree with. Google has interesting ways of identifying how spammy a page is, and your site’s reputation could be tarnished if you have many links to spammy content.

Search Engine Optimization Part 1

What’s the point of having a website if no one can find it? following the best practices outlined by Google, I’ve decided to summarize the basics in a 3 part series. If you follow the pointers in this series, it will make it easier for search engines to crawl, index and understand the content on your site. Over time this should lead to more visitors and better search rankings.

Create Unique, Accurate Page Titles

A title tag tells both users and search engines what the topic of your page is. The <title> tag should be placed within the <head> tag of your HTML document. Ideally, you should create a unique title for each page on your site. If you don’t have many pages on your site, one concise easy to understand title will suffice. Make sure to choose a title that effectively explains the content that’s being presented on the page. Avoid choosing a title that has nothing to do with the content on the page.

good-bad-title-description

Make Use Of The Description Meta Tag

A page’s description meta tag gives Google and other search engines a summary of what the page is about. Whereas a page’s title may be a few words or a short phrase, a page’s description meta tag might be a  few sentences or a short paragraph. Like the <title> tag, the description meta tag is placed within the <head> tag of your HTML document. <meta name=”description” content=”accurately summarize the page’s content”> Similar to the title tag, make sure to avoid writing a description meta tag that has no relation to the content on the page.

Improve The Structure Of Your URLs

good-vs-bad-url

Creating descriptive categories and filenames for the documents on your website will keep your site better organized and it could also lead to better crawling of your documents by search engines. Also, it creates more pleasing to look at URLs for those that want to link to your content. Visitors may be turned off by very long and cryptic URLs that contain few recognizable words. URLs need to be relevant to your site’s content. You want to make it easier for visitors to remember them better. Instead of having a URL look like this: http://surfingtheglobe.com/blog/posts/january/nicaragua-adventure/235hgihng45h , you’re better off making it like this: http://surfingtheglobe.com/blog/nicaragua-adventure

Make Your Site Easier To Navigate

The navigation of a website is important in helping visitors quickly find the content they want. It also helps search engines understand what content the webmaster(site owner/manager) thinks is relevant. If you have a website deeply nested in the file structure of your site, you’re implying that the content of that page is not very important. Google likes to have a sense of what role a page plays in the bigger picture of your website.

breadcrumb

You can ensure more convenience for users by using breadcrumb lists. A breadcrumb is a row of internal links at the top or bottom of the page that allows visitors to quickly navigate back to a previous section or the root of your site. Many breadcrumbs plug-ins/widgets have the root page as the first, left-most link and list the sections you visited before ending up on the the current page.

Prepare A SiteMap

xml-sitemap-example

An XML Sitemap file, which you can submit through Google’s Webmaster Tools or create one yourself if you’re using a static site generator like jekyll, makes it easier for Google to discover the pages on your site. Using a Sitemap file is also one way to tell Google which version of a URL you’d prefer as the canonical one (e.g. http://surftheglobe.com/ or http:// www.surftheglobe.com/).

Offer Quality Content And Services

This goes without saying but creating compelling and useful content will likely influence your website far more than anything else we discuss here. You’ve likely heard the mantra “Content Is King.” Users have a sense for good content and will likely want to direct other users to it by sharing. This could be through blog posts, social media outlets, email, or forums. Organic word-of-mouth advertising goes a long way in building your site’s reputation with both users and Google. Write captivating easy to read text. Stay organized around a topic you are passionate about. Create fresh content regularly; as often as possible because Google loves seeing a consistent stream of new content. And don’t forget to create content for Users not search engines! You’re primary focus should be the user, if users love it Google will love it!