BlogmyQuery – BMQ

Now that mobile browsing is ever increasing in popularity, it is in your best interest to start optimizing your websites to better fit the mobile platform and its limitations. There are many easy ways to enhance you website for mobile browsing without hindering much of your website; we discuss eight popular ones that can make a huge impact on usability.

Fluid Width Layouts

Giving your site a fluid width layout is a major step towards making your website mobile friendly. It not only gets rid of the extra dead space surrounding your website, but it additionally enables viewing across many different resolutions or platforms. So what exactly does it mean to make your site have a fluid width?

Fluid width, as its name describes, makes the width of your website stretch or squish depending on the browser size. Its ease to implement depends on your current setup or layout. If you have a simple easy to work with layout, changing your width property to a percentage is all you need to modify of your css style sheet to get it working.

No Ad Clutter

Advertisement clutter is a major issue for mobile platforms, the user ends up viewing more of the advertisements than content, if the layout has not been destroyed already. There is an easy fix to hide this clutter without creating a mobile specific version of your website. You can either use the css’ handheld stylesheet type or simply detect resolution size.

Either one you use, using a simple display:none on the obtrusive advertisements will eliminate them from view and clear things up. You should always remember that most handheld mobile devices have limited real estate, meaning the screen size can only fit a few things, and those few things should be the content the user visits your site for.

Centered Content

Centralizing your content is key on mobile devices as that is what users see immediately. A lot of mobile websites tend to stick in a lot of unneeded clutter in this spot such as images or advertisements, however the webmasters need to understand that displaying the content users came for is exactly what they need to focus on.

If a user is accessing your website from a mobile phone and is not connected to a land based network connection, bandwidth will definitely be a limitation, which means the user will select through the sites he or she wants to visit rather than visit the sites they would on a desktop.

What this means is that you need to make sure your website utilizes a small amount of bandwidth during mobile browsing, which means images should be limited, and text content should be focused. What if your site is based on imagery content?

If your website is mainly based on imagery, it is in your best interest to create a separate mobile website, one that is optimized for that platform which can size down the imagery and highly compress them. An alternate way is to create mobile applications for applicable mobile devices that allow third party applications, as this could be a helpful tool for your users.

Cross Platform Friendly Links and Effects

As new web tools and effects continue to expand, it is hard not to include a nifty hover tooltip or a drop down navigation or even links that open up a small new window using javascript to display some information. However, to a user on a mobile device, these effects and tools may not work on their platform, leaving many unusable links and tools. An easy solution to this is to always provide an alternative for users who cannot view or use them.

Some mobile devices allow Javascript but it will not be able to utilize the effects you have on your website anyway, so the best thing to do is to detect the type of platform that is connected to your website and disabling or changing some tools and effects to suit it better.

Keep Your Pages Short and Compact

Long pages for mobile devices are definitely a huge draw back because of the longer load time it takes to download the webpage. Therefore, keeping your web pages short and compact makes your website accessible across all platforms even on a device that has a very limited download speed, thus, the last thing users want to be doing is waiting for pages to load rather than spend the time browsing through it.

Thorough Navigation

As you know, typing on most mobile devices is a real a pain as the keypad or virtual qwerty keyboard is not going to be easy to work with at all. Therefore, creating a thorough navigation for your website is a key aspect to making your website mobile friendly. If you offer a genre of content, you need to assure users can get to them via browsing and not through using a search engine. If you cannot get to certain parts of your website without searching, chances are, they will not either.

Large and Clear Content

Today, many new mobile devices are touch screen, which means users will be using their fingers to navigate about their device and your website. If your website’s content and links are not large or clear enough, navigating through your website will be a pain.

To easily prevent this, try to eliminate links that are scattered within articles or paragraphs, as they are difficult to press or click on since they are surrounded by plain text. Instead, place these links above or below the bodies of text while keeping them fairly large, this allows users to easily click them with their finger without hassle.

Short and Sensible Links

