Hire a web Developer and Designer to upgrade and boost your online presence with cutting edge Technologies
Showing posts with label General. Show all posts
Showing posts with label General. Show all posts

Tuesday, December 6, 2011

Ban the Bloat: 5 Reasons to Watch Your Page Weight

I’m stunned. many people have written several web page bloat articles over the years but it’s all been in vain. According to Pingdom, a performance monitoring service, total web page file sizes have increased by 25% during the past 12 months.

The average web page now weighs 784KB compared to 626KB in November 2010. Remember that’s an average: 50% of sites will exceed that size. To put it into context, a single page can be 10% of the browser application which was downloaded to render it.
The Pingdom article concludes that the main culprits are:
  • JavaScript: an increase of 44.7% (103KB to 149KB)
  • images: an increase of 21.2% (372KB to 451KB)
But why? HTML5 technologies are far more common. I would have expected a minor increase in HTML and CSS code — especially to cater for CSS3 vendor-prefixes — but shouldn’t JavaScript and image sizes should be dropping? There’s less need for image-generated gradients, coded animations, rounded corners, shadows, etc.
I also expected Flash usage to drop but it’s increased from 77KB to 87KB (13%). I suspect it’s primarily used in advertising, but HTML5 alternatives and Adobe abandoning mobile platforms are yet to have an effect.
So, is the problem that designers and developers rarely worry about page bloat? Anyone moving into the industry within the past five years has enjoyed the luxury of reliable broadband. Those who experienced the pain of dial-up connections often needed to optimize every byte — I can remember omitting closing tags and attribute quotes just to squeeze pages further.
Obviously the situation has progressed and few people would limit themselves to the 50KB maximum developers adhered to during the late 1990s. But there are many good reasons why you should habitually minimize your file sizes…
1. Search Engine Optimization
If two sites have similar content and page-ranks, the one which loads faster will gain a higher position in Google.
2. Reduced Cost
Smaller file sizes result in reduced hosting costs, bandwidth charges and user time. These factors are never free and, the more popular your site becomes, the more you’ll be charged.
3. Slow Connectivity
Just because you have fast unlimited access, don’t assume everyone else is sitting on a fat pipe. The situation is especially dire in the western countries which are dependent on aging copper telephone networks. A proportion your market will have a slow connection — or even dial-up — because that’s the best they can get.
4. Mobile Access is Increasing
Web access from smartphones tablets are popular. Eventually, they’re expected to overtake desktop browsing. Even those with reasonable 3G access will be waiting 30 seconds for your 1MB monolithic page to appear. Is that progress?
5. Developing Markets
Unlike the West, Asia and Africa will experience explosive internet growth during the next decade. The relative area sizes and population distributions mean that slow or mobile connectivity are the only option for the foreseeable future.
Perhaps those markets aren’t important to you now, but they will be. Besides, unlike the west, many of those economies aren’t bankrupt … they may become your only market!
Finally, let’s not forget that smaller file sizes normally results in more responsive applications. That’s good for everyone.
Let’s hope Pingdom’s 2012 report shows a big reduction in file sizes.

Sunday, December 4, 2011

A Brief Look at Screen Resolutions

