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!

As user interfaces get more complex and visitors get more comfortable with the internet, it’s more important than ever to serve up a great looking design. It’s not enough to give users content that keeps them coming back — users expect a great design. After all, the design of your site is what will catch their attention at first; with that being said, I believe we’re seeing a shift in the way sites are designed. More and more websites are moving from simple, static designs with minimal effects and basic typography to highly dynamic and meticulously curated designs. By adding a little depth to your designs, you can create subtle changes that have tremendous effects to the overall appearance of your design. Ready to dive in?

Shadows

When using drop shadows, doing it in a subtle way is paramount. If you add too much shadow behind an object, the effect looks overdone and not believable. With too little shadow, there isn’t enough contrast and you can’t tell that there is a shadow at all. When you find the right balance, a drop shadow can really help the object jump off the page and make it like its above the other objects on the page.

Carlcartee uses shadows behind each letter box, make a sort of window blind effect. Not only that, but it uses a nice wood texture in the background to make the site even more realistic.

Greg Newman’s site could be used for textures as well, but I wanted to highlight the Date and Comments area of his posts. It uses a light colored background with a rounded edge and shadow, giving it a worn paper feel thats peeling away.

This is an example using the following code:

-webkit-box-shadow: 5px 5px 2px #555;
-moz-box-shadow: 5px 5px 2px #555;
-o-box-shadow: 5px 5px 2px #555
box-shadow: 5px 5px 2px #555;
padding: 5px 5px 5px 15px;

Overlapping

While this might seem pretty elementary, it’s not all that common that you see this done on websites. Maybe it’s because a designer thinks that by covering up one element with another, content might be hidden? I’m not exactly sure, but I really would like to see more of this effect done. It’s so simple, but it creates such a great visual cue.

I love Buffalo’s image rotator here. What I love more is they go outside the box (literally) with their images. It really makes the content stand out and grabs your attention.

Although I’m not a drinker, it’s hard to deny that Barleys header stands out from the crowd. If the different logos don’t steal your attention, the huge logo and outside the box style will.

Overlapping involves use of positioning and z–index, which I won’t cover here. However, have a look at some resources and you’ll be on your way in no time.

Depth of Field

Becoming more common in today’s designs is the use of large background images as well as content sliders that display only images. By adding depth of field to these images, you draw focus to one part of the image and blur the rest out. This can create a dramatic effect and draw attention the focused part of the image. Be careful here, because you don’t want to draw too much attention to the image and have your content lost as a result.

The image of the hummingbird used on the Opera site really speaks volumes to their attention to detail. Hummingbirds flap their wings faster than any other bird, and the way it’s blurred just adds to the “speed” paradox Opera tries to convey.

If I knew what a guy covered in post–it notes meant, I’d tell you; but I don’t. So, I’ll just tell you that this large background image is quirky, and focused in all the right places. While it catches your eye and peaks your interest, it doesn’t detract from the content.

You might be able to find the perfect image to use on your site. But, if all else fails, you can take your own! Arm yourself with a bit of background knowledge and get snapping!

Textures

By adding textures to your design, you can quickly create a sense of realism by signaling a users brain to real life items (think brick wall, trees, concrete, paint, etc). By doing so, you are helping to bridge the gap between real life objects and digital renderings, thus attracting the user. Again, you have to be careful here, because this can quickly become overdone if not executed correctly, having an adverse effect on your overall design.

There isn’t much I can say that you can decide on your own about the Good Bytes website. With lots of texture, I want to reach out and touch my screen just to see what it feels like.

Anton Peck’s site is dark, grungy and really unique. There is such attention to detail and it really shows. I can’t tell you anything else — just enjoy it.

There are so many places to find awesome textures these days; just have a look through these sites or do a search… you’re bound to find something!

1px Lines

