When submitting the form at this DNNSofware user login page with wrong credentials, the return page jumps suddenly from its current position. It’s an unnecessary jarring visual effect. For best usability effect, display a result message while keeping the page in its current position regardless of where the viewport is in relation to the page’s length. This way the user’s eye direction stays on the form in the same position without distraction.
This DNNSoftware user registration page has the whole form below the fold. At a glance, a user can’t discern if this page has a form. There’s too much unnecessary white space. The font size of the title “Create a DNN Site Account” is too big. The image is too big. These elements could be smaller and part of the form would rise to be visible in the page.
I have noticed some restaurants use links to pdf files as their only means for showing their food menu. The other day I went to a restaurant for brunch and the wait was over an hour. I decided that was too long a wait so I pulled out my phone looking for another nearby restaurant. I found one but I couldn’t view the menu on their website. The menu was an image link to a pdf file. I clicked on the link and nothing happened. I clicked a few times. Then I noticed several download icons on the notification bar. The phone was downloading the same pdf file in multiple instances! I cancelled all but one download. When the download finished and the pdf file opened in a pdf reader, I saw mostly garbled text. Duh.. what a frustrating experience. I decided not to go to that restaurant. Their loss.
However this didn’t end at this point. Later from home I emailed the restaurant and told them about my unfriendly mobile experience with their site. Their response was that the restaurant had several locations and the menu changes every week and differently for each location. So placing pdf files was the easiest solution and it was too much work to update the site.
Personally I find this a weak reason. The menu didn’t have any graphics so whatever tool they used to create the pdf I am sure it had an option to export to a single formatted HTML file which could as easily be placed in the site. Just name the file the same original name. Word, Illustrator, Publisher or whatever tool was used surely has an export or Save As option to a single HTML file.
Make your site mobile friendly if it has a high chance for being used from a mobile device and your business gets significant customers on the go.
Instead of installing a LAMP environment by installing the different components separately in Windows, there’s a simple one click install which works beautifully. Plus you can install PHP apps like WordPress, Drupal, Joomla using the same one click installs.
- Download and install XAMPP
- I am running IIS on my machine which uses port 80. Therefore Apache needs to be using a different port as you can’t have two web servers listening on the same port. Run C:\xampp\xampp-control.exe. Clicking the Start button for Apache will fail because Apache is trying to listen on port 80 which is already being used by IIS. Apache needs to use a different port. Click on the Config button and open the httpd.conf file. Change the line ‘Listen 80’ to ‘Listen 81’ or any available port. Save the file. We need to change the SSL port as well. Click the Config button and select the httpd-ssl.conf file. Change the line ‘Listen 443’ line to ‘Listen 444’ or another open port. Save the file. Now clicking the Start button for Apache will start it. If not, view the visible log for the error and fix accordingly.
- Click the Start button for MySQL. Now your LAMP environment is ready for use.
- Download and install apps like WordPress from Bitnabi. The installer is smart enough to install the app within XAMPP. No further configuration is necessary
- To bring up WordPress for example and if you followed the previous steps, open a browser and go to localhost:81/wordpress and WordPress should show up. Follow the instructions from there for first time use.
- Similarly if you installed Drupal and Joomla, you can use localhost:81/drupal or localhost:81/joomla
- I wrote the instruction above from memory. I hope I didn’t miss a step but it should be easy to follow the steps.
In my previous post I talked about how to view what SQL statements a PHP program sends to a MySQL database in real time. Coming from using Microsoft’s development tools (Visual Studio, .NET & SQL Server) to using PHP and MySQL, I feel Microsoft has made me a spoiled developer with the tools I have on hand. Tools that are very powerful, yet easy to use and require very little or no setups. I came across a tool which enables me to code and debug PHP in my favorite IDE, Visual Studio (VS).
PHP Tools for Visual Studio from Devsense. It’s a Visual Studio extension which enables you to code and debug PHP applications right from inside VS. It’s very easy to set up including the set up for xdebug for debugging. It even showed the recommended xdebug settings and offered to apply the changes to php.ini instead of me doing them manually. As a PHP beginner, I like that PHP documentation is available inside VS. When hovering over any PHP method, a tooltip shows me the function description. It’s a big time saver. I don’t have to open a PHP site or book to learn what function does. A basic version is free and a Pro version is $79. A 30 day trial is available which has all the Pro features. The Basic version doesn’t include debugging and other features. So for me the Basic version is of no use as the whole reason for me for using such a tool is for debugging. I just started evaluating the product yesterday and I am very impressed with the ease and quality of this software.
I am a full time .NET developer however I am working on a personal project which involves WordPress and converting a WordPress to .NET. That’s why I am learning PHP because I need to know how WordPress and the plugin work in PHP. More...
One application I find very useful is SQL Server Profiler which I often use for debugging Windows apps which connect to SQL Server. The profiler displays all the commands which were issued by the app. One of my personal projects I am working on is WordPress. WordPress uses PHP and MySQL for its database. WordPress interacts heavily with MySQL. I need to debug WordPress and find out it’s sending to MySQL? I need a tool like SQL Server Profiler. I did some research and was disappointed to find out there’s nothing as powerful and as easy to use as SQL Server Profiler. This is when I appreciate what Microsoft provides for its developers. I am a .NET developer and switching to PHP and MySQL is an less pleasant experience. I will blog about how to set up PHP debugging.
I tried different MySQL profilers or tracers, as some call them. I was getting annoyed by how clunky or how buggy or how time consuming these tools are to set up and use until I came across a tool which looked very promising, Neor Profile SQL. It’s a free proxy app which sits between your client (WordPress in my case) and MySQL. It receives and captures the SQL commands from the client and then passes them to MySQL. Then it receives the response and passes them back to the client.
Neor was very simple to set up. All I had to do is tell WordPress to talk to Neor instead of to MySQL and this is done by changing the port it uses from port 3306 (MySQL’s port) to Neor’s port 4040 (can be changed). In WordPress this is done by changing the port number in the wp-config.php. Neor needs to be running during debugging.
Don’t forget to change back the port number when you’re done. This is as close SQL Server Profiler experience as I could get. Real time SQL logging with some useful statistics.
(Screen1): This screen shows the sessions WordPress used to load my home page. The home page has an image slider which issues its own SQL commands.
(Screen 2): Then double clicking the first session, shows the queries in this screen capture. The SQL code of the selected query is shown.
Today I came across an error message from Excel 2013. I was trying to open an .xlxs file and received this error:
I have gigs of free memory (system has 32G RAM) and gigs of free disk space on my c drive and the drive which holds the temp folder. So I know this error message is misleading and the issue is most probably something total unrelated to this message.
After searching the web, the simple solution was to right-click on the file and click the unblock button. It seems Windows (I am using Windows 8) didn’t trust the file because it I downloaded it from the web.
This is a quick tip. If you experience too much jaggies or pixelation when scaling a bitmap image up or down, try Perfect Resize from OnOneSoftware. It comes either as a stand alone program or as a plugin for Photoshop and other graphics software. In some instances, it does a much better job than Photoshop’s resizing feature. The company offers a 30 day fully functional download.
The other day I was shopping online for a specific type of a sweatshirt. I typically do not buy clothes or shoes online. I have to see them, feel them and try them on. I am pretty particular of what I wear. Most importantly, the item has to be comfortable. I can’t determine this by shopping online.
The sweatshirt I wanted is a microfleece, full zip, with zipped side pockets. I couldn’t find one in local stores so I went online. I like microfleece because it’s warm but not too warm like a regular fleece and it’s thinner which is more comfortable to wear. It’s full zip because if I am cold, the full zip is on and if I feel too warm, I can unzip it to let more air in. I need side pockets because I prefer to put my stuff (cell phone, MP3 player and earphone, car keys.. etc.) in them instead of in my pants pockets which I prefer to have them empty. The pockets have a zipper so nothing falls off when I take the sweatshirt off and on. I find the whole set up pretty handy, accessible and comfortable.
Anyway, let’s get into the purpose of this post. I came across some shopping sites which have issues in their way of displaying an item which is in stock but have certain colors/styles/sizes which are not. My favorite ecommerce site, Amazon.com, wasn’t clear about the availability of different sizes. For an item of interest, all I saw was a single size, small. I wasn’t sure if the item is offered in that size only, or if the other sizes are out of stock and that’s why they don’t show up. Should I check again later? I would have preferred if they displayed all the sizes and for the ones which are out of stock, they could have displayed some kind of notification. Example shown below.
Sears.com has the same issue. Only one size showing and no additional information about other size availability.
In my search among ecommerce sites, I came across a site which, in my opinion, did it correctly. All the information is presented upfront. No guessing or ambiguous information. If shipping will be late or a size is out of stock, this information is presented in the style/size/color selection dialog. Very well done. One of the main tenants of good web usability is presenting all necessary information clearly.
I was researching some commercial Magento themes (templates) this week. Magento is a PHP based e-commerce (shopping cart) solution. My favorite site for providing templates is Themeforest. They have affordable high quality mostly web 2.0 style themes. The site itself is very clean, high quality, simple yet very usable. I sorted the Magento themes by number of sales. This usually means the first themes in the result listing are of polished high quality themes and that’s why they sell well. One statistic Themeforest provides for each theme is the number of sales. I looked at the first theme, Fortis and quickly determined the revenue:
Price $80 x # sold 1639 (as of now) = $131,120. Wow! That’s a lot of money from selling a single digital product. The template was added to Themeforest on March 6th, 2012. Not bad for less than a year display and more to come.
minus Themeforest’s average commission, say 35%, what’s left is $85,228 (rates schedule)
minus taxes, pure profit is at least $50,000.
What do I do to reward myself from a side job which put $50,000 in my pocket?
A brand new exciting Tesla model S car!
So if you want to make some extra money and you’re a good web designer, consider selling templates. Not just html templates but a full theme for a CMS or shopping cart or platform. These templates sell for more and have less competition.