Mobile Web Design: Tips and Best Practices Feb 09 2010 Last year, more than 63 million people in the United States accessed the Internet from a mobile device. It’s forecast that by 2013 there will be more than 1.7 billion mobile Internet users worldwide. With those kinds of numbers, it’s imperative that web designers and developers learn optimal development and design practices for mobile devices. For the most part you won’t need to learn any new technologies for mobile site design. But you will need to look at site design in a new way, one that is decidedly more restrictive than design for standard browsers. You may want to check out the following related article as well: Mobile Web Design Trends for 2009 Familiarize Yourself with the Hardware and Software Available Cell phone and mobile device platforms vary greatly when it comes to operating system, screen size, resolution, and user interface. StatCounter Global Stats – Top 8 Mobile OSs Mobile browsers are another factor to consider. Simplify! Examples A List Apart Mobile The Onion
Website Performance: What To Know and What You Can Do - Smashing Advertisement Website performance is a hugely important topic, so much so that the big companies of the Web are obsessed with it. For the Googles, Yahoos, Amazons and eBays, slow websites mean fewer users and less happy users and thus lost revenue and reputation. In your case, annoying a few users wouldn’t be much of a problem, but if millions of people are using your product, you’d better be snappy in delivering it. For years, Hollywood movies showed us how fast the Internet was: time to make that a reality. Even if you don’t have millions of users (yet), consider one very important thing: people are consuming the Web nowadays less with fat connections and massive computers and more with mobile phones over slow wireless and 3G connections, but they still expect the same performance. Performance is an expert’s game… to an extent. Know Your Performance Blockers Performance can be measured in various ways. So here are the things that slow down your page the most. Scripts Images Yahoo’s YSlow
13 Useful JavaScript Solutions for Charts and Graphs Graphs and charts are used to simplify complex data and make it easy to read and understand. So it really wouldn’t make sense if it was difficult to integrate a graph into a website. Thanks to Javascript and a bunch of talented developers, we have at our disposal solutions for easily adding graphs and charts to our web projects. Here are 13 of these, including some written for jQuery and MooTools, that you will find very useful. Highcharts Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. JS Charts JS Charts is a JavaScript chart generator that requires little or no coding. PlotKit PlotKit is a Chart and Graph Plotting Library for Javascript. jQuery Sparklines This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. jQuery Visualize Plugin jqPlot milkchart Canvas 3D Graph Moochart TufteGraph ProtoChart flot
Using a Pre-Launch Checklist for your Website | Webdesigner Depo Accounting for every aspect of a new website isn’t easy, especially at the last minute. The problems aren’t the details themselves, but rather the process of making sure that seemingly minor details don’t add up to sloppy work. The best solution is to write it all down. The worst solution is to not take a pre-launch checklist as seriously as the planning stage itself. With the hundreds of details that go into building or redesigning a website, overlooking minor points is easy, especially as deadlines loom—or pass. But missing details detract from the quality of a website. Call it quality control or covering your butt, but every project has certain tasks that need to be accomplished before it is launched. A pre-launch checklist entails a systematic approach to ensuring that important details are addressed before launching or relaunching a website. Most of the items on the list list will be common to all websites, including registering a domain name and removing dummy content. Site-wide
Zen Coding: A Speedy Way To Write HTML/CSS Code - Smashing Magaz Advertisement In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding. It was developed by our author Sergey Chikuyonok and released for Smashing Magazine and its readers. How much time do you spend writing HTML code: all of those tags, attributes, quotes, braces, etc. We had the same problem in JavaScript world when we wanted to access a specific element on a Web page. But what if you could use CSS selectors not just to style and access elements, but to generate code? div#content>h1+p …and see this as the output? Today, we’ll introduce you to Zen Coding, a set of tools for high-speed HTML and CSS coding. If you’d like to skip the detailed instructions and usage guide, please take a look at the demo and download your plugin right away: Demo Demo (use Ctrl + , to expand an abbreviation, requires JavaScript) Downloads (Full Support) Downloads (Partial Support, “Expand Abbreviation” Only) Element Types
22 Handy HTML5 & CSS3 Tools, Resources And Guides | Graphic and HTML5 and CSS3 are bringing new features to us and in this article you’ll be able to find some great tools, cheat sheets and much more you could need to master these new features. Maybe those new features aren’t yet supported fully, but it’s a very good thinking to learn new technologies now so you would be able to use them fully when they are supported. Be modern designer! 1. CSS3 Selectors Test After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. 2. CSS3 Please! 3. Allows you to create and costumize multiple CSS3 effects. 4. You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. 5. The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. 6. Allows you to create rounded edge rectangles. 7. 8. 9. Many new CSS3 feature previews and demos. 10.