Overused? Maybe. Effective? Absolutely. A “1px Line” is the use of two 1px lines, one on top of the other with contrasting colors, which makes the line look embossed into whatever it’s sitting on top of. This is much more visually striking than just one flat color, as it gives the line the look like it has a light source on top of it and looks more 3–D. A variation of this technique can also be used on things like buttons to highlight the edges and make them stand off of the background.

The iKreativ site is clean, easy on the eyes and uses 1px lines really well. Instead of a solid color border on top of a really sweet texture, they decided to go with the 1px line technique, and I can’t say I blame them.

If you haven’t seen Launchlist, go now. Please. It’s beautiful, useful and witty all at the same time. Enough said.

Making these types of lines is dirt simple in Photoshop. You simply make a line that is slightly darker than the background color, then directly under that, make another that is slightly lighter than the background color.

Inset/Letterpress Text

While this is easy to become overused and subsequently abused, it still adds subtle yet impactful depth to a design. If this is used correctly and not overdone, it can really make text stand out. I wouldn’t recommend it be used for entire body copy, rather things like navigation, headings or callouts because it can get illegible if the contrast between the text border and the background isn’t high enough. Try playing with a few different options to see what looks best.

Masswerks has a simple, clean design that uses CSS3 text–shadow to create inset text. It’s a nice touch that adds a nice touch to an already clean site.

Not only is WeGraphics a great place to get super cheap design resources, it is a pleasure to the eye when looking for something. You will notice the inset text effect throughout various parts of the site.

I am Inset Text hear me roar

color: #000;
font-size: 32px;
text-shadow: 0px 1px 1px #bbb;
background:#555;
padding-left:10px

The nice thing about using CSS to do this is you don’t have to mess with Photoshop and if a browser doesn’t support the CSS, the text is still legible.

3D/Folded Ribbon

This is probably the hottest technique that has hit the streets as of late. By using this effect, you can make elements “wrap” behind other elements, giving it the sense that it’s on top and it’s in 3D. Remember – you don’t have to use square edges for this – experiment with curves, angles and opacity for a truly unique effect.

The Hill Country Baptist Church website is loud and in your face — something not usually associated with a church. Take a look at the navigation pictured, then head to the site to see it all of the nice 3D effects throughout the site.

While Delibar could be used for other examples (like borders or shadows), the navigation is pure awesome. It “unfolds” when the current navigation is shown, providing a stylish, 3D effect.

When researching examples of this effect, I came across this tutorial on PVM Garage. While I applaud the author (Piervincenzo Madeo) for such awesome work, it seems to me that there is a lot of code to have to update. Personally, I like to use Photoshop for this effect, and have found these tutorials (step 25) useful in creating really nice 3D ribbons.

Wrapping Up

I cannot stress enough the fact that you should do research and figure out if you need these effects in order for your design to function. Also, take into consideration the amount of these effects you use — more is not always better. There is a fine balance between adding nice design touches and “overdesigning”. If you have any questions, comments or suggestions, drop a line in the comments!

Every business should have a website. A company website is the virtual storefront for your company—if you don’t have one, how will people find you? Consumers are growing more sophisticated and they crave information. A simple Google listing with your phone number and address is not good enough. Consumers want product and service descriptions, photos, testimonials, prices, customer service, etc. You’ve got to have this readily available online because if you don’t, your customers can easily find your competitors that do.

Facebook does not exist so that you can push your products to anyone that will listen. Facebook, and social media in general, is meant to build an online community. Facebook should not be used as the main/only means of finding your business on the web. Facebook should however be used to connect with your customers and build a strong community revolving around your products or services. But on Facebook, it’s not your product that’s important. It’s the people! What do the people think about your product? What do they like? What don’t they like? How could your product be better? You sell your company on your website. You connect with your audience on a personal level using social media. You must do both.

