Whats going on

Designing for mobile - Part 2
Friday, April 1, 2011 - 14:11

Today im going to continue with part 2 of designing for mobile. Though essentially this has nothing to do with designing for mobile, i'm explaining how i created a mobile theme for my community site and made it work.

I guess initially its best to know what you need to carry out the job in hand, so here are the modules I used.

Browsecap: I found this module wasn't perfect and a little problematic to get working correctly. The module is essentially used as device detection. Don't worry if you cannot get this going, it's not essential as we will be using mobile tools also (this requires browsecap module) and essentially does the job to a higher degree.

Mobile Tools: This is the nerve center of your mobile site. It decides everything, or at least allows you to. Now there are a few ways to achieve your goal here, I will give you the details of how I achieved mine but be aware that there are other options available.

In mobile tools you can decide everything from the proposed url of your mobile/desktop site (if you wish to redirect users) to which theme you wish to use for mobile. On the initial page Notification/redirection I have kept standard settings.

Mobile roles tab. Initially I did not create any mobile roles, but eventually did. This could be important if you wish to limit certain tasks on a mobile device. Maybe you don't want users to upload or even log in on your mobile site, or exclude blocks for a anonymous mobile user.

Theme Switching tab. You will need to install the module 'mobile theme' here to get the desired results. This is what blew me away about this module. In this section you can choose a different theme for each and every mobile device, be it iPhone, iPod, iPad, android, blackberry and even opera mini. I chose the option to 'switch theme for a mobile device' instead of 'based on the URL' and chose a mobile theme for all devices except iPad. The screen for iPad i feel is big enough to support a desktop theme.

The last tab for external modules is where i selected 'Mobile Tools' to be my detection module instead of Browscap.

So thats how you get the site detection working. Maybe this would be a good time to fire up iOS simulator and test to see if the new theme is being used correctly. I would recommend playing around with the mobile tools settings to see what suits your needs. A good resource site is the site of the 'mobile tools' creater www.mobiledrupal.com Full of mobile info goodness.

So once your theme is up and running you are left with the fun and creative task of theming your mobile site. There are a few mobile themes out there to choose from, including text based or full iPhone-esque app like themes.

The best theme i found was the iui. This theme looks snazzy and has some added JQuery to give a page transition swipe effect. I nice added touch. Needless to say I didn't just use this theme out of the box and pretty much re-themed cosmetically. I did however add a touch of my own. You will find things a bit fiddly adding blocks here and there and trying to make the mobile site clean without effecting blocks on the main site.

My solution was to add a new region in my mobile theme called $front_page. You notice that many many apps have a very simple layout that generally include a menu on the front page. So by creating a region that appears only on the homepage of the site, i was able to drop a menu in without effecting the blocks on the main site. The rest of my site would simply use the $content region for other blocks, set page specific.

This isn't the only solution or even the best solution, if your site is complex in any way you will run into block placement/visibility issues and a solution i recommend you consider is multiblock. The ability to duplicate a block and set its visibility separately from its original.

And now you have a mobile theme. This of course is A way of creating a mobile site, not THE way. Take a look at the modules and themes available and get creative. Its how we evolve.

The rise of HTML5
Tuesday, February 8, 2011 - 12:33

This week I took some time to go back to basics and review HTML and CSS, now expanded and refurbished to become HTML5 and CSS3.

When I first got into web design these were the first 2 things on my agenda to learn. The bread and butter of a web page. Since then I have expanded into many, many other languages, programs, techniques and standards but now and again you have to go back to 'Go' and see where it all began.

http://www.w3schools.com/html5/default.asp is always a great place for information. Here they have a great HTML5 tutorial/walk through of what is new and what has been removed. Having read the lot on HTML5 I came out of the whole thing in a very positive mood. The wheel has not been reinvented but maybe given a polish and some air. The majority of the tags remain but it seems a lot of work has been done for external plugins such as Video and Audio, as well as some very handy changes to form inputs which could go a long way in helping in error handling.

My main issue prior to reading about HTML5 was where this would leave us with the web browser wars. When I first started with web design there had been a massive shift from styling from within HTML to using CSS. At that time IE6 had just made way for IE7 and standards among all browsers were still a dream on the horizon. A substantial amount of effort was required to make your site look the same throughout all machines and browsers and now, finally we are almost there. IE6 now claims less than 5% of the market and save a few tags and styles here and there, making sites have become a hell of a lot easier.

I was worried this new introduction would reset the meters and all browsers would spend the next 6 years playing catch up to HTML5 and the hacks and filters would be removed from storage and dusted off. However, I'm confident from what I have read that HTML5 is for the best, and any negative effect to making web friendly site will be kept to a minimum. The majority of changes should have little if no negative effect with the majority of browsers well on their way to full support.

I hope you find time to go back to check out where you began, you may get a head start on the future.

Designing for mobile - Part 1
Wednesday, January 12, 2011 - 17:00

These days as a web developer we are faced with the task of creating good looking, usable websites not just for our computer but also for mobile. Now, with a well designed, clean website, it is possible to avoid this step and decide "my site works in a mobile browser so I'll let it be". This is ok for some sites, portfolio's, showrooms and showcases and even tradesmen, but a site that is revisited on a daily basis, will struggle to survive without an easily accessible mobile theme. Im not sure about you, but I wouldn't go near Facebook's default site without the app in hand.

Bearing this is mind, Iv decided to throw myself into the mobile arena and design a mobile theme for my website www.getagame.org. This post is part one of two aiming to help get you started designing for mobile and is focusing on what you need to think about before you start. This is by no means a 'this is how it should be done' post, I'm simply learning this myself and documenting what I found and what got the job done, great for mobile design virgins.

