All posts in Web Design

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?

Optimising your landing pages is an absolute must. They’re the key to higher conversion rates, and they may be the key to your entire SEO programme. Not sure even where to begin, though? These tips can help.

  • Dump the clutter. People can’t focus on your message if you have too much on the page. Cluttered landing pages only detract from your overall point, and studies have suggested that the more clutter you have on the landing page, the more likely people are to get confused and click away. Get rid of anything visitors don’t actually need to look at. Not only will it help them get the message, but it may also help you to distill your efforts on the page.
  • Offer consistency. Try to stay with your message and image from start to finish for customers. It helps build your brand and customer trust. From the initial ad to the landing page to the response form, make certain that you’re sending the same message, using the same images, and generally offering the same feel for those potential customers. It will help customers to believe in your brand more than any other out there.
  • Create meaningful headlines. Headlines draw attention, and ensuring that you have solid ones on your site is going to help push your message forward. It’s one of the first things site visitors look at, so spend some time crafting yours. You shouldn’t have a headline just for the sake of having one, though. Make certain that it accomplishes something.
  • Get to the point. Site visitors hate boredom. If you overwhelm them with too much text, useless headlines, or babble, they’re not going to stick with you for long, so say what you need to, and get them to convert.

Landing page optimisation is essential to your online marketing success. If you’re not sure what’s going wrong, take the time to consult with a professional SEO company. They can do a quick analysis and offer you suggestions than only an outside eye can provide.

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.

Count On Us

Who are the key visitors to your website? Who are you trying to attract, the crucial – and buying – audience that you want to engage with winning content? Most businesses have a general idea: i.e. we sell football shoes, so we ‘re targeting young athletes or older enthusiasts who star in weekend leagues. But they don’t go much beyond that. Creating user personas gives us an in-depth look at potential audiences, their needs, and potential strategies for converting them into customers.

A Quick Look at User Personas

A persona is a fictional representation of your very nonfictional audience. For instance, we might have Sue, the weekend football star. Your research tells you that this is a demographic you want to hit. Sue is a professional with limited free time. She has children, who also participate in sports, and she wants to be more active and healthy. She is value-conscious, but she also wants great quality. This persona:

  • Describes this type of visitor to your shoe site: mother, busy, professional.
  • Targets her motivation: health, wellness, activity.
  • Hits on her need: budget, value, quality.
  • Implies potential objections: cost of top shoes, time. For instance, time is an issue – so are returns easy and convenient? Is shipping fast?

With this information (and much more – you can flesh these personas out so they actually have an accompanying photo and dossier!), you can develop content and design your website in such a way that her needs are met. What’s more, because you have different demographics within your customer base, you can create a variety of realistic personas.

Creating User Persona

It all starts with research. Who are your users? Why are they visiting your site? What expectations and needs do they bring with them? Can you categorize users? With social media and the ease of UGC, you can collect this data from your customers directly with online surveys, through comments and reviews, emails, and feedback forms. Questions you want to answer:

  • Where do they live? What types of jobs do they have, and at what level? Primary gender? Level of education? Average income? Marital and family status?
  • What types of beliefs and values do they hold?
  • What are their interests, passions, and hobbies?  What are their motivations?
  • What are their most pressing worries or concerns? What are their goals?
  • What’s important to them in life? What is meaningful to them?
  • What behaviors do they want to encourage or change in themselves?
  • How do they view themselves?
  • What value can you give them?

Using this information, develop 4-5 personas, and put as much detail into them as possible. Make them real people. You are trying to sell your product or service to a live audience, not a figment of your imagination! Address their needs and concerns, while offering solutions.

By understanding your customer base, you can build content that meets their needs (not every piece will be directed at Sue, for instance, but you’ll cater to each persona in different ways), and you can begin to optimise content to make it easy and convenient for them to take the next steps.

Do you use user personas to help you make content and design decisions?

 

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.