All posts in Wed Development

Ipad And Iphone

There are more mobile devices on earth than there are people. More than half of us have smartphones, and for half of mobile phone users, their device is their primary internet source. Just one more statistic for you: more than a quarter of all internet searches are conducted on a mobile device. A few years ago, you could get away with a desktop-based site. Not today. To reach your audience, you have to go where they are, and they are on the go. Here are the three ways you can accommodate mobile users.

Separate Mobile Site

With this option, you maintain a desktop version of your site and a separate mobile version. This has a few benefits: you can create a fully customised experience for your users. If, for instance, A/B or multivariate testing reveals your mobile users prefer infinite scrolling while your desktop users like vertical. You can also pare down your “big” version and create a simplified, streamlined mobile site that loads faster. Another plus is that you can employ HTML5 and other technologies without having to worry about compatibility.

Why not opt to create a separate mobile site? Well, it costs more, and that’s certainly a big consideration. Another issue is that if you have users who rely on both traditional and mobile versions (think of an Amazon shopper who likes to search for gifts at a coffee shop and then purchase at home), they may dislike having two separate experiences. It may create a disconnect and reduce the efficacy of the mobile site. Think about SEO, too. While having a separate site does not have to hurt your rank,  you will have to be on top of your redirects to make sure.

Dynamic Serving

With this option, you use the same URL, regardless of what type of device is attempting to access your website. So, how does a site load optimally for, say, a desktop, an iPhone, and a Galaxy? The specific devices employ User Agents. When the user agents request the site from the server, the server delivers the correct HTML for that particular device. This is beneficial because you only need one URL.

On the downside, Google  may not recognize the mobile HTML set, so you have make sure that you point the content out to the bots. The bots will need to crawl the content with different user agents, and redirecting them can be tricky. Check out Google’s help page for more information on that, if you choose dynamic serving. Another issue is that you have to continually update user agent strings for new mobile devices as they come on the market. Finding this information can be difficult, especially when the devices are brand new.

Responsive Web Design

This is the method that web design experts typically recommend. The website uses only one URL and responds to the type of device on which it is viewed. All devices read the same HTML. How does it work? CSS changes the page dimensions and the layout to fit smaller screens. Googlebot and Googlebot Mobile need to be able to crawl your CSS, Javascript, and images, and this reconfiguration process is automatic. No page redirects mean sites load faster; there is just one URL; and bots can crawl more efficiently and index more often; and mobile experiences are the same as desktop. This can be a big plus for many users who want that continuity.

The downside is cost and technical difficulty. Responsive web design is highly technical in terms of implementation, so an experienced web developer is an invaluable asset.

How are you going mobile?

LoupeRecently, Google’s Matt Cutts indicated that the biggest SEO mistake he sees is that people do not have crawlable websites. It’s interesting that one of the most common errors is one that is unrelated to mysterious algorithm updates or complex changes in Google’s search methodology. It’s just good old SEO. If you’re guilty of this optimisation error, what can you do to get back on track – and in the SERPs?

If Google cannot crawl and index your site, it cannot categorize it or return it to searchers. The first step is to create, if you have not already, a Google Webmaster Tools accounts. This is going to be the best tool in your toolkit.

In your account, go to the Health section and choose Crawl Stats from the menu on the left side. This will tell you if, and when, Google has crawled your site. While you’re there, also check out Crawl Errors This will provide a report on any broken links, malfunctioning 404s, site errors, and URL errors that prevent Google from crawling.

So, what if you have a soft 404 error, for instance? Webmaster Tools provides thorough, and clear, explanation, as well as instructions on resolving issues.

One more Webmaster Tools feature: Under Health, select Fetch as Google. You can request that the search engine crawl pages that you’ve just uploaded.

To ensure that your site is optimally crawled and index, there are several other steps that you can take:

  • Submit a sitemap. This is just what it sounds like: a map that helps Google identify pages within your website. Luckily, there are free online XML sitemap generators so there is really no excuse not creating and submitting one!
  • Add fresh content. This attracts bots and can help encourage them to keep visiting your site.
  • Put your code on a diet. Lose any bloat and ensure that your code is clean and in compliance with W3C standards. Again, you can find W3C validators online that you can use to help you with this. Lean sites load faster and index more easily.
  • Check for pages that are “disallowed.” Robots.txt files, which request that Google not index certain pages, keeps Google from…well, indexing certain pages. Are any pages “disallowed” that shouldn’t be?

