Blog Category: Web Design

Website vs Web Application. Let’s Settle It!

Website vs Web Application

Websites, mobile applications, web applications, native applications, so many different buzzwords. What do they all mean? It can all be so confusing. Do I need a website or a web application? Which leads to the question, what is a website and what is a web application? I wrote this article website vs web application to hopefully shed some light on these questions.

Website vs Web Application: The Website

Webster defines “website” as the following:

A group of World Wide Web pages usually containing hyperlinks to each other and made available online by an individual, company, educational institution, government, or organization

Okay, that is kinda bland. A website is basically any site accessible on the internet. The most common website types are brochure, e-commerce, social media, blog, etc… These are all sub-categories of a “website”. Yeah, I said it, basically all sites on the Internet are websites… start yelling. Here are the most common: brochure, e-commerce, news, and social.

A brochure website: Imagine a paper brochure in digital form. Brochure websites are often very small. They serve as marketing material for the company. A fancy digital pamphlet. Some of these sites are run off a web application called content management systems (CMS). All content management systems are web applications.

An E-commerce Website: An online shopping cart system. These sites are small to large and size. E-commerce stores are run off a CMS web application.

A News Website: These are sites where the primary function is to provide articles and recent information to the client. These sites are built on a CMS system, like a vast majority of the brochure sites.

Social Media / Social Website: Online communities and forums. These sites range in size and are run off web-based applications.

Website vs Web Application: The Applications

Today a vast majority of websites technically run on web applications. You might be interacting with a web application and not even know it. WordPress is technically a web application. Magento, Joomla, Drupal, the same. SugarCRM, webmail, those are web applications.

Web applications allow for users to interact with the content (even if it is just the admin who can edit content). These are the opposite of what we call a “static website”. A static website is not an application. A static website requires server-side access to edit the content and code, these are the old school HTML & CSS only websites where you can’t edit anything without FTP or SSH.

However, it gets a bit more complicated and people will complain that I said WordPress is a web application.

Website vs Web Application: The Complication

Developers might yell that basic sites which run on WordPress are websites. Yeah, a keyword that they forget to pay attention to is “on” which implies a platform. WordPress is built on a content management system. Systems sound more like an application to me. Despite all of this, they have a valid point: context.

When talking about websites and applications it is all about the context. In this sense, when talking to a developer, we must think about the end user’s perspective. Is the majority of users interacting with the site in a way that modifies the information? If yes, it is an application. If no, it is a website.

With context in mind, here are the definitions boiled down to user intent:

The primary function of a website is to be informational. With this definition, any news, blog, or brochure site is a “website”. However, I would rebuttal that all applications provide information, that is their primary function as well.

The primary function of a web application is for the users to perform specific, interactive action. With this definition e-commerce stores, social media sites, CRM (Customer Relationship Management).

That is best I can explain the website vs web application debate. Us developers like to make things really really complicated; job security you know?

If you disagree with me about my definitions then comment below! Let’s discuss!

Tips for the Classic Front End Developer Code Challenge

Lots of website development shops that focus on CMS development: WordPress, Drupal, Joomla, Magento, etc… offer a “classic” test for frontend developers. Even SASS companies will sometimes provide this test.

What is the test? Take a graphic file and “htmlize” it.

Whether or not code test provides a decent understanding of the candidate’s abilities is up to debate.  Personally, I believe hard-skills can be trained and perfected, soft skills and problem-solving abilities are harder to obtain. But, what do I know?

Good or bad, a vast majority of development shops give this test with various degrees of difference. So because of that, here are some tips to help you break through the first round and get that in person interview.

Tip 1: Find your workflow and then practice, practice, practice

As a junior developer, you might not be as fast as others, so you need to practice. It is just like sports, if you want to hit the baseball, you have to take lots and lots of cuts off the hitting tee. (For those who don’t sports ball, you can see what a baseball tee is by clicking here). So practice! Most companies give two test versions for front end junior developer positions:

Number 1: Take this PSD / Sketch/graphic file and htmlize it within an hour

Number 2: Take these PSD / Sketch files / graphic files and htmlize it as fast as you can

