I’ve been working on a mobile website which requires me to make the site practical and functional across a myriad of devices and their corresponding screen sizes. Usually, this isn’t much of a problem if it’s just text and background colors, because you can just leave the “width” attribute off of your element to have the text & colors fill the screen.

However, for this particular project, it requires the use of large, high quality images to be used as background images. This presents a problem the “background” CSS attribute will not expand or contract based on screen size; instead, it will go by the image size, taking up as much space as the image dimensions. The workaround is the following:

• Add this line to your CSS:  img { max-width: 100% }
• In your HTML, add the image inside the containing div, making sure to NOT specify width and height in the img tag.
• In the  CSS, add “position:absolute” to that image. In the containing div’s CSS, add “position:relative”
• It might also be beneficial to add “top:0″ and “left:0″ to the image CSS, to place it in the top left of the containing div.

What this does is two-fold. It allows you to place an image as the background of a div AND allows it to expand or contract in size based on the screen size. Heres the full code:

HTML


<div id="container">
<img src="images/bg.jpg" alt="" />
</div>


CSS


img { max-width:100% }

#container img {
position:absolute;
top:0; left:0;
}


See a demo of this technique here.

Two important things to remember when using this:

• You’ve got to make the image as large as the biggest “version” of your site. So if the maximum width of your site is 1000px and you want the image to expand across all of it, the image must be 1000px.
• Therefore, if you have a 1000px image, but are displaying the site on a smartphone, it’s still going to download that 1000px image; so be careful of image size. Make sure to optimize as much as possible.

I found the max-width technique from Ethan Marcotte’s books and articles, like this one. Let me know in the comments if this helps or you have any better solutions!

There are some fairly fool proof ways to combat common mistakes, however. By following some pretty simple rules within your Ecommerce store, we can improve sales, generate leads and referrals and subsequently increase conversions. Let’s get started!

1. Remove clutter and distracting elements

The single biggest step I can recommend is removing “clutter” and unneeded elements from the design of the store. In doing so, you will free up sections of the page, which can help for many different reasons. First, it will reduce the amount of information the user takes in, drawing the focus to what is most important on the page, the product. Second, it frees up more real estate for product photos, descriptions and reviews; all of which will help a user make a more informed decision. Finally, by reducing clutter, you reduce the amount of elements that load when a page is requested by the user, thus decreasing their loading times and providing a more responsive feel to the site. Take a look at Lucky Brand Jeans’ site:

By incorporating a large product shot, the focus is drawn directly to the product. You will also notice a solid product description followed by different options you can select. Only when you get to the bottom of the page will you see recommended products. By doing this, they reduce clutter on the page in order to put the main focus on the product and the product only.

2. Make actions clearly visible

Along the same lines, making an Ecommerce site have clear and specific actions is essential to a successful store. Without them, a user might get lost on what to do next (ex: after adding a product to the cart, what do I do?). This becomes exponentially important during the checkout process, as users are very quick to cancel their entire transaction if they get even the slightest hint that they might be doing something wrong; especially if they believe it might compromise their sensitive information.

With that in mind, actions to make extremely clear might include: add to cart, remove from cart, update quantities, checkout, select variation/option and any forms they need to fill out. Below are some examples.

Fugitive Toys has large buttons that clearly pull you to the next action.

REI includes a 1. 2. 3. step process to add a product to the cart, which tells the user exactly what to do to add that product (and any variations) to the cart.

3. Make product shots visually appealing

If you have already removed distracting, unneeded elements from your store, chances are you have some free space (it might even look a bit empty). That’s OK! You can fill up a bit of that space with product images that will highlight the craftsmanship & fine details of your products. A common feature found on Ecommerce sites is a product image gallery. This is quite a useful feature for users because they are able to see multiple images and it will help them to make a more informed decision about the product. Think of it this way: someone can describe something picturesque and beautiful, but if you’ve never seen it with your own eyes, you won’t appreciate it fully; it’s the same with your products online. You can have pages and pages detailing how your products are created, but if a user never sees a decent picture, their opinion will be skewed because ultimately, they want to make the final decision for themselves.

Spy Optics & Converse both use very large product shots to show detail; this is like being able to hold a product in a store.

4. Include value added or related products

Have you ever gone on a camping trip, assembled your tent, and realized you didn’t have any stakes to hold it down? Smaller items like tent stakes can help to increase sales by providing a user something extra to buy at the last minute. If they see a product that they “might need” just before checking out, they may feel inclined to add it to their order (think of the checkout aisle at the grocery store). There are a couple of things to keep in mind, though; first, you have to make these additional products stand out from the rest of the content, to draw attention to them (but do it subtly!). Second, make sure that the product you are trying to cross-sell is pertinent to the product they just are about to buy. Last but not least, it must be extremely simple to add that product to the cart so the user can be on their way in a matter of seconds.