I need to point out something that is so obvious, I feel like it’s too easily overlooked. Facebook does not belong to you. You don’t own your Facebook profile/page and you have no control over its future. This should be reason number one why all businesses should have an actual company website before they dive into social media. What would happen if Facebook were bought out and dismantled into dozens of smaller niche social networking sites? What would you do? You’ve put all this time, energy and money into this page that you do not physically publish yourself. You have no way of getting all of that hard work back if your page were to disappear for some reason. More realistically and in the case of our unnamed boutique, if Facebook were to ever catch wind of your company operating a personal profile, they could delete it entirely without notice as a violation of the terms of use. Then what?

While getting involved in social media is always a good idea for business, the basic principles and business practices have to come first. Social media is not meant to be your company website. It is meant to be the community around/involved with your company. The goal of social media should always be to drive traffic back to your main site and get people to convert. How can  you do that when your only online presence is a Facebook (or God forbid) a Myspace page?

Here are a few local businesses that have got the right idea:

• Cake in a Cup — official website and Facebook page
• The Toledo Museum of Art — official website and Facebook page
• Downtown Latte — official website and Facebook page

Are there any small businesses you know of that are doing a great job with their online presence? Any horror stories you’ve come across because the company wasn’t managing their online presence properly?

[Via: Online MBA Programs]

Keep the message short & concise

There’s nothing more daunting then getting a long, drawn out email that doesn’t get to the point and conceals the overall goal of the message at hand. Why muddle your marketing campaign with non–essential fluff, if all it does is detract the user from your goals? By keeping your message short, simple and easy to scan, it is more likely that a user will find the benefits, important message or whatever your promoting.

37 Signals Newsletters get right down to the point.

If Possible, Personalize

Instead of a generic “Dear Subscriber” or “Hello Sir/Madam” to open your message, why not use the first name of the person being addressed? Most email clients today allow you to include some type of code snippet that will search for that person’s name and apply it. This will create a more personal feel, inviting the user to read your content and hopefully click on your call to action.

Send on a Schedule and Amount

Most, if not all email software will allow messages to be sent at a specific date and time (usually down to the second); with that in mind, considering things like users time zones, day of the week and time of day are all important. For example – if you are on the east coast, but a majority of users are on the west coast, you wouldn’t want to send your message at 8AM, as west coast users would get it at 5AM. By the time they get to their email in the morning, your message will likely be buried.

Along the same lines, considering your message volume is an important factor. Too many messages in a period of time and it’s likely that you will be flagged as spam; too little and the message will probably will get discarded before it’s even read.

Use a smart Subject Line

Subject Lines are like the worm in fishing – they are the first thing seen by a user when your email comes through. If it doesn’t look enticing, the user won’t bite and will swim right past it. Keeping that in mind, getting to the point is critical in the subject — it will make the user decide whether they want to open your message or not. Also, steer clear of spam-like keywords, such as “Free”, “Discount” and “Promotion”, as your message will most likely get routed to the Junk folder before it reaches the inbox.

Provide Something Useful

In every email that you send, you need to provide something useful to the user. If anything else, it shows the user that you care about them and are willing to satisfy them. If you don’t give them anything besides another message in their inbox, they might consider it useless to keep getting your marketing. Things like a discount for a product or a free e-book can help garner some attention from your users.

New Balance provides a button to download a piece of free software right from their newsletter.

Always provide an Unsubscribe Link & Contact Information

Not only is this information required by the CAN-SPAM Act (see numbers 4 and 5), it’s just good practice to give your users options and to give them another way of contacting you. Again, doing this shows that you care about the user, which provides a more personal feel.

Incorporate Social Media Links

By now, you know the buzz surrounding social media and what it can do for your business if used properly. Putting your email marketing to good use, you can link back to your Facebook, Twitter, Youtube, etc. accounts, generate some talk between users and provide yet another way of communication. All you need is a few icons strategically placed in your message and you should see some feedback.

Bride Buzz encorporates a couple social media links in their newsletters.

Design Considerations

Now that we’ve covered some technical guidelines, here are a few design related tips that will ensure you reach a maximum number of users.

Stay skinny!

