Secure Hosting 
Archive for the ‘Web Design’ Category
The Future Of Firefox Mobile
New version will hopefully launch alongside Firefox 11
By Zach Walton
Firefox Mobile has been pretty great to me so far, and I’m sure it has been the same for the 8 million plus users who have downloaded it. While it’s not moving from Android anytime soon, it would be good to know where the platform is heading in the future.
Chris Lord, one of the developers for Firefox Mobile, updated his blog today to give us a look as to what he and Firefox mobile team is working on now. The major news is that the team is completely rewriting the Android version of Firefox. This is because Firefox is now a “native” Android app instead of an XUL app. One of the key advantages to this is that the app will start up much faster now.
They are completely changing the platform as well. This means switching to a multi-threaded application model and switching from a Java-based view compositor to a native-code off-main-thread-compositor. This allows them to directly composite the layers that make up a page on the platform.
The team is currently now working on fixing the bugs present in the mobile version and hoping to get that all sorted out as soon as they can. Once they do get the new version up and running, users can expect “smooth, 60FPS updates, excellent interactive performance, excellent Web standards support and a polished native feeling application.”
Coincidentally, Chris Lord and Lucas Rocha of the Firefox Mobile Team were at FOSDEM last month to talk about the very same thing – The State of Firefox Mobile. While there is not video of the talk, they have uploaded the slides and speaker notes of the talk to give you a better idea of what the future holds for the platform.
The plan was to have the new version of Firefox Mobile ready when Firefox 11 launched. Unfortunately, they have missed that mark as Firefox 11 launched last week. Now we just wait for the new version to be ready when it’s ready.
About Zach Walton
Zach Walton is a Writer for WebProNews. He specializes in gaming and technology. Google+
Posted under Mobile, Web Design, Web Development | No Comments
10 Ideas to Get More Comments on Your Facebook Posts
via fanpageflow.com
So, you’ve built a Facebook presence for your company or organization, you’ve added tons of fans, and now you wonder, what’s next? Sure, you use your Facebook page to share the latest news about your company and to reach out to new customers, but most of the time your page just sits there. Look at some of the big Facebook pages, what do they have going for them that you do not? The answer is interactivity. The best Facebook pages are those that have posts, likes and especially comments from the fans. Therefore, if nothing exciting is going on, here are some ideas, fun and practical, for posts you can make to get your fans talking back.
1. Spoilers
This is one of the best ways to build suspense and excitement about your product or service. Give your fans a taste of what is coming up, without completely giving it away. Similar to a movie trailer or promo spot for a television show, pique their interest.
2. Personal Insight
Use your Facebook posts to give your fans a little insight into who you are as a person. People want to relate to the products and services they use, and if they learn more about the person behind the page, they will feel that connection with you.
3. Topical Jokes
Find jokes, comics or puns related to your company or industry. Generally if people bother to “like” your page, they at least have a passing interest in the field you’re involved with. This may take a bit of effort on your part, but find posts to make your fans smile.
4. Links
Along the same lines, share useful and fun links with your fans. You do not want to bombard them with hundreds of messages like this, but if you find a useful app, page or even an amazing video, do not be afraid to share it with your fans.
5. Challenges
This is especially useful for Facebook app pages, but can be adapted for nearly any page. Challenge your fans to beat a high score, discover new content or add something to your page. People naturally want to prove themselves and a challenge is sure to appeal to those with a competitive side.
6. Contests
You do not have to offer anything major, but hold a drawing, ask a trivia question or any otherwise host a contest for your fans. Just giving away a T-shirt with your logo or a credit for your services will encourage your fans to jump in and participate.
7. Requests for Input
Very few companies actually solicit advice from their customer base, and this is a shame. Ask your customers what you can do better, what products or services they are looking for or anything else on which you want input.
8. Holiday Wishes
Take time to wish your customers and fans a happy holiday. You don’t have to limit yourself to the more typical holidays. Wish your fans a happy Chinese New Year, Cinco De Mayo or even “Talk Like a Pirate Day.”
9. Fun at the Office
Another way to prove yourself as a “real” person instead of just a faceless corporation is to give your fans an insight into the company. Take some pictures of you and your staff at work or play and share these with your fans.
10. Commentary on Current Events
This is one you want to be careful with, you likely want to avoid strong political leanings, but mentioning current events is always a great way to get people talking; everyone has an opinion.
These are just a few of the types of posts you can make that will get your fans interacting on your Facebook fan page. If your page is more interactive, not only will your current fans be more likely to come back and check out what’s new, they may share your posts on their own feed, which will lead new fans directly to your page. Take the time to make regular posts on your Facebook page so it does not become stagnant, and you are certain to reap the benefits of a larger and more active fan base.
Posted under Facebook, Marketing, Web Design | No Comments
10 Must have Qualities of a Website to Become a Successful Brand
In today’s internet driven era where each user is inclined to search for services and products online. It is essential to have a powerful online presence. At this juncture it becomes essential to design a website that is supportive of the products and services as well. This should not only leave good impression upon the visitors but also compel them to come again and avail the services. Not only this, in today’s world where the memory of a consumer is short lived and is continually being bombarded with various messages, it becomes essential to be able to reach out. This means that the customer must be given various reasons to visit the website and check out the products again and again.
The most important aspect of online presence is creating a relevant brand presence and strong brand image. It is more about letting others know that you exist on the World Wide Web, and the presence should be such that it leaves a deep impact. It is about design and development that serves as the structure of what is being conveyed online.
Through this article you would be given a good view about the must have top 10 qualities that a website must incorporate for successful branding. Following these given pointers you would be able to create a successful brand presence in the minds of customers. This would then lead to a good transaction, various relevant business association and even customer retention.
1. Creating Brand Importance
Branding is very important to reach far and wide to your niche market. It is all about spreading vital information to your viewers as well as loyal customers. Furthermore, it is essential to remember that the customer needs to be regularly reminded about your brand. For this purpose one needs to focus upon sending messages utilizing various media vehicles. Advertising, newsletters, blogs and even e-mailing are some of the essential features that go a long way in creating brand importance.
2. The Brand Is Everything
It is all about ‘the brand’ then why not focus upon creating a strategy around the brand promotion. It is just like when it comes to coffee the first thing that comes to the mind is Starbucks. This name has become synonymous with coffee and is evident of the fact that the customer relates to it. Similarly when designing a website for creating brand one must keep in mind about the impact it is going to cause on the audience. It must be able to relate to the customer demands. After all you would like your brand to speak for your business. So the best way to create a website that is appealing to the visitor on one goes with pictorial representation as well as graphics that would immediately appeal to the visitor.
3. Website reflecting the Brand’s Creed
A good website is all about reflecting the brand’s creed. This would initially involve the development of a branding strategy and based upon it would be its website that would focus upon identifying the brand’s (the business’) core values. The designing should be such that the customer or the visitor must be convinced that any kind of transaction will lead to customer satisfaction. For this purpose one can include testimonials. These would act like a boost to the company’s image.
4. Carrying out a research
Whenever one is focusing on brand image it is essential to check out on the current market scenario. This is important to be able to stay up to date when it comes to designing or utilizing the prevalent theme. It is important to research beforehand and understand the strategies that are being used by the competitors to lure the audience.
5. It is all about Target Audience
It is important to understand the mindset and the psyche of the target audience. This way the brand presence will become more effective. The website should be designed keeping in mind what the audience would like to hear and see. You should be able to succeed in giving out a good brand proposition.
Here you need to keep in mind following questions:
Who is your target audience? What does your target customers presently requires? What does your competitor presently offer? How can your products/services fulfill the need better? Are you able to send across a more proactive, vociferous, clear and crisp message to your target audience, in contrast to your competitors?
6. Developing a Brand Statement (Brand Proposition)
In order to develop a Brand statement one needs to precisely understand the concepts of brand proposition and present the same in a way that it appears meaningful to target audience and more importantly provide them with a solution to their requirements. So, not only the design but the overall look and feel must be so much engaging that the visitor or the client must be able to find meaning to it. It should be something that will give a reason to the customer to be associated with the company. A complimentary service or a USP that gives a value added service to the customer.
7. Creating an imprint on customer
It is essential to create an impact or imprint in the memory of the customer. For this it is essential to design the website accordingly. It should be able to display products and services in best manner. This can be given on the home page of the website to attract customers.
8. Deliver the Unexpected
Well, developing a website has a great focus on what actually is offered by the company. One need not be superfluous in language or content. Embellishing the website may be useless if the customer is not able to find what they are looking for. It is about the service or the product that must reach out to the customer. So any exclusive services or offers should be displayed in an attractive manner on the website in order to let the customer know about the extra credits that they are getting.
9. Winning the Hearts and Minds
It is important to create a positive emotional attachment to the brand in the following manner:
- Aligned with the brand’s core values
- It must be Unique and Relevant to your target audience
- Able to incorporate an element of emotional attachment
- Always maintain a connection and consistency in the messages and values while conveying the same across different marketing and advertising channels like online media, print and etc.
- Whatever is being conveyed to the audience must be loud and clear.
- Echoed by strategic partners
- Able to adapt to a changing marketplace
10. Captivating presence
The message conveyed should be presented in an engaging, relevant, and consistent manner Remember one thing that developing the most effective and appealing design it is important to captivate the audience. But this doesn’t means that the text displayed should be colorful and in varied font styles. This seems more like distracting. It should be consistent and uniform in font style, color and simplistic in style.
All the above given tips must be incorporated when it comes to designing an effective website that would serve the rightful purpose of creating relevant brand position.
Author Bio
PixelCrayons is a creative web design and development company that offers custom web design and development services, online shopping cart development, PSD to HTML & open source content management system solutions at affordable price.
Posted under Marketing, Web Design, Web Development | No Comments
7 Best Practices for Improving Your Website’s Usability
by
Writing content for web users has its challenges. Chief among them is the ease with which your content is read and understood by your visitors (i.e. its readability).
When your content is highly readable, your audience is able to quickly digest the information you share with them — a worthy goal to have for your website, whether you run a blog, an e-store or your company’s domain.
Below are a handful of dead-simple tips and techniques for enhancing the usability and readability of your website’s content.
These tips are based on research findings and suggestions by well-regarded usability experts such as Jakob Nielsen.
This list is not exhaustive, and is meant merely to arm you with a few ideas that you can implement right away. If you have additional tips to add, please share them in the comments.
General Goals of User-Friendly Web Content
Usable, readable web content is a marriage of efforts between web designers and web content writers.
Web pages must be designed to facilitate the ease of reading content through the effective use of colors, typography, spacing, etc.
In turn, the content writer must be aware of writing strategies that enable readers to quickly identify, read and internalize information.
As we go through the seven tips below, keep these three general guidelines in mind:
- Text and typography have to be easy and pleasant to read (i.e. they must legible).
- Content should be easy to understand.
- Content should be skimmable because web users don’t read a lot. Studies show that in a best-case scenario, we only read 28% of the text on a web page.
What simple things can we do to achieve these goals? Read on to see.
1. Keep Content as Concise as Possible
It’s pretty well known that web users have very short attention spans and that we don’t read articles thoroughly and in their entirety. A study investigating the changes in our reading habits behaviors in the digital age concluded that we tend to skim webpages to find the information we want.
We search for keywords, read in a non-linear fashion (i.e. we skip around a webpage instead of reading it from top to bottom) and have lowered attention spans.
This idea that we’re frugal when it comes to reading stuff on the web is reinforced by a usability study conducted by Jakob Nielsen. The study claims a that a 58% increase in usability can be achieved simply by cutting roughly half the words on the webpages being studied.
Shorter articles enhance readability, so much so that many popular readability measurement formulas use the length of sentences and words as factors that influence ease of reading and comprehension.
What you can do:
- Get to the point as quickly as possible.
- Cut out unnecessary information.
- Use easy-to-understand, shorter, common words and phrases.
- Avoid long paragraphs and sentences.
- Use time-saving and attention-grabbing writing techniques, such using numbers instead of spelling them out. Use “1,000″ as opposed to “one thousand,” which facilitates scanning and skimming.
- Test your writing style using readability formulas that gauge how easy it is to get through your prose. The Readability Test Tool allows you to plug in a URL, then gives you scores based on popular readability formulas such as the Flesch Kincaid Reading Ease.
2. Use Headings to Break Up Long Articles
A usability study described in an article by web content management expert Gerry McGovern led him to the conclusion that Internet readers inspect webpages in blocks and sections, or what he calls “block reading.”
That is, when we look at a webpage, we tend to see it not as a whole, but rather as compartmentalized chunks of information. We tend to read in blocks, going directly to items that seem to match what we’re actively looking for.
An eye-tracking study conducted by Nielsen revealed an eye-movement pattern that could further support this idea that web users do indeed read in chunks: We swipe our eyes from left to right, then continue on down the page in an F-shaped pattern, skipping a lot of text in between.
We can do several things to accommodate these reading patterns. One strategy is to break up long articles into sections so that users can easily skim down the page. This applies to block reading (because blocks of text are denoted by headings) as well as the F-shaped pattern, because we’re attracted to the headings as we move down the page.
Below, you’ll see the same set of text formatted without headings (version 1) and with headings (version 2). See which one helps readers quickly skip to the sections that interest them the most.
What you can do:
- Before writing a post, consider organizing your thoughts in logical chunks by first outlining what you’ll write.
- Use simple and concise headings.
- Use keyword-rich headings to aid skimming, as well as those that use their browser’s search feature (Ctrl + F on Windows, Command + F on Mac).
3. Help Readers Scan Your Webpages Quickly
As indicated in the usability study by Nielsen referenced earlier, as well as the other supporting evidence that web users tend to skim content, designing and structuring your webpages with skimming in mind can improve usability (as much as 47% according to the research mentioned above).
What you can do:
- Make the first two words count, because users tend to read the first few words of headings, titles and links when they’re scanning a webpage.
- Front-load keywords in webpage titles, headings and links by using the passive voice as an effective writing device.
- Use the inverted pyramid writing style to place important information at the top of your articles.
4. Use Bulleted Lists and Text Formatting
According to an eye-tracking study by ClickTale, users fixate longer on bulleted lists and text formatting (such as bolding and italics).
These text-styling tools can garner attention because of their distinctive appearance as well as help speed up reading by way of breaking down information into discrete parts and highlighting important keywords and phrases.
What you can do:
- Consider breaking up a paragraph into bulleted points.
- Highlight important information in bold and italics.
5. Give Text Blocks Sufficient Spacing
The spacing between characters, words, lines and paragraphs is important. How type is set on your webpages can drastically affect the legibility (and thus, reading speeds) of readers.
In a study called “Reading Online Text: A Comparison of Four White Space Layouts,” the researchers discovered that manipulating the amount of margins of a passage affected reading comprehension and speed.
What you can do:
- Evaluate your webpages’ typography for spacing issues and then modify your site’s CSS as needed.
- Get to know CSS properties that affect spacing in your text. The ones that will give you the most bang for your buck are
margin,padding,line-height,word-spacing,letter-spacingandtext-indent.
6. Make Hyperlinked Text User-Friendly
One big advantage of web-based content is our ability to use hyperlinks. The proper use of hyperlinks can aid readability.
What you can do:
- Indicate which links have already been visited by the user by styling the
:visitedCSS selector differently from normal links, as suggested by Nielsen, so that readers quickly learn which links they’ve already tried. - Use the
titleattribute to give hyperlinks additional context and let users know what to expect once they click the link. - For additional tips, read >Visualizing Links: 7 Design Guidelines.
7. Use Visuals Strategically
Photos, charts and graphs are worth a thousand words. Using visuals effectively can enhance readability when they replace or reinforce long blocks of textual content.
In fact, an eye-tracking study conducted by Nielsen suggests that users pay “close attention to photos and other images that contain relevant information.”
Users, however, also ignore certain images, particularly stock photos merely included as decorative artwork. Another eye-tracking study reported a 34% increase in memory retention when unnecessary images were removed in conjunction with other content revisions.
Posted under Web Design | No Comments
Make Your HTML Email 5½ Times More Mobile Friendly
by Josh Rubinstein.
Why should you care?
From the time we rise until the wee hours of the night our smart phones are never far from our opposable thumbs. Despite the proliferation of “umpteen” social networks, email still tops out as one of the most common tasks we perform while on the go or at our desks.
The Concept of “The One Web” represents a shift in thought towards “democratically” publishing online content to a range of devices. At Estately, whenever we talk to our customers, we hear that they read our Saved Search alert emails in the “fleeting moments” when a meeting hasn’t quite started or while scarfing down some fruity pebbles cereal in the morning. One of our users told us that in the morning the alarm goes off and, before he’s out of bed, he looks through new emails on his iPhone.
The statistics back this up: no matter what service your company provides, your HTML email needs to be optimized for mobile today – according to Campaign Monitor, the iPhone now accounts for almost 15% of their email subscribers. Heck world-wide Smart Phone activation is outpacing births by 3X!
One HTML template for them All
Part of the goal for the HTML Email template design was to only require the use of one template for both mobile, desktop and anything else the industry creates in the next 6 months for that matter! Approaching design and UX challenges with wearing the lens of Progressive Enhancement in mind makes the world a nicer place!
I didn’t want to depend on CSS3 media queries for content scaling. I wanted to provide as much support to various devices by using percentage widths and max-widths.
Like-wise when CSS3 is supported I figured the device would be responsive enough for advanced stying and design, as you will discover below with my work-in-progress for Retina display support in HTML email.
We all know that Microsoft Outlook 2010 and 2007 are crap for rendering HTML. WORD!
Exhibit A, Exhibit B There’s also a few other doosies out there too, checkout Campaign Monitor’s Guide to CSS Support in HTML Email Notice there’s a lot of those red “X’s”.
Tip #1: Design all “clicks” to be touch friendly!
Large “Touch Target Sizes” for images, links and buttons will ensure you are a humble champion. There is nothing more frustrating on a slow connection like having to wait for the wrong page to load! Touch Targe Sizes, Accessibility and Ergonomic Guidelines
Tip #2: Stunning images on iPhone Retina Display
First impressions are worth taking seriously even if they are a bit more on the subtle side. Will your subscribers stop receiving your emails if your logo is a bit choppy? Don’t compromise if the solution is within reach. I like this approach for supporting the higher resolution displays because all subscribers will see the same content. I aspire to the mantra of Progressive Enhancement. All users will see the ALT text and with images on a logo. If they happen to be using a high resolution display such as the iPhone Retina display they will see a super crisp version of the logo.
HTML
<span style="position: relative; display: block; height: 41px;"> <a href="#" class="logo-link" style="display: block; height: auto; color: #4C6A8B;font-weight: bold; text-decoration: none; text-align: left;"> <b></b> <img style="font-size: 20px; text-align: left; border: none; font-size: 14px; height: 41px; outline: none; text-decoration: none; font-weight: bold;" alt="text for image" height="41" width="200" src="#" /> </a> </span>CSS
Note, you will have to update the image paths and dimensions to work with your content and design.
// Yahoo! Mail ignores any styles that use attribute selectors // this helps override it loading @media queries which it give // extreme precedence @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { a[class = logo-link] b { background: url("http://logo.png") no-repeat 0 0; width: 200px; height: 41px; background-size: 100%; position: absolute; z-index: 10; display: block; } a.logo-link:after { content: "Estately"; position: absolute; top: 0; text-align: left; width: 200px; height: 41px; display: block; } span a[class=logo-link] img#estately { display: none; } }Tip #3: Providing ALT text for background images
Simply add the CSS below to the media query outlined in Tip# 2. Here we are taking advantage of the CSS Pseudo Class :after and the CSS2 content property to add the ALT text for the high resolution imagery.
CSS
// Yahoo! Mail ignores any styles that use attribute selectors // this helps override it loading @media queries which it give // extreme precedence @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { a.logo-link:after { content: "Alt text for Logo"; position: absolute; top: 0; text-align: left; width: 200px; height: 41px; display: block; } }Tip #4: Prevent Webkit & Windows Mobile platforms from changing default font sizes
Mobile Safari has a default text size that’s greater than 100%, which can puff up your layout in ways you did not intend. There’s lots of advice out there that suggests by setting -webkit-text-size-adjust to none the problem is solved. There has been some good discussion around this topic and it’s worth reviewing so you don’t blindly implement the following suggestion. If you were to set the property to none desktop WebKit users would loose the capability to “zoom.”
CSS
// Corrects font-size on mobile/handheld devices w/o preventing zooming // in WebKit browsers @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { body { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } } @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { body { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } }Tip #5: Scaling Images, Responsive Design Approach
Email clients vary in their design and implementation so much. Some are based on antiquated rendering engines and others have umpteen layout options and overloaded “tool belts.” It’s anyones best guess just how much screen area your actual message will be given. I have choosen to use a combination of percentage widths with max-width settings to achieve a layout where images can scale up to 600 pixels wide and down to 350 pixels. It’s not perfect in all clients such as Outlook 2007 and 2010 but the content and utility of the layout are not compromised, while providing a optimal experience for the majority of email clients.
HTML
<body style= "width:100% !important; max-width: 800px; background: #ffffff; margin: 0 auto; padding: 0; color: #4c4c4c; text-align: center;"> <table border= "0" cellpadding= "0" cellspacing= "0" align= "center" style= "width:100%; max-width:600px; background: #ffffff; font-family: Arial, Helvetica, Verdana;"> <tr> <td> <a href="#" style="width: 100%; max-width:600px;"> <img src="image.jpg" alt= 6 Photos border= "0" style= "border: none; font-weight: bold; height: auto; line-height: 100%; outline: none; text-decoration: none; text-transform: capitalize; -ms-interpolation-mode: bicubic; width:90%; text-align: center; background: #E6F1F8; font-family: Arial, Verdana; font-size: 16px;" /> </a> <td> <tr> <table> </body>Tip #5.5: Make Internet Explorer Smooth
Internet Explorer’s default image scaling made your Pentium 266 work, but it today it just makes any scaled image look horrible. Make IE smoother and more sensual by setting image scaling for Internet Explorer to smooth: -ms-interpolation-mode: bicubic;
See CSS Tricks for image examples and further reading.
CSS
// If you use width or height tags to resize images in your markup, // IE will ensure they look incredibly awful unless you use this. -ms-interpolation-mode: bicubic; “You have mail” Demo
Hope the improvements and the code samples got you enthusiastic again about HTML Email. My goal is to help you communicate more effectively and provide the best experience possible for your design and subscribers. I certainly developed solutions for my design needs. You may find it necessary to adapt and explore tweaks and new solutions all together. If you come across any improvements or new solutions please let us know!
Guest Author Info
Josh works with the fine people of Estately, a comprehensive online real estate search for home buyers to shop and tour homes. Josh feeds upon the dynamic between design and development finding inspiration from both communities. When he’s not in front of the computer, you can find he and his wife working on their Seattle home.
this article originaly appeared here… webdesignerwall.com
Posted under HTML 5, Web Design, Web Development | No Comments
Hosting
Starting at $9.99!
Partners
