Recycled Pixels

CSS Background-Position on Android Issue

Paul — Sun, 11 Dec 2011 00:37:43 +0000

I’m working on a new layout and hit a snag with Android. I’m using a CSS sprite and equal height columns to set the background on an element. I need the two edges of the box to show the background and the box needs to be flexible in width and this seemed to be the only way of doing it. Setting the background to repeat-y on both ‘columns’ gets me the final result but there’s no way I could get it to work on Android.

Opera, Safari, Firefox, Chrome, IE9, iPhone, iPad all fine. Android no. I started off with ‘right’ as the position, tried 100% but it still didn’t work. In the end I had to abandon the sprite idea and chop off the 9px wide sliver I needed.

Google didn’t turn up anything so if anybody knows a fix let me know. Otherwise I’m moving on to more important matters with my new layout.

Google Analytics & Visitors Flow

Paul — Thu, 08 Dec 2011 19:40:28 +0000

I was just checking the analytics for the latest site — NHP Licensing Solutions — when Google switched me over to the new Google Analytics interface. I clicked on every link like a good techie and was pretty impressed by all of the new functionality and the sleek interface but there’s a killer feature I found. Look at this:

It shows me visually how visitors move through the site, when they drop off and combines this with source data such as which country they come from. What a great report, so much easier to read than tabular data. Thanks Google Analytics team!

Kohana 3.2 – In Love All Over Again

Paul — Mon, 28 Nov 2011 00:30:08 +0000

It’s been a while since I’ve had to build a new site and it was my first opportunity to work with Kohana v3 in a production setting. Here’s the final site for NHP Licensing Solutions – who are a specialist provider of licensing and consultancy services to the Natural Health Product industry in Canada.

It took around 7 days to produce the site from start to finish but this also included setting up the development environment on my PC and ensuring I had everything in place to support this site moving forward. When I have ‘play sites’ I don’t have to worry too much about backing them up or controlling the changes but paid projects require a whole new level of discipline. This means my MySQL databases are dumped and backed up every 4 hours, the whole site is backed up every 24 hours and I also maintain an off-site copy as well. I also wanted to switch from Subversion to Git which was another learning curve.

As for the Kohana specifics though let me go through the design process.

The design itself was a WordPress theme from Theme Forest with stock photography and graphics from Photo Dune and Graphic River. I used the default template controller within Kohana but created views for each page layout type and then created views for the graphical elements and finally the content. Therefore, if I want a full-width page and then use two columns and place a few toggle components in there I just nest the views inside one another and avoid repetition. I could have installed the theme into WordPress but in the end I just hacked the HTML out of a few static pages and worked out how the theme worked.

It took me around 2 days to get the shell of the front page together and split into its various components. Another day and I had the second page completed, along with more elements. Another day and the site content was complete. Kohana didn’t help to deconstruct the WordPress theme into views, it was just a matter of me working out how the theme worked and where to cut-and-paste into my views.

And then the real work in Kohana started. I initially extended the HTML helper to build some small items such as the menus and then backed it all out as I was violating the HMVC model by putting HTML into my extended helper. In the end I just used views although Kostache could have helped at this point. I extended the Template controller to setup my site-wide variables and bind $title, $description and $keywords to the HEAD meta tags for SEO purposes. Every page on the site has different values as per best practice. I also had to extend the Valid controller to add two new validation callbacks; one to check that email addresses added to the newsletter were unique (via the appropriate Model) and another to ensure that the default form values had not been submitted. Easy enough to do with the cascading file system.

My biggest challenge was writing the form handling code which took a day and a half. I cut a few corners by using jQuery and the Forms plugin but I wanted a full solution — it needed to be POSTable, client-side validation tied to the blur events and used Ajax where possible. In the end I got there and the approach looks quite tidy in the code as the error messages have been dumped into the HTML so the onBlur events use the same text as the server-side routine. If this site had more forms I’d probably extend the Forms helper as there’s still a lot of PHP in the form view to coordinate the process.

My final task was to then create a single Model and have new subscribers added to the database — all of which took minutes to achieve.

My last day of work was then spent testing the site, optimizing it and driving up the Page Speed score as far as I could. I also setup a custom error handler for the 404 and 500 error messages using a simple non-template’d view.