On most product pages at Amazon, you will find items that are “Frequently Bought Together”. Items that correspond to the product being viewed are typically placed here.

5. Checkout process needs to be a breeze

Let’s go to a real life example again. After picking out a few products, you head to the register and run into a long line. When you finally get to the clerk, they aren’t helpful in ringing up your items and give you no indication of when to swipe your card, enter your PIN or sign, and don’t bag your items up for you. Pretty inconvenient, right? Making the entire checkout process simple and easy is an integral part of increasing sales. This section could be an entire article by itself, so I won’t elaborate too much, but:

• Step by step completion can help the user see exactly where they are in the checkout process, giving them feedback and encouraging them to continue.
• Error messages need to be clearly defined and helpful, so that the user can correct the problem quickly and be on their way.
• Security is an increasing concern for everyone, so reassuring the user that their sensitive data is safe is imperative.
• Confirmation of a successful transaction should be clearly stated so that the user understands everything that happened.

Swarovski Crystal has a great checkout process. They have steps to alert you exactly where you are in the checkout process, as well as forms that guide you in case of errors.

6. Go the extra mile to keep users informed

You’re wrong if you think your job is done when the user completes their transaction! Keeping them informed about the status of their order will give them peace of mind that all is well. Emails that tell the user you received their order, their order was processed & shipped, and possibly a follow up email are all key to helping the user through the end. Providing things like contact numbers and email addresses are great because it puts the user in contact with you if they have any questions. Also, adding a tracking number to the email is a great feature that a user definitely appreciates, as they like to see exactly what is happening with their order.

Will these 6 tips guarantee success in every Ecommerce store? No. However, they are guidelines that can be formatted to fit your store so that in the end, your focus is on the most important aspect of your business – the consumer. Take a look at these tips again, and then browse through your Ecommerce site. What can be improved? What can be added or removed? Whether you need to customize your current solution or start from scratch, we have the tools and knowledge to help.



A QR Code of the url www.trustyourtechnologist.com

The basic function of the code is to be scanned (laser based 2D bar code scanner – or more likely, a phone’s camera). On a phone the image is analyzed by a QR Code reading application such as QRdvark and the content, link, and info is then available on the device.

The QR Code is machine readable only, of course. But its usefulness is only limited by the application reading it. For example, a QR Code reader recognizing a URL in the QR Code will open the location in a browser. A QR Code of contact information can automatically create that contact in your address book.

SMS I love your blog

An enormous benefit is that this format can contain 4,296 text characters, 7,089 digits, 2,953 raw bytes, or 1,817 kanji. That’s plenty of information to include full contact information on a business card, details about a movie on a poster, or quick link to a product’s URL. If you have not seen it already, expect to see QR Codes appearing in print ads. A scan of the code could open a URL of the product or a special promotion.

Design QR
These QRs take logos or other imagery and incorporate them into the QR Code. This is possible because there is redundancy enough for a lot of code deterioration before the code becomes unreadable.

AVATAR's DesignQR

Structure
A QR Code contains several meta elements in addition to the embedded information being shared. Extra information about what version of the code is being used but also tracking points to help the reader application adjust for position and skew. A QR Code is from 21-177 modules in height and 21-177 modules in width.

Future Uses
In advertising you attempt to catch the eye and make an impression. QR Codes help make that impression digital. But I think this will also be a major infosharing technique. Current uses include an art gallery tour enhanced through codes to help identify sections of a digital tour or to open more information about the artist, the piece, the period, etc. Street artists tagging their work with QR Codes. Near future uses could include traffic signs auto-read by in-car readers. And future uses such as 3D QR Codes that can store even more information (in theory, an entire video clip), or enhanced encoding techniques that could store more as well.

Luckily, we have a solution for you.  It is a bit more complex than a couple of clicks in your settings but it is not very technical. Essentially, you’ll be hacking the page to force the link. To get started, you’ll need to use Firefox by Mozilla (if you’re an IE user you’ll need to download Firefox). Whether you’re a lifelong Firefox user or you’ve freshly installed it, you need to download an additional tool to actually make the changes you’ll need. You’ll be making the changes using the Web Developer Toolbar that you can download as an add-on to Firefox.

Once you’ve successfully installed Firefox (if necessary) and the Web Developer Toolbar, you’ll first need to go to your official Facebook company page (or whichever page it is that you wish to link). At the very end of the web address for that page there should be a series of numbers. Copy all the numbers stopping once you get to the backslash.