In comparison, the argument about designing for particular screen resolutions has been quite tame these past few years. When designers say that a site is designed, or optimized, for a particular screen resolution, they’re actually talking about the resolution of the viewer’s monitor. In the past, the screen resolution debate was focused on whether our designs should still accommodate monitor resolutions of 800×600 without displaying a horizontal scrollbar.
According to W3Schools’ screen resolution statistics, in January 2010, 1% of web users had their screens set to 800×600 pixels (down from 4% in 2009), 20% had their resolutions set at 1024×768 pixels (down from 36%), and a whopping 76% of visitors had a resolution higher than 1024×768. The figure below illustrates these trends.
These days, it’s a given assumption that desktop browsers display at least 1024×768. Even the majority of netbook computers have a 1024×600 or higher resolution. For that reason, 960px has become the de facto width for most web design projects. With W3Schools reporting the growth of users with resolutions greater than 1024, you’d think we’d be looking to push the standard width past 960, but there are a couple of reasons why this probably won’t happen. First, most users with larger monitors still keep their browser window set less than 1024 pixel-​​wide, so they can see other applications they have running. The other reason is line length. If a line of text is too long, it becomes less readable. Therefore, a wider default layout width would really only allow us to add more columns.
W3Schools’ screen resolution statistics
W3Schools’ screen resolution statistics
Although desktop browser statistics like those provided by W3Schools justify our use of 960 pixel layouts, they ignore a major segment of the web browsing population: mobile users. Again citing Ethan Marcotte’s “Responsive Web Design” A List Apart article, mobile browsing is expected to outpace desktop-​​based access within three to five years. As mobile screen resolutions increase and mobile browsers catch up to their desktop cousins, it’s safe to say that your website design will be readable in modern mobile devices. You should still include popular mobile devices in your browser testing, though; if we’re struggling to make the sites we design look right in IE7, shouldn’t we be checking them on mobile browsers as well?
Taking the increase in mobile usage a bit more seriously, a greater amount of websites are providing mobile-​​optimized versions of their sites; this, of course, means that more and more clients will be demanding mobile-​​optimized sites as well. This used to be a complicated task, dealing with mobile-​​specific languages like WML and awful, inept browsers like Blackberry’s old RIM OS.
Blip.tv on iOS (as seen on http://cssiphone.com)
Blip​.tv on iOS (as seen on http://​cssiphone​.com)
Fortunately, designing a mobile-​​optimized site today is mostly about revamping your layout to work on mobile screens while possibly leveraging some of the bonus features of the OS to make it shine. Covering the technical details of designing a mobile-​​optimized site is outside the scope of this book, but the layout principles and design theory discussed in the rest of the chapter still apply. At the end of the day, no matter what you’re designing, the needs of your client and their target audience should be the driving force behind your decisions.

25 Beautiful Examples of Captivating Website Headers

Looking for some inspiring website headers? Look no further! From “green” designs to techie grunge, this collection runs the gamut of over-​​the-​​top, over-​​sized website headers. Some of these designs incorporate navigational elements within the header, some place the header at the top of the page, and others use the header to take up most of the viewable screen.
When viewing the examples below, note the trend towards illustrations, too. Even when photographs are used, they are highly stylized with illustrative elements. No question about it — these are eye-​​catching.
Hence, they are all great pieces for gathering ideas for your own amazing website header designs because, after all, the header is what visitors see first. If your header is not visually appealing, visitors may begin the navigation of your site with a negative feeling. So, take a look at the roundup below and allow them to feed your creativity.
Which are your favorites?

Racket



Octwelve



iVista Illustrations



Nintendo



Yodda



Planetopija



Ectomachine



Dark Dayz



Simple.art



Atlantico



The Georgian Wine Society



Flash Header by =INvasive



Juan Diego Velasco



Website Headers by Isabel Seiffert



Weberica



Bechira



Urban Cool



Drop Bags



Living Designs



Colby James West



Viget



Poziteeve



Marchanddetrucs



Slim Kiwi



A Better Play by Michelin Tires

How to Test Your HTML Email Newsletter Before You Hit Send


So, you’ve come up with a HTML email design you’re happy with. Woo! Before you start mailing it out, you’re going to need to test it. There are so many email web apps and desktop clients out there with differing requirements, and ensuring that your newsletter looks great for the overwhelming majority of readers is incredibly important. I use a two-​​step testing process that includes preliminary testing using a desktop client and a small test group, and final testing using your mailing list web app of choice, such as Mailchimp or Campaign Monitor.

Preliminary Testing

Although there are plenty of alternatives for sending your test emails, I found Thunderbird the easiest.
Once you have Thunderbird set up:
  1. Select and copy your HTML template to your clipboard.
  2. Create a new email in Thunderbird, then select and delete any signatures automatically included.
  3. Click inside the text area and go to Insert > HTML—a text box will pop up, allowing you to paste your HTML in.
  4. Hit “Insert” and you’ll be ready to send.
However you may not currently use Thunderbird as your default mail client, and indeed, may not wish to. If this is the case, consider creating a new Gmail account and using Gmail’s SMTP/​POP server settings to send your test mail from Thunderbird. This will keep your everyday email clean and separate from your testing mail.
You can also set up groups in Thunderbird (referred to as “Mailing Lists”) that enable you to send to a number of different addresses (and clients) from one address. For my own early testing stage, my group included:
  • my default Thunderbird account
  • a Gmail account
  • a Yahoo mail account
  • an MS Outlook 2007 account.
These certainly aren’t the only clients you might consider for early testing, but they gave us a reasonable snapshot of where we were at throughout the process.
Getting the Outlook 2007 test bed running was the most troublesome. I originally tried downloading the trial from Microsoft. Unfortunately, the installer then informed me it was happy to install Word, Access, PowerPoint, and every other app. Except Outlook 2007 — which for unknown reasons was grayed out. Oh joy!
Eventually I tracked down and installed the full version. Again, to keep things clean, I set up a brand-​​spanking new Gmail account, solely dedicated to receiving mail for Outlook 2007.
While it might be tempting to consider using a service such as Campaign Monitor to allow you to generate Outlook 2007 screenshots, the practicalities of tuning your HTML via an online service are questionable — you’ll need to do lots of tweaking and this will be slow and expensive.
The one really useful thing we did discover during this phase is that, like IE, Outlook does support conditional comments. While in many ways this is cold comfort, it at least allows you to remove items that have no chance of working in Outlook 2007 (such as forms and complex positioning CSS).
However, beware. This is dark magic, so use it with care — and not at all if you can help it.

Final Testing

Okay, so you have a template that appears to be behaving itself in your smaller test group. It’s probably time to bite the bullet and go to an email testing service. We’ve used Campaign Monitor but I know that MailChimp runs an excellent equivalent service too.
After uploading and importing your HTML, the Campaign Monitor service allows you to test your template in around 20 different mail clients — although at busy times some clients have been known to time out.
However, keep in mind that a single set of tests costs around $5.00 and can take up to an hour to generate, so you would want to be fairly confident your template was close to finished before starting this stage of testing. This is not a time for incremental tweaking.
The Campaign Monitor test suite breaks down into three major groups:
Web-​​based email clients
  • AOL Web
  • Comcast
  • Earthlink
  • Gmail
  • Mail​.com
  • MSN Hotmail
  • Windows Live Hotmail
  • Yahoo! Classic
  • Yahoo! Mail
Desktop email clients
  • AOL 9
  • Lotus Notes 6.5.4
  • Outlook 2003
  • Outlook 2007
  • Outlook Express 6
  • Outlook XP
  • Thunderbird
  • Windows Mail (actually, what is that?)
Mobile email clients
  • Blackberry
  • Windows Mobile 5
  • Windows Mobile 6
We also had our own Apple Mail clients and iPhones available to test the design.
While this certainly seems like a pretty comprehensive test list (especially compared to the five or six browsers you might typically test a web design on), it’s still not quite enough for you to let your guard down — as we found out the hard way.
As we were preparing to send the first edition of the new Tech Times template, my teammate still reported seeing serious layout issues in Gmail. Yet I’d put quite a lot of time into smoothing over the Gmail issues and could see none of the problems he was reporting.
After arguing over IM for about 30 minutes, we realized that I was viewing the template in Gmail in Firefox, and he was viewing the same template in Gmail in Internet Explorer 7!
Of course, this is common sense when you think about it, but it effectively means you really need to see four versions of each of the nine web-​​based clients tested — each webmail client in Firefox, IE7, Safari, and Opera.
Starting to feel warm and fuzzy about IE6 yet? I thought so.

10 Awesome Webfonts You Can Get For Free

Everyone’s decking their websites out in Proxima Nova and Adele now that services like Typekit make webfonts easy to use and the standard web-​​safe set look increasingly dated. But what if you don’t want to throw down recurring money for a service like that, or your client doesn’t want to add an additional expense to the development of their site? That’s no longer a problem — there are plenty of great-​​looking webfonts available for free.
Starting, of course, with two of the classics of the webfonts movement…

Museo Slab


Museo Sans


Calluna


Aller


ChunkFive


Sansation


Ballpark


Bebas Neue


Droid Sans


District Thin