My last production Kohana site was v2.3 and it was a painful experience as there were few examples around the Internet to crib from. This time around there were many more examples. Stack Overflow had a lot of good answers, the Kohana v3.2 documentation was much, much better and I also had access to Packt’s Kohana 3.0 Beginner’s Guide that I helped to review. Although I will say in my defence that some of those chapters were not reviewed by me and I think in their desire to get this book out that they cut a few editorial corners. The section on custom error handlers is second-rate compared to the Kohana docs and lysender’s articles and there were so many typos in the first few chapters that I feel for any beginner trying these code samples out and getting nowhere. The most common mistake is that < and > are used when it should be ‘ and ‘. There are also some changes between v3.0 and v3.2 such as the process for using Config that could be confusing.

All-in-all, my experience of using Kohana v3.2 was fantastic and I’m very happy with the final result, as-is my client — my sister-in-law. I don’t normally use Kohana for small sites as I don’t need an overhead for less than 10 pages of content. However, this site was just a starting point as I know news articles, blogs and surveys are all on the business plan.

My next project is to re-engineer the O-Sushi site. It’s currently a single page site but it needs a responsive design as I’ve got around 15% of the visitors using smartphones. I’ll also be using Kohana for this project though as I think it’s easier to use Kohana than doing it in pure PHP, especially as I get logging and error handling for free. I’m also not limited in what I do in the future and how the site continues to grow.

Responsive Web Design : A Case for Using It

Paul — Thu, 06 Oct 2011 01:27:20 +0000

I’ve been a fan of liquid layouts from the early days of web design and always compromised my designs to incorporate them. After all, why have all that screen estate and not use it? With the consumerization of IT and the influx of smartphones and tablets we have some additional problems to deal with in terms of resolution.

The Smartphone use case relies on a screen width of 320px.
Most Desktop and Laptops can comfortably display 1,280px — 1,024px to be safe.
And then we have Tablets which pose a secondary problem of rotation; using 1,024px in landscape mode and 768px in portrait mode.

Most sites are designed twice; once for the desktop/laptop and once for the mobile world using a lightweight design that is optimized for 320px. I haven’t seen anybody with a site catering to tablets but the rotational dilemma poses some issues.

Ethan Marcotte has an answer though — Responsive Web Design– a design methodology that uses one core site that adapts to the resolution of the browser. There are a few responsive designs on ThemeForest with the SuperSkeleton design being a great example of how this stuff works.

However, with every new way of doing something there are various detractors saying it’s not a good idea. I think WebDesignShock have summed up the reasons (11 of them) against responsive web design very well but it’s not going to put me off.

I don’t think responsive web design is the all-round solution for every site but if there is a significant audience need for two or three designs then you should consider it. You also need to consider the use cases individually and whether it’s appropriate to show the same information in all three cases. For example, a cinema site accessed via a smartphone should be optimized to show the current movie showing times. For a tablet and desktop use case, this information is important but not as important so you can fill the pages with fluff and other links. A corporate site may need to focus more on location and contact details rather than corporate news.

You need to understand the use cases and how this impacts your content strategy.

I have a small site for my local sushi restaurant. All three use cases apply and my analytics support the need for a responsive design. At some point they may use tablets to replace their printed menu so using the additional space to provide more details and links to a ‘Sushi 101′ would be beneficial.

Lets go through WebDesignShock’s 11 reasons and consider them against this project.