So how do you practice? Go to a site like this: http://freebiesbug.com/psd-freebies/website-template/ and download a PSD. Then set a timer for an hour and htmlize as quickly as you can.  Then the next day do it again, then the next day do it again, repeat over and over using different graphic files.

Helpful Reads.

But here is the secret. When your time is up, reflect and go over your code. What did you spend too much time on? Are there patterns that you can use? Can you recycle coding techniques/frameworks from project to project?  THINK ABOUT IT.
You also need to read and find resources. Research how to write clean code fast. Discover! Because if you keep practicing the wrong techniques you are going to form bad habits. Follow sites like smashing magazine. Read books likeWeb Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett.

Again, step one HTMLize. Step two think! Look for ways to speed up your workflow. Create a naming convention. Use tools like Avocode. Find an IDE you like. Read a lot. It is all practice.

Tip 2: Look at the Freaking Job Description

I feel like this is a no-brainer but look at the freaking job description. Then apply the skills they are looking for into your code tests, unless they tell you not to! What do I mean? If the description says “Has knowledge in LESS and SASS”.  Guess what, you better write some LESS or SASS.

If the front end development description has “GitHub”, then maybe you should… just maybe… you should make some commits.  Maybe… just maybe… you should give them the GitHub repo.

If the description has the word “bootstrap,” then maybe you should use bootstrap….

Get the idea?

Tip 3: Ask Clarifying Questions

If you need to ask questions, then do it! For example, if  you are afraid of just jumping into SASS or SCSS for the test. Ask them, “Can I use SCSS on this code test? I ask because SCSS is in my regular workflow, but I want to make sure it is okay.” They will probably be impressed if you ask.

Tip 4: Write Clean Code

Clean code is pretty evident and where the practice and reflection comes out. Write clean code. Use comments correctly. But, I encourage you to take this a step further! If it is a WordPress development shop, then look at the WordPress Codex.  Follow WordPress’s recommendations, same with other systems.  If you want to take it to an extreme, read some of the HTML/CSS where you are applying, try to model their naming convention.

Tip 5: Have a Naming Convention

Having a naming convention affirms the point “Write Clean Code.” Writing re-usable CSS is harder than it seems. CSS becomes bloated quickly. There are tons of articles about different methodologies for naming.  I prefer BEM (Block Element Modifier) or SMACSS.

Don’t just use a naming convention for CSS do it for image assets as well. Example, if you have multiple SVG icons don’t name them twitter.svg and facebook.svg (unless you decide to have a subfolder called icons) make it something like icon-twitter.svg and icon-facebook.svg.

Tip 6: Turn the Test in on Time, or Early.

Tip 6 is a no brainer, don’t miss your deadline! If you do, turn it in and apologize. You probably won’t get the job, but you should try to save your good name. Your name is your brand.

Tip 7: Don’t Stress

If you don’t get the second interview don’t stress, it wasn’t the job for you. You will get the next one!

6 Powerhouse Resources for Conversion Rate Optimization Tips

Having the latest conversion rate optimization tips can skyrocket your business to the next level. In landing page optimization and conversion rate optimization, staying up to date gives you a marvelous edge on your competition. I’m Miles Sebesta, a professional online marketer. I teach this growth hacker marketing to students in Fresno, California at Geekwise Academy.  I have been doing online marketing, growth hacking, conversion rate optimization, landing page optimization and other “buzz words” for many years.  To get you “self-starters” on the right track, I have put together a list of resources that provide powerful conversion rate optimization tips. The list consists of books and a rockstar web. I wanted to create the list of professionally recommended resources to help start the conversation.

Today if your company isn’t doing some conversion rate optimization, you are behind the trend.  Conversion rate optimization can save your ROI (Return on Investment), especially on Paid Per Click (PPC) Campaigns. Proper conversion rate optimization is hard to obtain.  Why? no one wants to give away their secret sauce. Companies spend lots of money, time, and frankly commit many mistakes to come up with a strategy that works. Most startups don’t have the luxury of spending frivolous cash. So that is why I created this resource list.

Enough nonsense, now start the list.

Number 1: GoodUI.org by Jakub Linowski