Next go to your profile and click edit and go to the section you wish to change (in this example I’m editing the Education and Work section). Now you need to view the Web Developer Toolbar. Go to the menu bar at the top of your browser and click View, then Toolbars, then Web Developer Toolbar.

There should be a new toolbar that pops up under the address bar. Next, click on Forms and then View and then Display Form Details. You can see the toolbar options and what your screen will then look like below.

Don’t panic. Unless you’re a programmer or a technically minded individual, this probably looks very intimidating. But don’t worry; what we’re doing is quite simple. Remember the series of numbers you copied from the official page that you want to link to? Paste those numbers in the first gray box in the appropriate section. In the case of linking to your employer, the very first gray box after “Employer” would be the correct box. Below that gray box you can then type in the company name. Once you’re done, click the submit button at the bottom of the page. You can now turn off the form details and your employer name should now be forced to link to the official business page as opposed to a generic community page.

Unfortunately, this only works for the company name. If you wish to include your position title and other information, it will still create a link to yet another generic community page. This “hack” doesn’t seem to be a universal fix. You can also find this information on Facebook in their help section. Their help topics are not very helpful but the help discussions section is full of helpful users that have found tips and tricks to answer other users’ questions. If you have any ideas to build further on this method to force link pages, please share them. We would love to hear your solutions.

A common issue facing businesses and organizations today is a lost or stolen laptop or PC that contains sensitive data.  As a result, many companies are starting to move to on-disk encryption to protect their data. Windows Vista and Windows 7 Ultimate and Enterprise editions contain a feature called BitLocker which protects data by encrypting information over entire volumes.

BitLocker is a full disk encryption program that uses the AES encryption algorithm in CBC(Cipher-block chaining) mode with a 128-bit key. BitLocker is only available on Server 2008 and select editions of Windows Vista and Windows 7. There are 3 different authentication modes that can be used as building blocks to implement BitLocker encryption.

Transparent Operation Mode

Transparent Operation Mode uses a key for the disk encryption.  It is encrypted by the Trusted Platform Module (TPM) chip and will only be released to the OS loader code if the early boot files appear to be unmodified.  By using TPM, a user can only protect against software based attacks but the computer is still vulnerable to hardware based attacks.  An example of such attack would be a cold-boot attack where a user doesn’t let the computer shut down completely. This attack relies on data to be in the RAM after power has been removed.

User Authentication Mode

User Authentication Mode or PIN Mode is when a user provides some authentication to the pre-boot environment (usually a username and password). The main problem when using a PIN is the system is still vulnerable to a pre-OS attack. Also, a PIN is great in theory but in order to be effective it must be very difficult, containing many different numbers and letters. But the more complex (and therefore more secure) a PIN is the less likely it is an end-user will remember it. Some users have such difficulty remembering their PINs that they resort to writing them down on a sticky note on their monitor, under their keyboard or somewhere else on their desk. This may help them remember the PIN but it defeats the purpose for it in the first place.

Dongle Mode

Dongle Mode is where a user must insert a USB device that contains a start-up key into the computer in order to boot the protected OS. The main problems with using a dongle are loss of the device and the system is still vulnerable to a pre-OS attack. This method is great against hardware attacks but how many people do you think will actually remove the dongle after they finish using the system?

BitLocker supports the above authentication modes in the following combinations: TPM only, Dongle only, TPM + PIN, TPM + Dongle and TPM + PIN + Dongle.  TPM is the least secure option and TPM + PIN + Dongle is the most secure.  You would think they would support a PIN only or a Dongle +PIN authentication mode.  How hard do you think it is to put in a Dongle versus trying to crack or brute-force a PIN?   Regardless which combination you choose, the smart thing to do is to use an authentication mode that requires two or more authentications.

If you are a business that needs to protect sensitive data, BitLocker is a Windows feature that you might want to check into.  Remember that no security is perfect but it is better to have one or more imperfect methods then none at all.

What is “Fluid” or “Adaptive” Web Design?

Without getting technical, the code behind this technique does all of the heavy lifting on the fly; basically, it computes how to figure out the amount of room to give certain elements on the page, where they should be placed and how large (or small) something should be (like an image) depending on the browser window size. This is a fairly new concept; so much so that most websites haven’t even started to use it yet.

Is there an advantage?

You might be asking: “Why would I need to do this? My site is fine just the way it is!” Well, there are a few good reasons, outlined below:

1. With the rise of mobile browsers (see here and here), getting pertinent information & making it look nice is difficult using the current coding techniques. Using the new adaptive coding procedures, a mobile user is able to see your site just how you intended it to be seen.

 

