Artmov: PSD to HTML

Usage of CSS frameworks in slicing pages?

When slicing the PSD into HTML over at Artmov there will be a lot of common lines of codes that you need to write over and over again. A CSS framework will really cut down on development time and there’s a basic and solid foundation for typograhy, grid-based and printing stylesheet.

Counting CSS frameworks available: 14

Maybe the number of CSS frameworks available is much higer; but some might be limited, some might be in development – I’ve taken into counting only the most that appears mentioned on blogs.

Blueprint, YUI Grids, YAML, Elastic CSS, 960 Grid System, Emastic, snowdust, Elements, xCSS, CleverCSS, logiCSS, Tripoli, Baseline, BlueTrip

Criticism on frameworks

Although I’ve tested only two or three CSS frameworks so far: Blueprint, YAML – I didn’t had the flexibility I wanted in those frameworks. I’ve admit that a framework will save a lot of time when slicing pages (especially those that are generally the same in structure), but I needed to put some time to learning in coding and how the classes are structured and how to use them.

But I have a different style on writing IDs and Classes in CSS. As mentioned here a document is in development to create a CSS framework and a coding/naming convention for flexibility and fast development in slicing pages – a more suitable approach for Artmov.

I’ve already taken a step in making every stylesheet written to be very readable my non-tech people, but still keep it very organized and small in size. Also, a coding and naming convention in CSS stylesheets, file naming and HTML IDs and Classes is the perfect approach since I wanted to keep a maintainable code.

Taking a different step in CSS frameworking

As guessed, I’ve already taken a different step in developing a CSS framework that’s suitable for Artmov. Keypoints:

• More meaningful written code classes and IDs
• More readable and organized
• Better maintainability
• Separated the reset stylesheet, conditional stylesheets, printing stylesheet
  • class.css – Includes the reset code by Eric Meyer and framework classes;
  • style.css – General stylesheet for webpages;
  • style-ie.css – Only for IE7 and IE6 (make uses of * and _ hack);
  • print.css – Printing stylesheet;
  • mobile.css – Stylesheet for handhelds only.

So far, the above structure has been apart of organization of a sliced webpage, for several weeks. I’ve have to admit that this is a work-in-process framework, but eventually it will become the Artmov’s general framework – the framework that will be used on every webpage sliced here.

Conclusion

There is a lot to work on developing a CSS framework that is best suitable for you. The best choice is to try at least two or three frameworks before stopping using them or picking just one, without knowing the others.

Some are very complex, some are very light; some might need more time to discover and learn, some might be very simple in structure.

Related links

[1] The Blueprint CSS Framework – Tutorials, How-to Guides and Tools
[2] Blueprint. A CSS Framework.
[3] I Design Websites Faster Than You: Rapid Stylesheets with Blueprint CSS
[4] Top 12 CSS Frameworks and How to Understand Them
[5] List of CSS Frameworks
[6] 5 Popular CSS Frameworks + Tutorials & Tools for Getting Started
[6] Overview: Emastic CSS Framework
[7] Overview: YUI 2: Grids CSS
[8] 10 Promising CSS Framework That Worth A Look
[9] Frameworks for Designers

Mobile browsers market share

The mobile browsers to be supported in Artmov’s mobile optimization services depended on the market share of each mobile browsers.

Smartphones market.

The smartphone market share includes: Symbian with 50.3%, Blackberry with 20.9%, iPhone with 13.7% and Windows Mobile with 9%. Android has 2.8% for now, but its to early.

The iPhone sold in 21.27 milions and Safari, the browser doubled its market share after six weeks of releasing the iPhone.

Symbian, Blackberry and iPhone are currently the most important and biggest players in the smartphone market. iPhone will, ultimately, increase in it’s market share – Windows Mobile will most likely to lose from its percentage in market share.

Smartphone browsers.

As to OS default browser, the players will be Opera Mini (Symbian/Java), Skyfire (Symbian/Windows Mobile), Safari (iPhone), IE for Mobile (Windows mobile), S60 browser (Symbian in S60). And Blackberry, too.

The Top 9 Mobile Browsers from September 2008 to Octomber 2009 are: Opera, iPhone, Nokia, iTouch, Blackberry.

Source: StatCounter Global Stats – Mobile Browser Market Share

What mobile browsers to support?

• Opera Mini
• iPhone’s Safari
• Blackberry and Nokia’s S60

Links.

[1] A list of mobile browsers – About.com
[2] Top 9 Mobile Browsers – Statcounter.com

Testing sliced pages in various browsers

Every frontend developer is responsable of testing the sliced pages in various browsers; a task that’s fustrating, mainly, because there are many browsers out there. On guest post I’ve detailed what’s important in testing slicing projects in various browsers and that is the task to come up with a list of the most important browsers that your website needs to support.

For example, a school project that will run on old computers the main browser will be IE6 or, let’s say, IE5.5. Therefor, although I’ll test the sliced pages in Firefox, Opera or Safari – latest version of them all – my main concern is to make the website’s pages work in IE6/IE5.5. Take a look at your website, establish the most important browsers that you need to support for the pages.

How to test sliced pages in browsers?

The main browsers to test sliced pages are Internet Explorer 6, Internet Explorer 7, Firefox, Opera, Safari and now, Google Chrome. The last 4 can be installed on your local PC. Internet Explorer 6 and 7 can be installed in the same time with a program called Multiple IE (works on XP). For Windows Vista users, you can use IETester – which, by the way, includes IE8 simulation, too.

At the end of this post, I’ve gathered a list of links pointing to various posts on multiple online applications and offline to test pages in browser.

Ideas.

Adobe Meermeer, for example, will simplify the live of a frontend developer once it’s up and running. But for now, it’s still under construction.

Conclusion.
There are numerous ways to test webpages in browsers that you don’t have. Free or paid, you’ll get your results.

Links.

[1] Browser Tests, Services and Compatibility Test Suites
[2] How To Test Website in Multiple Browsers for Compatibility
[3] 10 Helpful Resources for Cross Browser Testing
[4] Effectively Testing Your Website in Multiple Browsers