This is another typing related issue; when users have to type in a long URL to get to your site, chances are, they will not. As mentioned earlier, using a keypad or virtual qwerty keyboard is not ideal for typing long text blocks, so make sure your website has a short and easy to remember domain. Additionally, eliminating typing work as much as possible to get around while they are on your website is also ideal, as usually they are accessing your site to quickly pull or reference information.

There are many websites of the same genres, but we all choose one out of them all. Whether be it the design, the layout, or the service that hooked us onto it, we all know they all offer similar content. So if you are designing and developing a site in the same genre as many others, how should you design it and what key elements should you include?

Additionally, what really sets these content providers apart from each other? In order to demonstrate what really sets content providers apart, we dive right into news content providers and technology content providers such as ABC, CNN, BBC, Engadget, and others.

Design is a major aspect of running a successful service. Having a disorganized design can destroy your user base, thus, it is critical to assure your design decisions are for the better and what users can benefit from. When you first setup a service of this magnitude, you want to look at what makes up your competitors design and why it keeps users coming back. This gives you a general idea of how users who frequent such sites like their content organized and displayed, which is a great start.

CNN

Look at CNN as an example of design organization. Its layout really sets itself apart from the others as it really emphasizes on two very important news pieces at first site. As you get lower into the page, the news titles begin to get smaller from very important to least important. This is definitely a key element in organization and to keeping your visitors frequenting your site.

The site’s header is also very clean and organized, allowing you to easily identify what topic you are currently on, and what other major topics they cover. If these major topics were not displayed in the header or navigation bit and were rather hidden in a small sidebar, users will be less inclined to locate and frequent them.

BBC

BBC’s design is quite different compared to the others. It does have the general navigation in the header and a large news headline, however, what really sets it apart from the others is its category grouping and drag and drop functionality.

Its categories are separately grouped allowing you to easily find and read what you came for straight away. With its drag, drop, and group deleting functionalities, you can easily organize the page with your most important news categories on top, or to be able to remove the sections you really do not care for like the business section or sports section. For users, these features definitely allow them to feel like they designed the website, which increases the possibility of your site being their homepage.

MSNBC

As soon as you visit msnbc, your eyes immediately catch onto the top headlines instead of catching onto the logo and header navigation, this is definitely what users want to see. Below the header are the usual news headlines and other news articles that are generic between many other content providers of the same genre.

Therefore, the only element to its design that sets the site apart from others is the unique top headlines bar that comes before anything else. As a designer, this proves that users will favor different content providers over others for selective design elements and organization methods.

ABC

ABC is another major content provider aimed towards the general audience. Its design is very lightweight to suit everyone alike. The unique thing that really separates this site apart from the others is that its layout is built by its content, which is a definite plus for those who do not want to see all sorts of design elements instead of content.

Yahoo!

Yahoo is definitely top on this list as a content provider. Not only does it offer a set of services, it also serves as a news portal. Its unique design is really, what makes it feel how a true homepage should be. It is feature-filled with color customization, drag and drop containers, and a completely customizable sidebar where you can add all your favorite sites and gadgets.

Despite all these additional goodies, it definitely catches your eye on the latest news from political, to tech, to personal, and to a whole set of genres by its intriguing news headline slider. As a designer, many of its site elements are perfectly placed in great locations, and it definitely offers what users want in a design and layout.

Engadget

As a tech blog, Engadget really nails it with its design and layout. It separates itself from others by keeping its design simple and content based. Right below the header, it places a banner of its most interesting review, and below that comes its navigation bit.

This is great for users, as they always want to see what made it to the tech headlines immediately. Other than that main highlight, its content is displayed on the page in importance order, starting with its top stories than its latest posts. A key feature with its latest posts bit is the ability to easily flip through between latest reviews, feature posts, and all news. It is definitely a great way for users to directly browse through for what they came for, making it a must key element for your designs under this genre.

Gizmodo

Gizmodo, another tech blog, has a simple yet unique design and layout to set itself apart from others. Before the main header, several articles, reviews, or interviews are displayed, it is a great way to view what is happening straight away without rummaging through the rest of the site. The simple design and the items before the header is all what Gizmodo has to keep its design and layout set apart from others, it is simple, but it goes along way.

TechCrunch

Techcrunch’s design is very well organized and well laid out. Its navigation is uniquely set above all content with a sub-navigation below the logo. What really makes Techcrunch’s design stand out is its simple layout. It holds a great lightweight slider for its popular news pieces, and then its latest postings.

Users always love to share great reads, thus, Techcrunch really pointed out its social networking tools by providing them on the homepage for each posting as well as within each posting. This really gets users connected with their friends and favorite readings having them frequent often, which makes it another key element to your design.

Neowin

Neowin’s design is very sleek and intuitive compared to other tech blogs. Its navigation is well compact and blends in well, keeping the focus on the content. Its postings are really compacted on the homepage and easy to browse through what are most important to you. Another great element to the website’s features is the Social Activity box in the sidebar, keeping their users connected with Facebook while reading great postings.

CNET

CNET’s design is unique and intuitive, and sets itself apart the most from others by far. The header is very simple and contains all you need, a search bar and the navigation. Its content is well organized and displayed. However, what really makes it stand out is the CNET user bar that sticks to the bottom of your browser wherever you navigate on the CNET website.

It contains a list of your saved reviews and products. The CNET user bar also contains a TechTracker, which sends out reminders to you about outdated software and what needs updating, a definite great tool.

To Conclude

As you know, content is also a major aspect to why users choose a content provider over others. However, design and features are also main elements to the experience.

It is always a great idea to look at your major competitors and see what they have done to keep their users coming back, which gives you a general idea of what your users would be looking for too. Taking the best of what users want and putting it together can create the perfect design and user experience your viewers are looking for.

When we have one few too many clients, we panic and begin to cut corners to squeeze in as many clients as we can into our schedule, and we end up working nights and weekends with buggy results. What if there is a way to save time and still manage the same amount of clients if not more?

Creating modular components is a step closer to reaching that goal, you can have 10, 20, 30, or even 40% if not more complete already with just several minutes of piece work.

How Does Developing With Modularity in Mind Work?

Developing with modularity in mind means everything that you can develop that can work on its own without the requirement of being laced with its parent to function properly. For example, let us say a client needs a content management system developed in PHP. Off the top, we already know we will need to develop a pagination system, a MySQL Class, and a template system.

An advanced pagination system can take few hours to perfect, a good well equipped MySQL class can take an hour or two, and a full-fledged template system can take several hours if not a few days to get it right. However, if these components are developed to be modular, you will only spend the time developing them once, and only several minutes integrating them into any other project, saving you hours and days of work.

To provide a real world example; a recent client I had needed a system that displays his inventory from his database. I quickly grabbed my already developed pagination class and MySQL class, restructured the provided MySQL tables, and retrieved the inventory paginated. The entire project took me thirty minutes to complete where it would have taken me several hours to complete if I had to start from scratch.

Therefore, spending the time to develop quality modular components increases your productivity and saves you time. Additionally, reinventing the “wheel” is always an action unnecessary and unneeded, thus being able to copy and paste modular components into many of your projects is a lifesaver.

How to Develop Modular Components

Developing modular components is all about the structural design, keeping it unattached to a specific project you are developing. The first step in creating a modular component is to think modular. Let us look at glue, it is a substance that mends and works on many items you need it for, however, it does not need your items to properly function as it functions alone. This is exactly how modularity works and the way these components should be developed.

In order to help grip this concept better, we will do a run down on a modular component as well as have it available for download free at the end of this article to have a go at it yourself.

The modular component we will be looking at is an advanced PHP MySQL Class, which makes connecting to a database and running queries easy. Let’s look at the constructor of this class:

    function __construct($db_host, $db_user, $db_pass, $db_name, $db_prefix)
    {
       //define 'em all!
       $this->host   = $db_host;
       $this->user   = $db_user;
       $this->pass   = $db_pass;
       $this->name   = $db_name;
       $this->prefix = $db_prefix;
    }
            

The constructor in this case gathers all the necessary information so that the methods of this class properly function.
Therefore, allowing the component to work seamlessly with your project while keeping the component separate and modular.

In order to understand how this class works, we will look at a couple of its methods starting with the connect method.

    protected function connect()
    {
       $this->db = mysql_connect($this->host, $this->user, $this->pass) or die(mysql_error()."".$this->db);
           //check if we have connected, otherwise run this function again

       if(!$this->db)
    {
       $this->connect();
                    }

         //since we're connected, let's select the db
            else
    {
       $this->db = mysql_select_db($this->name, $this->db) or die(mysql_error()."".$this->db);
           return $this->db;
                    }
                }
            

As shown above, the connect method is a protected method that creates a connection with MySQL and selects the database. The reason it is inaccessible outside of this class is that this method runs automatically by other methods within the class; hence, you do not need to call it. Another method we will look at is the select method, which builds a select query based on the information you provide via its parameters:

    public function select($table, $fields="*", $conditions=0, $options=array())
    {
           //check if we have a db connection
      if(!$this->db)
    {
      $this->connect();
                    }

    $query = "SELECT ".$fields." FROM ".$this->db_prefix.$table."";
       if($conditions !=0)
     {
    $query .= " WHERE ".$conditions;
                    }    

       if(isset($options['order_by']))
     {

     $query .= " ORDER BY ".$options['order_by']."";
       if(isset($options['order_dir']))

      {
     $query .= " ".strtoupper($options['order_dir']);
                        }
                    }
        if(isset($options['limit_start']) && isset($options['limit']))
      {
     $query .= " LIMIT".$options['limit_start'].",".$options['limit'];
                    }

        elseif(isset($options['limit']))
      {
     $query .= " LIMIT ".$options['limit'];
                    }

        if(!$this->db)
      {
     $this->connect();
                    }

       return $this->query($query);
                }

While it may seem to be easier to build the query yourself, this method retains the integrity of your system and keeps your projects tidy, and as a bonus, it makes creating queries for your client a lot easier when they modify their script. Additionally, integrating security measures within these methods means that those security measures will be applied to all the queries you run, good for filling in the gaps that you may have missed.

Download the MySQL Class

This MySQL Class is for demonstration and learning purposes only. Click to Download.

Design and code theft is an ongoing dilemma that we face as designers and or developers; it is something that is expected to happen eventually, as the internet is a worldwide accessed medium by many different types of people.

In fact, the most used medium for theft and fraud is the internet itself as it is the easiest way for such unwanted activates to occur at such a massive level. With that all said, we dive right into six tips to help prevent design and code theft that may otherwise be easier to occur.

Site Specific Illustrations or Graphics

One of the most common design thefts that occur is the theft of illustrations, graphics, or other artwork. Design thieves are not good at creating their own graphics or illustrations; hence, they search the net to find the best to steal. A great way to help reduce this type of theft is to make your illustrations, graphics, and or artwork specific to the website.

For example, let us say you are creating a mascot illustration for a new website design that you have made for a business card production firm. Try to incorporate what the firm offers into the mascot illustration such as a rather muscular man holding a of stack business cards with the firm’s name on the man’s clothing as well as on the cards.

Now, due to the mascot being far too specific to the firm, the thieves will be less inclined to steal it, as it will be rather difficult for them to modify the illustration to apply their own name on it. However, if the mascot did not contain any firm specific notions on it, thieves can easily take it and apply to their own use for their own gain without struggle.

Difficult Gradients and Patterns

Another great way to reduce the amount of theft of your designs or illustrations is to add some gradients and patterns specific to each object. For example, let us say you created an illustration of a battery meter measuring how much battery life is remaining for a mobile device.

Incorporating a pattern from your website design onto this battery illustration makes it absolutely difficult to be undone with modification as a pattern can be very difficult to remove from any object. Therefore, if thieves are still going to attempt to steal and hinder your work for their own gain, at least you have made it quite difficult for them, which cause many of them to fail.

Screenshot and Image Theft