These and other steps can roll out the welcome mat for bots. Make sure Google can crawl and index your site so searchers can find you.

Site owners have been moving to mobile access in droves, and with good reason. Statistically speaking, mobile viewers are the only significant part of the population, and leaving them out of the equation just isn’t a good idea these days. Going mobile, though, isn’t just a matter of clicking here and there. It takes some real work to convert your site to a mobile friendly browsing popularity machine, and there’s a good chance you’re going to encounter a few obstacles along the way.

One of the biggest mobile conversion obstacles you may come across is screens size factor. Keep in mind that mobile design no longer just means a tiny smartphone screen instead, your site must respond to those looking at it on a smartphone, those looking at it on a tablet, and those who view it on a tablet in landscape mode. Ensuring it looks great no matter what the screen size is an absolute must.

Your images are another huge conversion obstacle. Images are supposed to automatically resize, but that doesn’t always work well. An image that looks great on a 24 inch screen doesn’t always look fantastic on that same 4 inch smartphone. What’s more, though, is that those images can affect your load times across various devices. The smaller resolution images load faster and look good on small screens, but on the larger display, it may look ineffective.

One other note you may want to make before you start converting is that simply testing isn’t enough with mobile conversion. You have to test in different browsers, across different platforms, and even across real world devices. There are no shortcuts when it comes to looking at how things might work out on a customer’s device.

As you move toward mobile, your best bet is always to go mobile first, designing for those smaller screens before you think about anything else. Mobile is essential, but don’t expect it to be trouble-free.

Folder

An .htaccess file is a configuration file that allows you to have greater control over elements of your website, such as security and performance. You can use this file to, for instance, create redirects or change your default connection to “keepalive.” If you don’t have access to your server’s config file, you can create your own .htaccess to manage your website and make changes. How do you create such a file, and…then what do you do with it?

Let’s start with creating it. It’s a simple text file – and you may have one already. Your webhost should give you the option to “see hidden files” when you open your file manager. If you do so, and do not see .htaccess, then you don’t have one! You may also see that there is more than one. If you have one in the root level, or www folder, you’re good. If not, you’re still good, but you have a bit more work to do!

Open a text program, such as Notepad, and save an empty pave as .htaccess. Notepad will name it .htaccess.txt. Remove the .txt, or other extension if you’re using another text program. Just right click on the file and rename just .htaccess. If you don’t do that, you can’t add directives to the file. Well, you can, but no one will listen.

Editing your .htaccess file is simply a matter of opening this file and making your changes. With a big “but.” Changes you make to your .htaccess file can have an impact on your entire website. Some bad code or some wonky arrangement can really do some damage. Before you edit, make a copy of your file. If you do make one of those types of mistakes, simply go back to the file, delete, paste your old copy in, and your website will go back to normal.

It’s also a good idea to check your changes as you go. When you make a change, go to your website, refresh, and see if it is displaying correctly. This way, you don’t make 50 changes and have to backtrack to figure out what the problem is – or waste time making 50 changes only to have to delete them all and go back to the old copy (which you should always have because the old copy is way better than no copy!).

So, now that you know how to access or create and then edit your .htaccess file, what can you do with it? We’ll take a look at some edits that will help your SEO efforts in our next post.

Index Box

An .htaccess file can help you make important changes to your website. Last time, we looked at creating and editing your file – now, what can you put into it? Let’s take a look at some of the options available to you.

  • 404 errors. Generic 404 pages might not alienate visitors – but they might. They also don’t do anything for you. Several sites have had great luck creating funny, entertaining, and informative 404 pages. Our suggestion is that you be one of them! Design an attention-getting 404 message and page, and then edit your .htaccess file to ensure it is displayed to visitors.
  • Authorization. You can have control over who sees your site. You can either block certain IP addresses or domains (to avoid things like spambots) or add a password option.
  • Enable keepalive. This command keeps the connection open between a server and browser for a specified period of time. This way, the browser does not have to make multiple, separate requests for content, and the page can load faster.
  • Redirects. If you’ve moved, you can keep visitors and search engines up to date as to your whereabouts without impact your search rankings.
  • Allow SSI, or server side includes. SSIs are directives in HTML pages that let you add content to an existing page. Say you include a daily quote on your website. With SSI, you can add a directive to include the quote without having to get into the programming of your site.

There are a number of tutorials and online resources dedicated to helping you navigate your .htaccess files. This is just a rundown because books can – and have – been written! As always, make a copy of your .htaccess file before making any changes!