The first question you can ask yourself is should I create an Iphone App or should I just create a mobile theme. Well, it depends on you and your audience (doesn't it always?). If you make an App, this is generally a lot more complex than a theme, you will first need to learn a whole new set of skills to create the App and then have this approved by Apple to be added to the App Store, or hire a developer to this for you. Then, you would have to essentially do the same for the non trendy Android users also. As developers we want to be able to be accessible to everyone.

Therefore for now I would choose to make a mobile theme. This will be accessible to all users irrelevant of their mobile device, cheap and full or nutritious learning experience. As my site www.getagame.org is small and pretty much a sandbox for my own social networking development, it seems pointless to spend money or months creating an App. If the site ever gets 10,000+ visitors a month, this could then be a real option.

So now you know what you want to make, how are you gonna make it? After designing my theme, my initial problem was how to create the theme in a production area. Obviously when creating a normal theme we use a local servers like WAMP/MAMP and simply test on our machines, but this will not do as the site needs to be accessed from a mobile device. And creating this on a live site is a bad idea. This is where the iPhone Simulator comes in.

The iphone simulator is a very simple program that installs an iPhone window on your machine. Now ,to use this you need to be running a mac with snow leopard and then use MAMP as your local server. If your not a mac user, I'm sure there are other options out there but I have personally not investigated. You can follow the instructions to get the simulator set up and once complete can very simply access your local production area via the iPhone's Safari web browser. You can also access live content on the web. So simply navigate to:

http://localhost:8888/sitename/

and you should see your chosen site as any mobile user would see it. This simulator does have more to offer should you wish to look around including device rotation (make sure your site looks as pretty in landscape mode) and also the option to switch to iPad mode which is a nice little bonus. There is also the option to simulate various iPhone action like 'shake', though this is more geared to app creators.

So now you have the tools, your can begin the theming of your mobile site. In my next post, I will be documenting what Drupal themes and modules I used to get my mobile theme up and running. I'll maybe even throw in a little JQuery to make her pretty.

Turning the Corner
Tuesday, December 14, 2010 - 18:08

So I have made the decision to start a blog to discuss all things web related in the hope to drum up so interest in my site, share some views and maybe help other people looking to get into web design, I mean the job is all about interactivity isn't it?, so why not start helping others along this long path I'm walking.

I am a self taught web designer and have therefore not been to college or university to learn my trade and instead dedicated every day along side my regular job for the past 4 years reading, doing and testing. It's a difficult process and although I'm not all the way there yet, I think it would be a good idea to share my experiences of what I have done, and what think is a good way to make that transition to a career in web design. So here we go...

Your Goal
The first think you want to do is establish what you want to do. Do you want to be a designer, a coder, graphic designer? This may be too specific for some people to choose at this point, my choice was to make websites, and work freelance as this made sense being an english speaker in a non-english speaking country. I didn't consider which part of websites I wanted to make and didn't lean towards anything specific but I did have a strong urge to learn Flash This was alot more popluar 4 years ago. In my experience, just dive into low level web design and pick up all knowledge you can as this will help you later in your career, and you will eventually be drawn towards something that fits. Although I liked the idea of Flash and design, I now love to code and theme sites and find designing new sites a painful experience.

The Tools
Another way to ask this question is where to start? Well, a good way to find out what you need to know is to find some good web designers and ask them what they consider the important basics are, or if you don't know anyone, use forums. Another trick is to look on other peoples portfolio's and see what their skills are. Either way you will find roughly the same answer. HTML and CSS (Cascading Style Sheets) are the 2 key basic languages you need to start with. Every site is built around these tools. In addition to these the next language that will be fairly popular will be PHP: Hypertext Preprocessor. Now this is a thinking language so to say, if will enable your sites to be smarter and more interactive and knowing this language will be a big feather in your hat. Those would be the main things you need for building a site, but there are other tools you can add into sites to make them more user friendly or snazzy. Javascript for one is a useful tool to know but by no means essential. From there its also a good idea to have a little working knowledge of a graphic program. Many top designers use Photoshop which is beyond a doubt the most advanced image editing tool but don't overlook other programs also. I find Adobe Fireworks is a great tool for site designing and layout. You can then use tools like Photoshop for more precise image work. From there you will need to look into Content Management systems like Drupal or Joomla and then server side knowledge and MySQL would be very handy if not essential.

Experience
This will be one of the most difficult parts to overcome. Nobody will hire you if you don't have qualifications and no experience but if you have no qualifications but experience and are good at what you do, you will be rewarded. So how do you get experience? Work for free is the answer, you have to spend money to make money. Start to make a few sites for yourself to start with, maybe set a goal of what site you want to make, design and the create. See how you get along, and learn from the experience. When your comfortable try to seek out some work with local businesses or friends. Generally if the company are not paying you and you explain its a learning process, the customer will have tolerance and you will have space to develop and learn. This is also good for gaining skills of working with customers. Through working for free, you will gain experience, get a bit or recognition, and maybe attract more customers where you can possibly charge a small fee. All this free work will be added to your portfolio of work and be used to attract jobs in the web field.

Gain Recognition
As you know web design is a very social community based business, people help you and you help other. That's how we progress. The more people that know about you and what you can do, the more interested people will be to work with you. Remember above when I advised you to search forums for help, this could be you answering questions for another designer on the way up.
So, learn, read test and help others as much as you can online and in the web domain and you will soon get the recognition you deserve. Also try and get the opportunity to meet with your piers. There are many places that web designers meet and geek out, especially Drupal developers. This is great way to pass out a few business cards and maybe shake a few hands. You will meet great friends and contacts if not potential employers.

So once you have come as far as you can with the above, you might have a small steady flow of work, maybe not enough to quit your main job and proceed into full time web design. You have a little reputation, you feel happy and confident in your own ability, it's time to get a job.

How does this happen? I'll let you know.