Quick Breakdown: Current, Inspiration, and Data Driven. Slight Con, this is definitely for those who are more experienced.

Go to GoodUI.org right now! It is freaking fantastic. To be honest, this resources is for the more experienced CRO expert.

GoodUI.org provides great inspiration and data. The site is jam packed with conversion rate optimization tips. The creators of this tremendous site have a single goal: increase conversions through testing and proof. They are absolute CRO nerds and provide an insane amount of rich conversion rate optimization tips. The site encourages you to share your test with the community. Along with the site, the creators give lots of wonderful FREE content on their youtube channel: https://www.youtube.com/c/JakubLinowski.

The content is so powerful it will make you data geeks crave more. So they created an array of excellent products to help increase conversions:

BetterUI, a course to improve your interface design
DataStories, a breakdown of conversion theories along with numbers and analysis. (These are great to show you the correct way to set-up an experiment)
Fastforward, their best templates for pages that convert
Evidence, FREE overview of past tests and results
BetterData, FREE tips on how to implement a test correctly

Number 2: Evil By Design by Chris Nodder

Quick Breakdown: Extremely fun to read and goes beyond the web page.

Conversion Rate Optimization Tips - Evil By DesignTo professionals, this might be a strange book to put as number two but don’t run away yet hear me out.  If you are looking for conversion rate optimization tips only stemming from web site properties than this book isn’t for you. This book is very holistic, focusing on developing a product that converts from the ground up (online and offline). It breaks down the whole cycle, from initial product development, the top of the sales funnels then to ultimate conversion. Nodder tears apart conversion in a  unique manner looking through the lens of the 7 deadly sins.

Evil by Design tells you how to leverage the 7 deadly sins for conversion rate optimization. Nooder dissects customer experiences and shows you the science and numbers behind some very useful mind hacks.

Buy Evil By Design on Amazon.com

Number 3: Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions by Tim Ash, Rich Page, and Maura Ginty

Landing Page Optimization BookQuick Breakdown: HUGE book, 440+ pages big, goes over all aspects of CRO, but slightly dated in some respects. If you can only buy one book, this is it.

Landing Page Optimization: The Definitive Guide to Testing and Tuning for Conversions is the new testament for CRO. It is full of conversion rate optimization tips. This book is for all levels of professionals, from beginners to experts. Although this book was published in 2012, it provides alot of good theory.

Landing Page Optimization goes over theory, breakdowns, and necessary tools. Some of the designs and breakdowns in this book are a bit dated, due to the speed of the internet.  Although dated, it provides a rich history of the roots of CRO. If you apply 90% of the learnings on in today’s setting, you will still be set-up for success.

Purchase this book on Amazon.com

Number 4: Convert! Designing Web Sites to Increase Traffic and Conversion by Ben Hunt

Convert! a conversion rate optimization resourceQuick Breakdown: Great for beginners and goes over the full sales funnel. It marries search engine optimization with conversion rate optimization. Best for those looking for “Free” traffic, not PPC (Pay Per Clicks).

Convert! is two books jammed into one. The first part “Designing for Traffic” quickly goes over search engine optimization fundamentals, how to expand your reach and get traffic, as well as being aware of your ladder (or sales funnel). While it isn’t entirely an search engine optimization book, it does go into the basics rather decently. I mean really if you think about it, if there isn’t any traffic who cares right!?

The second portion is “Designing for Conversion.” Now that we have driven users, how what? Convert! discusses getting user attention, keeping them engaged, and crafting a strong call to action. Overall this book is fantastic for small businesses looking to learn the basics of conversion rate optimization AND search engine optimization.

Buy Convert! on Amazon.com

Tie Number 5 and 6: Don’t Make Me Think by Steve Krug and Seductive Interaction Design by Stephan Anderson

Quick Breakdown: Best for beginners, UX/UI focused, and fast/easy to read. Wonderful for designers and visual learners.

Seductive Interaction Design and Don’t Make Me Think are geared specifically towards usability. Both authors provide decent conversion rate optimization tips. Although to be frank both books are geared more towards beginners. I think a lot of professionals will find the studies and insights just reinforce lessons they already know. But for those starting out both books have strong examples and images to give insight and theory. These two books are the prettiest and great for visual learners.