2. On the opposite end of the spectrum, users on larger formats (like TV’s) have much more real estate compared to a normal computer monitor. An adaptive website will expand automatically to use an adequate amount of space, thus providing a richer experience for that user.

 

3. Users with vision or motor problems will often zoom in on a website; with the new adaptive coding process, the site will keep its design integrity while simultaneously improving the impaired users browsing experience.

Simon Collison's Website

Examples

Ready to see some examples? Check out the original article & its example to get a good idea. Once you get a feel for what you’re looking for, head to Simon Collision’s site – colly.com, Jon Hicks’ blog – The Hickensian, and Couch Camp. When looking at these sites, try resizing it to see how each site responds. Try picturing the site on different platforms such as a mobile phone and take note about how the site resizes itself for such a small window.

Have you even given thought to where your website will be in the future? If it plays out how it’s predicted, mobile browsing will surpass desktop browsing in the next 3-5 years. Is your site ready for a change?

Mobile Safari displaying Apple's full homepage

Internet is the fastest growing media outlet, representing 28% of total media consumption; this is surpassed only by television. Mobile internet represents over 20% of internet traffic and is growing faster than the internet as a whole. Mobile web traffic increased by 110% last year alone, and is expected to grow even faster in coming years due do skyrocketing sales of 3G smart phones. This growth is expected to cause mobile internet usage to overtake desktop usage by the year 2014.  Meaning by 2014, the number of people who view your site through the window of the mobile internet will exceed the number of views from desktops.

Many popular websites have already rolled out mobile versions, such as Google, Facebook, Yahoo, Wikipedia, Bing, eBay and all major news outlets. Mobile browsers have recently taken large steps to improve compatibility with standard websites starting with Apple’s iPhone mobile Safari, which included upgraded rendering and navigational capabilities. This allows mobile browsers to rival desktops in display quality giving mobile users full access to websites.

This does not mean they are without their shortcomings, as a heavy mobile internet user myself, I am always disappointed and irritated when I visit a website that does not render properly on my phone. Screen sizes on phones (which are the most popular mobile device by far) are relatively small, making navigation difficult on websites that aren’t optimized for mobile viewing. When viewed from a mobile device a cluttered or busy page can become all but impossible to navigate, with parts overlapping or not showing up at all, rendering an otherwise fully functional website obsolete and useless to potential customers.

A site that is not optimized for mobile view will deter viewers from staying very long and they will take their business to other, better optimized sites. If you were to visit the mobile pages of any of those sites I mentioned earlier, you would notice they are all very simple, and straightforward. There should be no clutter and ample spacing for finger navigation; links to other important pages need to be large, well placed and easily noticeable while extra content is hidden or collapsible. Users of mobile devices are generally avid users and it can be assumed that they understand the advanced functionality of compressed data techniques.

Mobile web use is accelerating very quickly, as are its abilities to accurately display websites, but due to size limitations, a mobile experience will never be the same as one on the desktop. However, that does not mean that content or the overall user experience should be abridged. It is the job of developers and content providers to accommodate for this difference in order to reach their mobile audience more readily or risk losing them.

Finding the balance is key. The complications of integrating social media and interactive tools and systems into daily marketing activities can by eased by seeing where and how engaging your audiences can be beneficial to you and them.

At AVATAR we concern ourselves often with how individuals interact with information. Or, more precisely, how information that an individual desires can be delivered in a way that meets that individual’s expectations. Epistemological issues with the acquisition of knowledge being a subject for a separate work, let’s establish that communicating large amounts of information into reasonable categories for the uninitiated is a complex task and that this is particularly a concern for information delivery for Government bodies.

Looking at the general make up of a Government body we see a breakdown of their information into the following rough categories: processes, forms, documents, individuals and services.

Processes
Processes (any interaction with particular action, age requirements, and date-related info). Increase transparency of the process of Government by educating citizens on the roles of departments, funding, individuals and the community will result in more balanced information.

Forms
Forms (specific materials that are used to communicate requests or intentions)

Documents
Documents (written record of facts, laws or definition of processes, forms)

Individuals
Individuals are often the largest repository of assistance and information, streamlining access to those individuals will maximize their effectiveness.

Services
Any action performed by a department or individual as defined by a process.

Communication Factors
Communication factors are physical and non-physical barriers that require special consideration when designing the information flow. For Government bodies, these factors are:

Security
Access to information by appropriate parties and interaction with official content such as specific forms requiring physical signatures.

Accessibility
Many citizens with disabilities can be better served by being provided access to services and assistance from the comfort of their own homes.

Legality
The imposed requirements of most Government bodies to provide information has given many file clerks headaches. Being aware of the need to provide unilateral access to information and documentation will allow information management to be designed to simplify and improve how this information is distributed.