Your Customers are Mobile, you will be too …


As designers I am sure we have encountered cases where we have begun cross browser testing of a new website only to find some elements not displaying consistently on all browsers. By beginning our projects with a CSS reset helps us to ensure our websites and mobile apps looks as close as possible to original design regardless of browser. All browsers have their own set of default CSS settings and if we not overwrite these during our project they will rear their ugly head in some unexpected way during browser testing.

There are many different CSS resets out there and simple goggle search will come up with many but I am just going to cover the basic here today. Continue reading

In this tutorial we will show you how to set up Joomla(2.5 or 3.0 and up) in Dreamweaver CS6 so that you may edit the CSS of your layout while still making good use of Dreamweaver’s great productivity tools. One warning before we proceed though, Whilst working with Joomla in Dreamweaver CS6 do not edit any of the core Joomla files. This goes for all of Joomla’s PHP and CSS files. Only work with the CSS files directly assosciated with the template you are working on. If it isn’t a CSS file you should probably not be using Dreamweaver for this task. If you touch anything else the risks of you breaking something are significant.

Continue reading

In this tutorial we will show you the basics of the @font-face CSS3 property and how to use it. Although this guide is geared more towards using in a Adobe Dreamweaver CS6 or CS5.5 development environment it can be used not matter what editor you are using. Even other levels of Dreamweaver can use this tutorial, even though major support has been added to Dreamweaver CS5.5 and CS6 for CSS3 @font-face is not amongst the properties it has been expanded to include. Continue reading

jQuery Mobile: Dynamic Footer Active Buttons with CSS

This tutorial is a follow on from JQUERY MOBILE: DYNAMICALLY ADD FOOTER OR HEADER TO EVERY PAGE in which we set up our footer so that it loads from a separate file (footer.html). Today we will show you how to set your app up so that even though this footer is being called from an external file we can still have an active state for our navbar buttons. This will done with very little modification to code. Most of the changes we make is in our CSS files only. So if you haven’t already taken a look at the above tutorial so that you have your footer coming in from an external file please do so now then return. Continue reading

Today I thought I would share three interesting tools for developing Phone Apps for users of varying levels of experience. All of these tools are free or open source programs. These three Phone App development tools are great for what they are designed to do. However each has its own natural limitations. Some requires some skill to use others do not but are then limited in what you can actually build with it. Continue reading

In this tutorial we will cover some of the things you need to seriously consider when designing button for a mobile app or website.These buttons are naturally going to be the core of any mobile application yet many designers over look the obvious ways in which these buttons must differ from our more traditional navigational elements.

With the increasing presence of mobile devices on the web and with more and more people accessing the web on more and more mobile devices every day this has gone from being an optional exercise for a web developer to a necessity.

Due to the restricted space on a mobiles screen we are faced with major challenges in how do we redesign our site to be more mobile friendly. To further complicate things every week, even daily new screen sizes are added particularly in android. So how do we deal with them. Lets start in this series of tutorials by breaking down and looking at the common elements, the things that regardless of screen size we need to look at as a designer to make the switch to mobile. Continue reading

In this tutorial we will show you how to make changes to the header of your Moodle 2.1 custom theme using Dreamweaver CS5.5. We will concentrate on changing the background of our header and the text contained within it. If you wish to change the logo or add one I have already done a tutorial on this so I won’t be covering that in this article.

To add a Logo to your header see this tutorial:

Moodle 2.1: Adding a Logo to Your Custom Moodle Theme Method 2 Continue reading

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: