http://royby.com/index.php/blogging en royby@royby.com Copyright 2012 2012-07-10T06:44:28+00:00 http://royby.com/blogging/responsiveness_in_web_design http://royby.com/blogging/responsiveness_in_web_design#When:06:44:28Z 18 months ago I purchased my first smartphone, an HTC Desire, and like millions of others it's changed the way I access the Internet. Not only do I read my e-mails on the phone instead of my laptop, I also use the phone to scan web sites of interest. It didn't take me long to realise browsing a site on the small screen is a far better experience when that site is purpose built to fit the smaller screen size, rather than having to move around inside pages that were meant to be viewed on desktop sized monitors stabbing away at tiny links designed for mouse pointers rather than chubby finger or thumb tips. I noticed that many sites recognise you're using a phone and transfer you to their mobile site, usually prefixed with an "m", (EG http://m.somesite.com). Yet other sites seemed to be "purpose built" for phone sized screens and didn't have an "m" prefix. How were they doing that? Viewing royby.com on a small screen was, (and still is at time of writing), the same ugly experience mentioned above, and the web designer in me was intrigued to discover what technologies I needed to learn and use to improve the situation. Enter "responsive design". There have been dozens of articles written about responsive design and far be it for me to repeat what many others have said. Briefly however, a couple of years ago Ethan Marcotte wrote this article and this book where he noted that, "Mobile browsing is expected to outpace desktop-based access within three to five years", and further that he'd built a site based on a "fluid grid" using "flexible images". Yipes! What was he talking about? I come from a background of web design where we struggled to rid ourselves of the inflexibility of table based layouts and successfully achieving a table-less two column layout using only CSS positioning was akin to finding the Holy Grail! Images were those rigid things that broke through your table cell or div wall and were totally NOT flexible. Obviously I'd been away from web design for too long. For four or five years I'd been concentrating on writing other things and totally missed the introduction of HTML5, CSS3 along with JQueries as well, so I had a lot of catching up to do, which meant a lot of time consuming research. According to Marcotte it was the introduction of media queries with CSS3 that allowed not only the inspection of the device size rendering the web page, but also provided a host of media features allowing designers a far wider scope for "querying".  Media queries? Fluid grids? Flexible images? I did a lot of reading:  Responsive Web Design: What It Is and How To Use It Responsive Design in 3 Steps Responsive Design with CSS3 Media Queries CSS3 Media Queries Responsive Web Design Forget Mobile Sites! Time for a Responsive Web: 11 Responsive Design Resources to name just a few. It didn't take me long to discover that some very kind and sharing people out there had gone to the trouble of making ready to use flexible grids that can be used as a basis for your flexible, responsive site. But there are so many and it was a hugely time consuming learning curve to download as many as possible to experiment with and try to work out which could be the best (easiest) to use: 50 fantastic tools for responsive web design At some stage during this process I became completely lost in what I was doing, revisiting sites, reading the same material over again and downloading  grid templates more than once. There is just so much information out there and I realised that I had to break out of the learning loop, choose a system and go with it. Otherwise I could well end up like the Griswalds in the movie "European Vacation" going endlessly around a roundabout with seemingly no way out. One system that stood out for me not listed in the article above is "Foundation" by ZURB and I decided to give it a go. Don't ask me why I ended up choosing Foundation over other systems, because I'm really not sure. Maybe I liked their web site or their attitude, (a bit zany I think), or perhaps their system just seemed like it might be easy to understand. Math is not my strong point and many write ups on grid systems only had to mention complicated percentages with more than ten numbers following the decimal point and my eyes glazed over. Foundation works on twelve columns situated within a row, within a container. Even I can work out the eight plus four equals twelve etc. Perhaps in the finish I just got plain sick of procrastinating. Whatever the reason I downloaded Foundation 2 and got to work being deconstructive. I decided what I would do is retain the look and feel of royby.com, even though I'm tired of the decor and would like a change - soon. But not right now, one thing at a time. The challenge was to take a plain HTML copy of the royby.com index page and adjust it to integrate with Foundations grid. As it turned out this was actually not all that difficult. I opened royby.com/index.php in a browser, right clicked and viewed source. This enabled me to get the rendered HTML without any Expression Engine (EE) tags and copy/paste it into my text editor. I changed the file name to royby.html, so as not to clash with Foundation's index.html file, and placed it in a project file along with all the Foundation files and folders and developed it on my laptop using MAMP to create a virtual server and provide Apache, MySQL and PHP. I should point at that using MAMP is not necessary for the early part of this development while working only with html and css, but is essential later when converting files to php to create EE or WordPress (WP) templates and themes. By deconstructing the Foundation index.html and the foundation.css file it didn't really take me long to construct a 2 column responsive page, [divs = container, row, nine columns, three columns], with all the attributes of the current royby.com achieved by overriding Foundations styles with royby styles in the app.css file provided. Using Foundation 2's "show-on-phone" and "hide-on-phone" attributes made developing a separate mobile device navigation system quite easy, along with making the header image and other mobile unfriendly items disappear as the viewing size decreased from desktop to tablet dimensions. Testing the responsiveness is easy, simply grab the corner of your browser and push it narrower. Viola! Columns stack vertically, navigation links change to more mobile friendly buttons, header image disappears and so on. royby.com viewed full screen width on laptop The top of the same page narrowed to simulate a mobile phone screen. Note the header image is gone, replaced by logo and a jump to menu button allows users more direct access to content. The bottom of the same page showing the re-positioned mobile friendly navigation with the sidebar stacked neatly underneath. At the time of writing I'm reasonably happy with the new flexible royby.com, but several things are stopping me from going live with it. The first stopper is that, pretty much at the same time I finished developing this project, Zurb released Foundation 3 and, because they made significant changes to this new version, it's going to take a little time to upgrade. I could stay with Foundation 2 without any problems, but the idealist in me says "go with the latest version old son!" and so I'll obey the voices inside my head and do just that. Coinciding with the release of Foundation 3 were these exciting Off Canvas Layouts put together by Luke Wroblewski and Jason Weaver built atop Foundation 3. Additionally I discovered this article, Multi-Device Layout Patterns by Luke Wroblewski and this, Responsive Navigation Patterns article by Brad Frost that has caused me to re-think my "jump to menu at page bottom" mobile navigation strategy in favour of an off-canvas design. Apart from all that, instead of developing using the EE platform, I've developed this responsive royby.com as a WordPress theme (more steep learning curve), but that should be the subject of another article, and I will get to it I promise.   responsive web design, 2012-07-10T06:44:28+00:00 http://royby.com/blogging/ee_2 http://royby.com/blogging/ee_2#When:05:17:28Z Well, I have Expression Engine 2 up and running on my localhost server and the changeover from EE1 went seamlessly, so I guess it’s time to bite the bullet and upgrade on the server running royby.com. I’ll have to contact the hosts first though and ask them to allocate more memory for PHP5. It seems that the EE2 control panel is a bit of a memory hog and requires at least 64mb allocated and I notice that the host has the allocation set at 32mb. There is a learning curve to understand how the new control panel interface works and a few new tags, but it doesn’t appear as daunting as the learning curve when upgrading from pMachine to EE. blogging tools, 2010-08-03T05:17:28+00:00 http://royby.com/blogging/large_expression_engine_sites http://royby.com/blogging/large_expression_engine_sites#When:04:57:54Z adding anything?   Web developers and Expression Engine (EE) experts, Hop Studios have researched what they believe to be the “largest” sites developed using EE as the content management system. The criteria for “largest” site was based on the monthly number of unique visitors + number of entries/comments + number of members/forum posts + awards/buzz (I really hate that word, “buzzzzz”), plus Hop Studios own good judgment. This eventually led to a list of the 32 sites deemed “very large”, and who could fail but to be impressed with some of the figures they have unearthed. change.gov, Obamas presidential transition site leads the way, but if a confirmed ranking of 20,000,000 page visits per month for iLounge (an iPod & iPhonesite) is impressive then try the unconfirmed number of 31,000,000 pages per month for All K Pop (a Korean celebrity news site). Staggering. Anyway, you can view the results and criteria here. blogging tools, research, 2010-01-27T04:57:54+00:00 http://royby.com/blogging/google_to_end_censorship_in_china_may_pull_out http://royby.com/blogging/google_to_end_censorship_in_china_may_pull_out#When:01:31:44Z Yesterday, Google released a detailed blog post discussing the decision to review its policy towards China after they uncovered cyber attacks on their corporate infrastructure. The attacks, Google say, were aimed at accessing the accounts of Chinese human rights activists. Google said, “These attacks and the surveillance they have uncovered—combined with the attempts over the past year to further limit free speech on the web—have led us to conclude that we should review the feasibility of our business operations in China. We have decided we are no longer willing to continue censoring our results on Google.cn, and so over the next few weeks we will be discussing with the Chinese government the basis on which we could operate an unfiltered search engine within the law, if at all. We recognize that this may well mean having to shut down Google.cn, and potentially our offices in China.” Reportedly, this incident has been “the straw that broke the camel’s back,” as far as Google’s presence in China is concerned. Interestingly, Google has struggled to make a financial success of its Chinese operation and it trails the Chinese search engine Baidu by a significant margin. internet in asia, news articles, 2010-01-13T01:31:44+00:00 http://royby.com/blogging/expression_engine_-_finally http://royby.com/blogging/expression_engine_-_finally#When:06:12:38Z It was over 12 months ago that I wrote this article explaining the reasons why I made the decision to upgrade from pMachine to Expression Engine as my Content Management System (CMS). But a lot of other things have been going on in my life over the past year, and learning the intricacies of EE has been too tiring to contemplate. However, I couldn’t stand the nagging thought in the back of my head that something was being left undone (it was a bit like when you avoid doing the washing or ironing), so eventually I bit the bullet and dug into the documentation and tutorials to see what EE is all about. Gaining an understanding of how EE works seemed very daunting at first, but like anything, once you get into it and begin to play around, things begin to full into place (although I’m not sure that I’ve had the “light bulb moment” that the EE team constantly refer to as yet). Anyway, “royby.com” and “a weblog about weblogging” are now both powered by EE but I’m still on a steep learning curve as I look over the myriad of plug-ins, extensions and modules available to me. I’m also contemplating a change to the overall navigation set-up and of course there is the image gallery to get back up and running. A lot of work to come yet and a general lack of time in which to do it. However, I’ll keep plugging away at it. The great thing is that comments are now working properly, so please, leave me a comment, as is the member registration set up. blogging tools, 2009-12-10T06:12:38+00:00 http://royby.com/blogging/Website_Marketing_SEO_Score_Tool http://royby.com/blogging/Website_Marketing_SEO_Score_Tool#When:08:39:41Z Hubspot is an inbound marketing system designed to help your business get found on the Internet. The best way to be found on the Internet is to employ good Search Engine Optimisation (SEO) methods and Hubspot have developed a Website Grading Tool that not only allows you to see how your site ranks, it also allows you to compare it with the websites of your competitors. Best of all, at time of writing it’s free. First up the grading tool evaluates how your Web site stacks up in terms of marketing effectiveness against the hundreds of thousands of websites that it has evaluated previously. It does this by using an algorithm of over 50 different variables and they say that this software is being constantly upgraded and the algorithm enhanced. I assume that, as more websites are graded, your own websites score will alter slightly according to the ranking of other sites evaluated. If that makes sense! Considering that I’ve never worried too much about SEO for royby.com, I was happy that it received a score of 69/100. That means that it has scored higher than 69% of all other sites evaluated. Website grader looks at on-page SEO first, like title, meta keywords, heading summaries etc, and then it checks out the off-page SEO like domain info and google page rank etc. It checks to see if you have a blog and finds your Technorati blog ranking which measures the popularity of a given blog compared to all the other blogs that have been submitted to the system. A Weblog About Weblogging ranked 1,285,236, which is not good enough if I want this blog to be right up there in terms of popularity. But hey, that still in the top 1.84% of all blogs tracked by Technorati. Finally, Website Grader looks at your websites standing in the social mediasphere, how it converts qualified visitors to leads via RSS and conversion forms, and looks at your sites competitive intelligence. Throughout all of these evaluations, Website Grader gives you valuable hints and links to information about how you can better optimise your website. You receive an e-mail telling you when the evaluation is complete with a link to click and view the report. A very useful tool and one that I will use consistently in the future as I strive to upgrade royby.com’s SEO. resources, 2009-02-06T08:39:41+00:00 http://royby.com/blogging/very_cool_tool_-_CSS_SuperScrub http://royby.com/blogging/very_cool_tool_-_CSS_SuperScrub#When:01:43:38Z very cool tool to spruce up your sloppy CSS coding, available here miscellaneous, 2009-01-05T01:43:38+00:00 http://royby.com/blogging/Blogging_-_a_book_by_Dr._Jill_Walker_Rettburg http://royby.com/blogging/Blogging_-_a_book_by_Dr._Jill_Walker_Rettburg#When:05:18:23Z Dr Jill Walker Rettburg has been a research blogger since October 2000 and this year saw the release of her latest book which is titled simply, “Blogging”. There is no prize for guessing what this book is about, but if you are interested you can visit Amazon and search through the table of contents and some extracts as well. The book earns glowing reviews from such well known luminaries as Howard Rheingold, “Blogging is a landmark in social cyberspace studies and much more than that”, Axel Bruns, “Jill Walker′s Blogging is set to be a key text in its field” and danah boyd “Walker′s book brilliantly documents, analyzes, and situates blogging”. I’ve just ordered a copy and I’m looking forward to reading it when it arrives.     research, 2008-12-30T05:18:23+00:00 http://royby.com/blogging/How_Web_2_are_you http://royby.com/blogging/How_Web_2_are_you#When:09:30:15Z Along with all the Web 2.0 start-ups that have emerged over recent times has been a swag of creative logo’s, some of which are now highly recognisable. But how many do you know? Take this quiz to find out.   miscellaneous, 2008-12-29T09:30:15+00:00 http://royby.com/blogging/new_blogging_direction http://royby.com/blogging/new_blogging_direction#When:08:54:49Z Last month a hacker found a way into royby.com’s pMachine control panel, deleted most of the data and left me some cute messages. In it’s current form, royby.com is over 6 years old, so that was a lot of data to lose. However, it wasn’t really a problem because the data was backed up and it didn’t take too much effort to restore it. What the incident did do though was to remind me that for a long time now I’ve been meaning to replace the now obsolete pMachine blogging software with something that is supported and still under constant development. I also want to change the overall design, (I’m certainly tired of the old design now), restructure the overall site design and consider the direction that I want royby.com to take. Every time I consider beginning this project however, I experience a sharp stabbing pain in my forehead accompanied by a sick feeling in the pit of my stomach. It’s not that I’m not capable of undertaking all of these tasks, it’s the amount of time that I know they will take. Time that I just don’t have right now. So I’ve decided that, rather than embarking on a major overhaul to all the above mentioned areas, baby steps are going to be the order of the day. I’ll make small tweaks here and there to the site design until I get time to code a new set of templates and change the CMS. Expression Engine has replaced pMachine as Ellis Labs prime content management tool and I have it installed and under development, but I can see that it will take some time to get it to the point where I can migrate my data from pMachine. Expression Engine is a natural progression after using pMachine for a number of reasons, but the primary one is the ability to migrate data to the new system. There is no literature about such a migration to the latest version of Wordpress or indeed to a program such as Drupal for instance. Other than that, the support team at Ellis Labs are just so helpful if there is a technical problem. And won’t there always be a technical problem when you are working with an application for the first time? The Expression Engine forum holds a wealth of information as does their Knowledge Base and Wiki. There is a healthy philosophy at Ellis Labs which I recognised when I first began using pMachine and your queries are always answered in a timely fashion by people who know what they’re talking about and who take a real interest in ensuring that your technical problems are solved. So, stay tuned for more information on how I progress with the gradual re-build of royby.com. blogging tools, what is a weblog?, 2008-11-10T08:54:49+00:00