Image Resizing. Good point but it can be countered with some context-aware image sizing.
Resizing images consumes CPU and RAM. Good point but countered with the link above.
Mobile devices download non-viewable data. True but we’ll just have to bear this in mind during the design or we could leverage AJAX to load content inline.
Mobile speed vs desktop speed. Another design consideration, not a deal breaker in my mind.
Hiding background images is a bad idea. Another design consideration then.
More code, more to update. I don’t really agree as I’d rather update one complex site than three sites that are marginally less complex. With the design criteria we’re all supposed to follow to achieve high PageSpeed scores we’re all using a complex set of techniques to achieve that. Adding a little more into the mix isn’t so bad IMO.
CSS media queries will not remove unncessary code. True, but I can use AJAX again if I really need to.
CSS media query is a bad choice for multiple devices. I’m not a fan of niche legacy browsers and if my analytics are not showing a significant number of visitors using them, I’m not going to design for them. It’s similar to the ‘Do I design for IE6?’ question. If it’s your corporate Intranet and you’re still running IE6 then ‘yes’. If your user-base is still using IE6 then ‘yes’. If you’re not as restricted then don’t do it. If my new site works on the iPhone, iPad, MacBook and Windows Desktop I’ll be happy as these represent 95% of my audience.
“Great mobile products are created, never ported”. Agreed but I’m not building an App — which is a completely different argument. If anything I’m trying to obviate the need for an App by building a site that works equally well on all mobile devices not just the ones from Cupertino especially as I’m an Android user.
Mobile needs are different from desktop needs. I agree and I opened my discussion with a similar caveat but the final statement about excessive scrolling is misleading. You just replace the large logo with a small one or swap in a different header design.
Better create a mobile website than a responsive one. If there are a significant number of mobile users then it may be worth the effort especially if you have a team of developers behind a high traffic site. If it’s the local sushi restaurant it’s not worth the effort.

In my case it’s better to use a responsive design.

Next Question: Do I use a responsive design framework or start from scratch?

Why/When Should I Use Kohana?

Paul — Thu, 25 Aug 2011 16:27:26 +0000

Kohana is a small PHP MVC framework that is incredibly powerful, yet lightweight. I see it more like PHP+ than some of the other PHP frameworks.

The purpose of an MVC framework is to abstract the high-level programming language into more of an application-level programming language. The framework provides a number of building blocks that enable you to get up-to-speed more quickly and fill in some of the gaps in the underlying language. I’ve been around PHP since v3 so I’ve seen a lot of changes with v4 and v5 but there are gaps. Every time I build a new site there are a basic set of classes that have to be developed such as an Error Handler, Logging Subsystem, Database Abstraction, HTML Helpers, Templating and Form Handlers. And above all of that there is a constant thread of Information Security classes that have to be built in to cope with XSS and SQL Injection attacks. Session Management is typically another item on the to-do list.

Why spend all of that time building all of these classes or re-using code from other projects when I can use a framework? If my project needs these components I immediately pull out the framework and start work on the real objective, writing the application not the spending weeks on the underlying codebase.

CodeIgniter was my first introduction to the PHP MVC framework, it was quick and did just enough of the basics. The other frameworks such as Symfony, CakePHP and Zend had too much overhead — they all abstracted the programming language even further than CodeIgniter and Kohana. Symfony, CakePHP and Zend are like comparing Visual Basic to Visual C++. They’re higher-level frameworks which means the time to prototype an application is far less than a mid-level framework but the cost is computational overhead. There are plenty of benchmarks around the Internet comparing these frameworks but no matter how flawed the benchmark logic is there is always a clear divide between the mid and high level frameworks.

My sites ultimately end up in production, they’re not prototypes for a client and I hate having to redo work. I would hate to launch a site in Zend and then have to re-code it later in another faster framework or in pure PHP. I don’t need to do that with Kohana. The disadvantage is that I have to invest more time building the prototype application but in the long-run I get the benefit. When the site reaches production I’m able to scale the site more easily as the resource requirements on the server are less. My visitors, users or customers are happier because the site is quicker.

As for how to choose between CodeIgniter and Kohana?

Kohana is originally a fork of CodeIgniter. I went with it because I wanted a framework that was based on PHP v5, not v4. There were a number of significant changes in the PHP language that made programming far easier so I decided to take the less-trodden path. Two years ago when I made my choice, it was easy. Today it’s harder as CodeIgniter v2.0 is now based around PHP v5 but Kohana has since moved on to v3. I also think that Kohana is starting to evolve beyond the constraints of v2 and the typical criticism of a lack of documentation.

Kohana’s documentation and examples in the wild are very limited, you really will spend hours of time tracing bugs and reading the source code to understand what you’re supposed to do. CodeIgniter lets you avoid all of that as there’s very good documentation, lots of examples and a strong community. Kohana’s community used to be full of people that said ‘read the source code’, today it’s a slightly friendlier environment.