Get Seductive Interaction Design and Don’t Make Me Think on Amazon.com

Book: Don't Make Me Think

Seductive Interaction Design

That is my list of “6 Powerhouse Resources for Conversion Rate Optimization Tips”

If you have any questions, or disagree, please voice your opinion in the comments below!

Magento SEO Tip Enable Canonical

Do you have a Magento web site that was ranking high on the search engines?  Has that traffic dropped in the past few months?  Well, that might be due to duplicate content.  Google is on a vendetta against weak content.  Google views duplicate content as weak content. This could be a major issue on your Magento site, without you even knowing.

Magento is a powerful platform and great tool for selling products online. Most developers would agree that Magento is very time intensive.  However, it is very easy to set-up Magento incorrectly for Search Engine Optimization. Unfortunately, sometimes development firms tend to overlook a few simple tweaks that can be made to provide better search engine optimization for your Magento site.  If set-up incorrectly, your site will produce tons of duplicate content which is a big no-no when it comes to SEO.

There are many great how-to guides, when it comes to setting up your Magento store for search engine optimization.  If you are setting up a Magento store for the first time, I would suggest reading this article entitled “12 Tips for Optimizing SEO on Your Magento E-Commerce Site”. But what happens if you already have a Magento web site and it is set-up incorrectly?  How do you fix your duplicate content issue?  Well I will tell you….

Step 1 for reducing the duplicate content on your Magento store, discover your content.

The first step is to verify that their is an issue.  It is important that we don’t change any settings on your site, if their isn’t an issue. So I will show you some techniques to determine if you have duplicate content.  The quickest way to determine if you have duplicate content is to navigate through your site.  While navigating around pay attention to your urls.

You might start noticing that your site has multiple pages with the same content.  This structure generally looks something like this:

www.domain.com/category/subcategory/product-name.html
www.domain.com/category-2/subcategory/product-name.html
www.domain.com/category/product-name.htmlwww.domain.com/category-2/product-name.html
www.domain.com/product-name.html

You will see similar structures, like the one presented above if you have products that are found in multiple categories.  If your settings are not correct then you run the risk of having THOUSANDS of duplicate content Magento pages.  Luckily for us, Magento makes this easy to fix!

Step 2 for reducing duplicate content, enable “Canonical Link Meta Tag”.

The Magento developers had this issue in mind when they created the system. They make it easy for us to fix 90% of this issue.  All you have to do is login to your Magento backend and go to System > Configuration > Catalog > Search Engine Optimizations.

On this panel you will see “Use Canonical Link Meta Tag For Categories” and “Use Canonical Link Meta Tag For Products”, they are probably set to “No”.  Switch them to “Yes” and save.  Congratulations, you just fixed 90% of the issues!

What did you just do?  Well, you added a tag to your pages called rel=”canonical”.  The system update tells Magento to add the canonical tag to your products.  The rel=”canonical” will tell Google that you have one original page and multiple duplicate pages.  It does this by adding the canonical tag wb

 

 

 

Scaling Div Height Proportional to Width Trick

Scaling Div Height Proportional to Width Trick

Here is a really simple script that will allow you to scale background images and divs based upon the height width of the browser. This works great for banners.

The Html:

<div class="scaling-div">
  <span></span>
</div>

 

The CSS:

.scaling-div {
	background:url(your-image-here.jpg) no-repeat center center;
	width:100%;
	background-size:contain;
	position:relative;
	padding-bottom:27.08%;
}
.scaling-div span {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	display:block;
}

Set the padding-bottom to the correct percentage, to find this, take your background image height; which in my case was 390px and divide it by the pixel width, which for me was 1440px.

This 390/1440 = 27.08%

Codepen “Scaling Div” Example:

See the Pen scaling background div by Miles S (@milessebesta) on CodePen.

How to Display WordPress blog posts with Featured Images on Magento’s Homepage using FishPig module

How to Display Wordpress blog posts with Featured Images on Magento's Homepage using FishPig module