It’s fairly common that users will have some sort of preview pane to view their messages before opening them in a new window. Typically, these preview panes are less than half the size of a normal window, drastically reducing the amount of screen real estate available to view your message. If you keep your email design skinny, with the important information to the left portion of the message, there is a better chance of that content being seen even if the message never gets opened in a full sized window.

Keep your images to a minimum

Likewise, images are typically turned off by default in most email clients. Because of this, you should keep important text (dates, times, call to actions) as just that – text. If that important text is not displayed because images are turned off, a user might not get a chance to see your “message” in the email. Also, another important consideration is load time. If you have just a few images, the user won’t have to wait for them to load and can get on to reading your email faster.

Sunny Thinking uses just a few images to accompany the main message.

Brand Consistently

Using the same types of graphics, colors and fonts, whether it be on your website, direct advertisements or email campaigns, will keep brand consistency at a maximum. Keeping an email design in line with the website design will create a seamless, polished and enjoyable experience for the viewer, hopefully increasing their trust in your brand.

While some of these tips may seem like common sense, more times than not, we see even the most basic tips go unnoticed. However, by taking a few minutes to include a few of these tips, you should see increased click throughs, better response and less bounces.

Do you have any more tips to add to the list?

In TrueCrypt, there are three different options for Volume Creation.The first option is to create an encrypted file which can be mounted and used as a drive. The file created by using this method can be copied and emailed or moved to a different space and still retain its encryption. The second option is to encrypt a non-system partition or drive like a flash drive or other external storage device. The last option is the same as the second option except it requires the user to enter a password before the OS boots to fully protect the encrypted files. This option can only encrypt Windows XP, 2003, 2008, Vista and Windows 7 operating systems.

Once a user chooses which TrueCrypt Volume to use, there are two more options: standard or hidden. Standard is very basic and only requires one password. Hidden TrueCrypt volume requires two passwords, one for the hidden partition and another for the non-hidden partition. The only downside to using a hidden partition is if the user fills all of the space on the non-hidden partition, the space on the hidden partition will be overwritten to make space for the non-hidden partition. However, this can be prevented by using the mount option “Protect hidden volume against damage caused by writing to outer volume.”

TrueCrypt uses three different encryption algorithms with five different combinations available. The three algorithms used are AES, Serpent and Twofish. Each encryption can be benchmarked and tested to see which is the right option for your needs. Any option with AES is a good choice because AES is the standard encryption used by the US Federal government, the NSA and the National Institute of Standards and Technology (NIST) among a number of other corporations. Version 7.0 introduced hardware-accelerated AES which takes advantage of Intel’s Westmere-based processors new set of instructions that provide over three times the encryption and decryption rate of AES.

TrueCrypt currently uses the XTS mode which is more secure than Cipher-block chaining (CBC) mode. XTS is based on Xor-Encrypt-Xor (XEX) with a Tweaked CodeBook (TCB) and CipherText Stealing (CTS). The NIST recommended XTS-AES mode for confidentiality on storage devices in a special report from January of 2010. In that report the organization says

“The XTS-AES mode provides confidentiality for the protected data. Authentication is not provided, because the P1619 Task Group designed XTS-AES to provide encryption without data expansion, so alternative cryptographic methods that incorporate an authentication tag are precluded. In the absence of authentication or access control, XTS-AES provides more protection than the other approved confidentiality-only modes against unauthorized manipulation of the encrypted data.”

The crypto hash functions used by TrueCrypt are RIPEMD-160, SHA-512 and Whirlpool. RIPEMD-160 (RACE Integrity Primitives Evaluation Message Digest) is a 160-bit message digest algorithm developed in Leuven, Belgium. SHA-512 was designed by the National Security Agency (NSA) and published in 2001 by the NIST as part of SHA-2 set of cryptographic hash functions. Whirlpool was designed by Vincent Rijmen (co-creator of AES) and Paulo S. L. M. Barreto. Out of the three, SHA-512 seems to be the most popular hash function.