Many of our designs will contain screenshots of the product the site was created for, or if the website is geared towards wildlife, you definitely do not want your images to be used elsewhere without your consent or permission. With that said, using a basic prevention method, you can at least receive credit for your images or screenshots that have been stolen.

Watermarks are a great solution to this method. Sure, they may be a bit of a nuisance, but your images would be protected. I am not talking about watermarks that hide in a corner, but more so, a light watermark spread over the entire image, one that is not obtrusive to the image, but rather visible if one is to focus on the image.

Your watermark can be as simple as being your logo or even plain text mentioning your website. With a watermark like that, thieves become less inclined to taking the image as it can be easily pointed out as an act of theft, however, if they do end up taking your images, at least they will be spreading the word for you about your website via the watermark, and chances are, you will soon enough know about the theft to be able to take care of it.

Legal Notices and Trademarks

Leaving legal notices on your website about content theft can sometimes deter theft; however, if your illustrations or other works are very valuable to you, getting your items trademarked is the way to go. By trademarking your mascot or logo, you are reserving the rights to your creations and can be defended to the fullest extent of law.

When design thieves know your illustrations or other objects are trademarked, they will less inclined to utilize the trademarked items to prevent any legal issues in the future.

PHP Code Theft Prevention Methods

There are a couple of methods that can be utilized to help prevent PHP code theft when distributing or providing your scripts to specific groups or the general public.

Encrypting or Encoding

One of the most popular methods to prevent code theft is utilizing PHP code encryption systems. These encryption systems are external libraries that must be installed on any server the script will be utilized on in order to properly function. What they do is obstruct the code into a string of random characters that cannot be understandable unless decoded.

Due to the encrypter and decrypter being external libraries to PHP, your code is rather secure when encrypted or encoded. However, as mentioned earlier, the only drawback to using such a tool is the requirement of having the encrypter or encoder library on each server the script will be used, but if encrypting your encoding your code is a definite must, the benefits are worthwhile.

Obfuscation

Obfuscation is the process to obscure your code to make it difficult to read through. This is a simple method used to make novice code thieves think twice about stealing your code, however, it is readable and can be easily hindered with. Using obfuscation is a good method to transfer code from one user to another over a network to prevent your code from easily being read during a transfer, however, it should not be a permanent solution to code theft.

To obstruct your code easily, there are many tools that will do it for you when you complete a project. This not only saves you time obstructing the code yourself, but it also provides the flexibility to work with understandable code as you are developing or modifying your script.

Cross-browser compatibility is something that can’t be overlooked in this day and age. The fact that your website could be viewed one way in Firefox and a completely different way in another browser like Safari can be a stressful thing to cope with. Being able to create and build websites that not only look but function the way their supposed to in multiple browsers isn’t a walk in the park.

This is why we’re going to provide you with these useful tools that’ll help you test for cross-browser compatibility. The process for achieving compatibility across a variety of browsers is building, testing and fixing.

Browser Shots

Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue.

A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the browsershot central dedicated servers for your review.

Cross Browser Testing

This tool allows you to pick an operating system and browser and that’s that! You will receive nicely structured screenshots on multiple browsers of your site.

Adobe Browser Lab

Accurately pinpoint compatibility issues and compare web pages at a glance to easily identify differences and potential problems. Preview full screenshots with multiple view options and customizable test settings.

SuperPreview

SuperPreview is to be used in conjuction with Microsoft Expression Web 3 in order to test and preview your web pages in multiple browsers at the same time. You can choose a variety of browsers and specify any page you’d like the application to render for compatability testing.

Spoon Browser Sandbox

The Spoon Browser Sandbox places several browsers with the click of a few buttons at your disposal with very little effort. You’re able to test several pages quickly without any issues.

IETester

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

NetRenderer

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany. Just type in a URL and try it out; it’s free.

BrowsrCamp

Browsrcamp lets you take control over a Mac OS X system preconfigured with all the Mac browsers. This is the easiest way to test every aspect of your website on Mac, including Javascript, DHTML, Ajax, Flash and more!