Internet's universe...There are thousands of devices on which people browse the web. Can they access and view your site, regardless of whether they are on a laptop, an iPhone 5 or a Galaxy S4 Mini? That’s the question. As we turn to our devices more and more, we need sites that respond and provide optimal experiences. Responsive web design allows us to do that. A site will respond as effectively to our 4 inch phone screen as it does to our 15 inch desktop screen. Last time, we talked about fluid grids, one of the building blocks of responsive web design. Now we’ll turn out attention to media queries, another essential element of a responsive website.

To quickly recap, a fluid grid enables elements of a website to adjust proportionally to screen sizes. The second element is CSS3 media queries. These allow you to collect data from site visitors and use that to “respond” to CSS styles. It determines which style will be used based on the dimensions of the viewing device (among other criteria, such as resolution).

Let’s put this into action. Say we want to target tablets with a maximum screen resolution of 560 px (such as a tablet). Our media query would look like this:

<link rel=”stylesheet” media=”screen and (min-width:320px) and (max-width:480px)” href=”css/mobile.css” />

Or, if you are writing it directly in a stylesheet:

1 @media screen and (min-width:320px) and (max-width:480px){
2
3 /*Style Declarations For This Width Range */
4
5 }

Because you want your site to be responsive to a wide variety of devices, you will enable various pixel increments, such as 480, 600, 768, 992, and 1382. As with implementing fluid grids, there are tools that can help you develop media queries for responsive web design. These include:

  •  Bootstrap.
  • The Responsive Calculator.
  • Adapt.JS.
  • Rock Hammer.
  • Skeleton.

These tools make it easier to implement responsive web design.Fluid grids and media queries are central to this mission, and tools, like Bootstrap, offer a solution for building both into your website. Responsive web design ensures users can view your site regardless of device; if you’re not responsive, you need to get on it!

3d illustration: Mobile technology. mobile phoneTraditionally, websites have been built for one type of screen: the desktop or laptop screen. Today, though, we visit sites via a number of different devices, from a 15 inch desktop to a 3 or 4 inch smartphone. That’s a whole lot less real estate than developers have previously been able to fill. Rather than designing and building separate websites for each screen size possible, which would be a herculean task, or designing apps for the various app stores, many webmasters are opting for responsive web design. What is it, and how does it work?

Responsive web design ensures that your site responds to the screen environment. The design uses media queries, or modules that allow the site to figure out how to respond optimally to screen size and resolution of a particular device. Content is then formatted to fit. Ethan Marcotte, author of Responsive Web Design, says, “Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things.” With thousands of device options, having a site that fluidly responds to user needs is critical.

Responsive design begins with a fluid grid. Rather than having a fixed grid, developers define a maximum layout size and divide the grid into columns. This ensures the layout is clear and, well, responsive. Each element is designed with proportional heights and widths. With fixed design or adaptive design, it was based on pixels, which did not change when the screen changed. With responsive design, elements actually adjust their heights and widths.  This means content is viewable, regardless of the screen.

Creating fluid grids is time- and labor-intensive. A forgivable “cheat” is using an existing framework or generator tool on which you will build your layout. This will cut down on the work and give you a great platform. Another benefit is that, if you are new to this, you can use a generator, learn the basics, and then try your hand at building the next one from the ground up.

Some terrific fluid grid tools include:

Remember, creating the fluid grid is an essential part of creating a responsive website – but it is not the only component. Next time, we’ll talk about media queries to ensure users can view and interact with content on smaller screens.

Stopwatch 1

Quality content is the single most important factor in your search rankings, but a host of other aspects of web design, development, and performance play into how you appear in the SERPS. Speed is one of them, and it is critical because it so heavily impacts the user experience. One technique you can use is minifying HTML. This allows you to speed up your load times, reduce page size, and reduce network delays.

What does it mean to “minify” HTML? It basically removes whitespace, comments, and other non-essential elements. At the same time, it does not interfere with the content structure. The result is cleaner, speedier sites. The BBC, for instance, has a hefty site of 77,054 bytes. When it is minified, though, it drops 55,324 bytes, a 28.2 percent reduction. For a site that is so heavy on content and media, this is a tremendous difference.

There are several great online tools that you can use to minify your HTML. (Note: It is important to also minify CSS and JavaScript as well. Why not drop as much weight as possible?)

These minifiers offer a quick and easy solution to minifying your HTML code. When you can compress and cut out the excess weight, you can offer a lean, mean site for Google to index and for visitors to enjoy.