TrueCrypt can also protect your files without requiring the use of a password by using keyfiles. A user can chose to use keyfiles in combination with a password or just one or the other. The keyfile could be security tokens, smart cards, a generated file or a random file off the computer such as an mp3 file. You can select more than one file to be used as your keyfile. If you have multiple keyfiles, the order doesn’t matter. Using keyfiles is beneficial in defending against brute-force attacks on a password.

Another great feature of TrueCrypt is the creation of a rescue disk. Once a user encrypts a system partition or drive, TrueCrypt requires that you create a TrueCrypt Rescue Disk. This assists the user in repairing the boot loader if it gets damaged or data is corrupted. It’s a good idea to always make a rescue disk because you never know what can happen once your data is encrypted and this system allows you to retrieve some data so all is not lost if a hard drive goes bad or is infected with malware.

The process to un-encrypt your files, partition or drive is a simple one. First you need to locate the encrypted volume. Next select the drive you want it mounted as. Then type your password and/or use your keyfiles and click “Mount.” When you’re finished, the file that is written to the drive will be encrypted on-the-file. If you have an OS encrypted partition or drive you can only un-encrypt at boot up or from a rescue disk.

TrueCrypt is a great piece of free software that works across multiple OS. The feature that I found to stand out the most was the encrypted file container. TrueCrypt just might give Bitlocker and other disk encryption software a run for their money.

It all started when the New York Times published an article alleging the two were in cahoots and attempting to work out an agreement after their group meetings with the FCC and other Internet service and content providers like AT&T and Skype were getting them nowhere. It made sense that perhaps it would be in Google’s best interest to garner a deal with one of the leading ISPs in the business considering Google is one of the largest providers of content on the web and the Google owned YouTube is an easy target for ISPs claiming it slows their service to customers. But Google has been pro net neutrality since the argument began.

After both companies denied any sort of deal last week but confirmed they were talking, they announced earlier today a joint effort for net neutrality. The two are proposing an enforceable net neutrality agreement that provides a few basic guidelines but does not lead to “anti-competitive measures that hurt consumers.” Click the following link to view their proposal: Verizon-Google Legislative Framework Proposal.

There are still some skeptics that feel there are some ulterior motives behind Google’s and Verizon’s joint venture. Others feel there is too much room for interpretation that could lead to loopholes that fly in the face of net neutrality. Regardless of their intentions and the potential for others to engage in shady business practices, this seems to be a positive step toward net neutrality. Whether this specific proposal is actually adopted by internet service and content providers and the government remains to be seen but it is a big statement. Two of the biggest names involved on opposite sides of the debate have come together. They agree that net neutrality is a good thing and the free and open exchange of information is worth more than a few extra bucks per month to speed certain content through the internet.

What do you think? Is this a step in the right direction? What sort of implications will this have on the discussions being led by the FCC?

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.

It’s my third day in Toledo and I’ve experienced an atmosphere at AVATAR that can only be described as the genuine small business experience. On one end, you have an engaged business, but given the opportunity for playtime, the gang will not hesitate to poke fun at each other and engage in office shenanigans all in the name of fun. For example, today I decided to eavesdrop on a conversation between Robert and Damon with Damon accusing Robert of eating his last dinosaur Silly Bandz bracelet. Watching this exchange I was reminded of similar situations on the hit TV series “The Office.” This exchange was certainly something that you wouldn’t want to miss! But what’s great is how work still gets done in this atmosphere. One end of the office could be in the middle of a rubber band war while I am sitting across from Kristin and Stephanie who are meeting to discuss AVATAR’s next big step in the social media arena. Moments of raucous fun are quickly followed by the sounds of feverish typing and clicking with everyone hard at work. In short, AVATAR is a small business atmosphere upheld by close-knit friends seldom seen at your typical nine to five job.

Reflecting on my visit so far, I’d say that two very valuable things have come of it to this point. First, I’ve learned quite a bit about web development. Second, don’t try something  just because someone tells you that it tastes good — you may regret it the following morning.

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?