Hi there, this tutorial assumes you already have FishPig’s magento to wordpress module already installed and configured. Once you have that done open up your homepage theme and type in this code where you want the blog posts to appear

 <?php echo  $this->getLayout()->createBlock('wordpress/sidebar_widget_posts')->setPostCount(6)->setTemplate('wordpress/sidebar/widget/homepost.phtml')->toHtml(); ?>

Next go to your app/design/frontend/yourtheme/yourtheme/wordpress/sidebar/widget/ folder and place in this code:


<?php $posts = $this->getPosts() ?>
<?php if (count($posts) > 0): ?>
			<?php foreach($posts as $post): ?>
					  <?php if ($featuredImage = $post->getFeaturedImage()){ ?>
					    <a href="<?php echo $post->getPermalink() ?>">
					    	 <div class="blog">
					        	<img src="<?php echo $featuredImage->getLargeImage();?>" alt="<?php echo $this->escapeHtml($post->getPostTitle()) ?>"/>
					        </div>
					    </a>
					<?php }  ?>
			<?php endforeach; ?>

<?php endif; ?>

That code will display a blog’s featured image if it has one.

You can also add more too it but using functions like:

$post->getPostTitle(); // Post title
$post->getPostDate(); // Post date
$post->getPostDate(); // Post date

If you want to put more content in the foreach loop.

Finally if you want to display a different image size use these instead:

getFeaturedImage();
getThumbnailImage();
getMediumImage();
getLargeImage();
getFullSizeImage();
getPostThumbnailImage();

Simply choose one and place it instead of getLargeImage in the code posted above.

Finally, the custom featured image code would look like this, you would need to set your custom image size in your wordpress function file, but we assume you did that already. To call up the custom image size you use this code:

getImageByType($type = 'typenamehere');

Magento Show Latest Review on Product Page

Want to show the latest product review on your product page? It is simple add the following

<?php
                $productId = $this->getProduct()->getId(); 
                $reviews = Mage::getModel('review/review')
                    ->getResourceCollection()
                    ->addStoreFilter(Mage::app()->getStore()->getId())
                    ->addEntityFilter('product', $productId)
                    ->addStatusFilter(Mage_Review_Model_Review::STATUS_APPROVED)
                    ->setDateOrder()
                    ->addRateVotes();
                $ratings = array();
                if (count($reviews) > 0) {
                    $x = 1;
                ?>
                    <div class="product-review-template">
                        <h2>Latest Review</h2>
                        <div class="single-review-template">
                            <?php 
                                foreach ($reviews->getItems() as $review) {
                                    echo '<p>'.$review->getDetail().'</p>';
                                    echo '<p><span class="author">'.$review->getNickname().'</span>';
                                    foreach( $review->getRatingVotes() as $vote ) {
                                        echo '<span class="stars">'.$vote->getRatingCode().' - '.$vote->getPercent().'</span></p>';
                                    }
                                    if($x == 1){ break; }
                                }
                            ?>
                        </div>
                    </div>
<?php } ?>

Simple Mobile Menu for Shopify

Do you need to add a mobile menu to your shopify theme? This is a pretty easy process when done correctly. In shopify go to your theme.liquid. In there you will want to look for some code that looks like this (might be slightly different depending on your theme)
[Read more…]

Downloading All Images, HTML, CSS, Javascripts and PDFs from SSH

Downloading All Images, HTML, CSS, Javascripts and PDFs from SSH

Need to migrate\back-up a web site that you don’t have access to the core files?  Going through manually by hand is annoying and can take forever.  Here is a simple script to download a majority of the web site files.  It will not download files hosted on CDN’s or other domains, but it is a good starting point.  First login to your linux or unix box. Then type the following command.

Note that if you do this too often, you might get blocked or kicked from a server, so beware of trying to take too much information too fast.

wget -r P . -A jpg,jpeg,gif,png,html,css,txt,php,pdf,js http://www.domainname

Now sit back and watch your machine do the work.

Magento Delete Old Credit Card Numbers – Solved

Magento Delete Old Credit Card Numbers - Solved