I have a new project coming up that I intend to use Kohana for. I’ll code up a few examples in CodeIgniter and Kohana and post the results. I’m sure the code in Kohana will be cleaner and easier to understand as there’s less fluff involved but it will be an interesting learning exercise.

PageLines Platform Pro — Why?

Paul — Thu, 25 Aug 2011 16:00:34 +0000

WordPress is great blogging platform but I can never get it to do what I want ‘out-of-the-box’. It always seems to take a lot of customization, plugins and widgets to get it right — I don’t have the time. This is the benefit of using PageLines Platform Pro framework. A large proportion of the work is done for me, all I need to do is add a few plugins and it’s ready to go.

Blogging for me is about writing, not presentation, design or development. If I wanted to do those things I’d stick with CSS, HTML, JavaScript or jQuery. If I needed more functionality than a read-only HTML site can deliver I’d switch to PHP. If I’m going to build a complex site with hundreds, or thousands, of users I’d switch it up again to Kohana.

I looked at a few of the large WordPress frameworks such as Thesis and Genesis but I settled on Platform Pro in the end. I wanted a framework with a clean, professional, typographically-focussed theme and something that I could put on multiple domains as cost-effectively as possible. All of these frameworks seemed to be much-of-a-muchness. Googling around some blog reviews didn’t sway me one way or another so it largely came down to what the basic theme looked like and how much tweaking I’d have to do to get a new site up and running.

Platform Pro is licensed to me, not by domain. It’s also based on a design style I personally like, which reminds me of the NY and LA Times sites, a strong serif font on a clean white page.

My only problem is that it’s such a complex beast that it could take me months to get used to it, especially as I venture from the safety of blog posts into more of the CMS functionality.

Flip Counters & Displays with jQuery & PHP

Paul — Thu, 25 Aug 2011 06:58:04 +0000

I had an interesting Internet diversion the other day that resulted in me finding some ideas for a small design project. How about building a flip counter?

It started off as a requirement, honest. Every month I want to report on the position of my sites on Google for particular search terms. I want to know that I’m marketing the sites correctly and pushing them up the rankings. Search Engine Optimization (SEO) or Search Engine Marketing (SEM) isn’t rocket science, you simply have to provide what Google wants — quality content. However, how you present this information can make a difference in terms of how your effort is rewarded.

I found a script on Envato’s Code Canyon, the PHP Google Position Checker, that seemed to fit the bill. It’s a simple script that executes each search via PHP’s cURL function and reinterprets the results. It’s not clean, it’s prone to being blocked by Google but it works nonetheless. It would need some clean-up and wrapping around a CRON job to run it monthly but it got me half-way to my objective for a tiny investment of just $3.

And then somebody in the discussion thread suggested it should be integrated with a jQuery Flip Counter. What’s that? I thought so I duly clicked on the link.

It’s an interesting piece of eye-candy and not something I’d be interested in but I thought it may be useful for other projects. I like replicating real-world interaction components on websites because there’s an immediate familiarity that improves the user experience. The more intuitive something is, the less you need to teach them. Websites should be intuitive as you can’t expect visitors to learn how to use your site.

But I found a better version. Googling led me to Chris Nanney’s site and his Apple-Style Counter.

Here’s a demo. Chris uses some additional images in the animation to simulate each digit flipping over which gives a much slicker effect.

I also found a few flip counter graphics on Envato’s Graphic River but I particularly like the look of Cesgra’s Flip Displays Set.

And then I thought wouldn’t it be great to use Chris’ or Cesgra’s images as a base and use PHP’s GD TTF functions to make custom sprites for whatever I wanted. This means I’d get the tween states for the slick animation but also get to choose the font and what to write on each flip panel. This means I could replicate a whole airport arrivals/departure board with A-Z flip components. If I took each frame of animation, split it into a number of component images I could then use GD functions to merge them over the top with the correct alpha transparency, e.g. base + digit + shadow. By splitting each digit into three vertical slices I could also build wide panels for months and days as Cesgra uses in his graphics.

And then Elliot came along with an even slicker set of flip images.

Therefore, if anybody ever does get around to implementing this concept please let me know as I’d love to see if the concept works as well as it does in my head.