Here is a quick tutorial on how to clear credit card numbers. I will include a few scripts that you might helpful. BACKUP YOUR DATABASE. If you don’t back up your database before running these scripts you are playing with fire. So always, back-up before running the scripts.

Magento Clear Credit Cards of Complete and Canceled Orders

Here is a script to clear credit cards for complete or canceled orders. Place this script into a php file on the root level of your magento installation. Wherever you see files like app, skin, var.

<?php
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

require_once('app/Mage.php');
Mage::app();

$orders = Mage::getModel('sales/order')->getCollection()
   ->addFieldToFilter('status', array('in' => array('canceled','complete')))
   ->addAttributeToSelect('status')
   ->addAttributeToSelect('increment_id')
   ->addAttributeToSelect('entity_id')
   ->addAttributeToSelect('quote_id')
   ->addAttributeToSelect('created_at');

$prefix=(string)Mage::getConfig()->getTablePrefix(); // Get Prefix

// fetch write database connection that is used in Mage_Core module
$write = Mage::getSingleton('core/resource')->getConnection('core_write');

foreach ($orders as $order) {
    $IncrementId = $order->getIncrementId();
    $OrderStatus = $order->getStatus();
    $EntityId = $order->getEntityId();  // Very Important
    $QuoteId = $order->getQuoteId(); // Very Important
    $year = date('Y', strtotime($order->getCreatedAt()));

           $updatefirsttable = "update ".$prefix."sales_flat_quote_payment set cc_number_enc=null where quote_id=".$QuoteId."";
           $updatesecondtable = "update ".$prefix."sales_flat_order_payment set cc_number_enc=null where entity_id=".$EntityId."";

           $write->query($updatefirsttable);  // Update Quote
           $write->query($updatesecondtable); // Update Order
            echo "Increment ID";
            echo $IncrementId;
            echo ' Quote id: ';
            echo $QuoteId;
            echo ' Entity IdL ';
            echo $EntityId;
            echo ' Year: ';
            echo $year;
            echo '<br/>';

}
echo "complete";

This should go through and remove all of the credit cards for completed and canceled orders. It should also print out to the Increment ID, Quote, Entity ID and Year, this is so you can troubleshoot it if there is an error.

Clearing Pending Credit Cards from Magento by Year

I had a client that needed to clear credit cards for items that were considered PENDING because they never updated them to complete. So I wanted to clear everything before the year 2015. So I just made a few modifications to the script. This clears all pending orders credit cards before the year 2015. You can update it to your year by changing 2015 to whatever year you want.

<?php
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

require_once('app/Mage.php');
Mage::app();

$orders = Mage::getModel('sales/order')->getCollection()
   ->addFieldToFilter('status', array('in' => array('pending')))
   ->addAttributeToSelect('status')
   ->addAttributeToSelect('increment_id')
   ->addAttributeToSelect('entity_id')
   ->addAttributeToSelect('quote_id')
   ->addAttributeToSelect('created_at');

$prefix=(string)Mage::getConfig()->getTablePrefix(); // Get Prefix

// fetch write database connection that is used in Mage_Core module
$write = Mage::getSingleton('core/resource')->getConnection('core_write');

foreach ($orders as $order) {
    $IncrementId = $order->getIncrementId();
    $OrderStatus = $order->getStatus();
    $EntityId = $order->getEntityId();  // Very Important
    $QuoteId = $order->getQuoteId(); // Very Important
    $year = date('Y', strtotime($order->getCreatedAt()));

    if ($year < 2015) {

           $updatefirsttable = "update ".$prefix."sales_flat_quote_payment set cc_number_enc=null where quote_id=".$QuoteId."";
           $updatesecondtable = "update ".$prefix."sales_flat_order_payment set cc_number_enc=null where entity_id=".$EntityId."";

           $write->query($updatefirsttable);  // Update Quote
           $write->query($updatesecondtable); // Update Order
            echo "Increment ID";
            echo $IncrementId;
            echo ' Quote id: ';
            echo $QuoteId;
            echo ' Entity IdL ';
            echo $EntityId;
            echo ' Year: ';
            echo $year;
            echo '<br/>';
    }

}
echo "complete";