An “MVP” Website is an Ongoing Experiment

A minimum viable product (MVP) is a product that is developed quickly and placed in the market with the intention of learning consumer wants and revising the products to meet those wants.

An “MVP” website isn’t meticulously developed until it is perceived to be perfect; it is developed with the intention of seeing how people interact with it so that it can be changed.  Developers collect data on how people interact with the site and revise the site accordingly.

The primary benefit of developing an MVP website is that one doesn’t run the risk of meticulously developing a website only to find that it doesn’t accomplish what the owner wants. An MVP website is developed quickly and inexpensively and elements are placed in response to what the developer learns about its user. This differs drastically from the traditional process of developing a website, launching it, and not changing it until an overhaul is requested after some period of time.

Born from the Lean Startup

The Lean Startup is a methodology born from the lessons of lean manufacturing and agile product development. It offers a marked departure from the traditional “stage-gate” method developing software. The author, Eric Ries, developed the Lean Startup as a way to eliminate waste from the software development process and avoid spending time developing features that no one wanted. The Lean Startup methodology has proven itself invaluable and has been used in unexpected industries, such as the development of the Consumer Financial Protection Bureau.

How an MVP Website is Built

The web design project begins by building a site quickly and inexpensively. Upon launching, the owner begins to test a number of hypotheses that he uses to develop the website.  He may begin with a hypothesis such as “users will purchase more widgets from our site if we use a super simple header with a search bar” and split test the feature on the site.

One version would feature the search bar and the other could feature something like a coupon. The developers run an a/b test run and the results determine whether to place the bar or the coupon in the header.

The process of split testing various elements of the website continues and the developers focus on developing a “work-in-progess” website rather than spending all of the project’s resources in the initial design phase.

Some Common Features

1. The site is often built with some sort of pagebuilder such as Divi. This allows the team to easily and quickly make changes to the website. Some criticize these pagebuilders as “bloated,” but that criticism is largely unwarranted.  These themes can be optimized to load quite quickly and the agility that they offer the website owner outweigh any drawbacks that their detractors point out.
2. There is a robust tool to collect user data.  Hotjar is widely used service, as is CrazyEgg.
3. The site uses tools and methods to split test headlines, forms, landing pages, and copy.  There are tons of software that are covered in this article: https://kinsta.com/blog/wordpress-ab-testing-tools/

The Benefits of an MVP Website

1. Actual user data guides the design process, not gut feelings or what a designer likes
2. The site is built rapidly and launched.  Precious time is not wasted guessing what people will respond to.
3. It allows a site to “fail fast”—if  no one wants or needs what the website offers, the developer can learn this without spending a fortune

The Drawbacks of an MVP Website

1. You only have one chance to make a first impression; if the MVP website is particularly underdeveloped, it could damage the brand in the eyes of consumers
2. It is hard to gain buy-in from decision makers that are accustomed to waterfall methodologies. It may be difficult to convince your boss to put up a “work-in-progress.”

Do You Use the Lean Startup Methodology in Web Design?

I’d love to hear about the MVP websites that you have developed. Leave your comments below!

Oshine vs. Divi… which is better for you?

The short of it is that Oshine is a lot more intuitive, but Divi allows for more customization. If you’re a tinkerer and are willing to take the time to learn a new WordPress theme, Divi is probably the right choice for you.  If you just want to get up and running and get your site up quickly, my recommendation is that you go right for Oshine; rest assured that it is an easy alternative to Divi. Let’s get into some of the details.

A Sagapixel Website Is Built with Oshine or Divi

WE BUILD LOTS OF SITES AND NEED TO GET THEM DONE FAST

We build a large volume of websites for small businesses in NJ. The majority are have small budgets, which means that we need to get them up quickly and efficiently; if we don’t, we either a. don’t make any money or b. have to jack up the prices to levels that are unaffordable for most of our clients.  For this reason, we use Oshine and Divi.  Both feature visual pagebuilders that allow us to see what we’re doing as we do it, greatly speeding up the development process—no need to keep a separate window open to check edits.

THEY COME WITH MOST OF THE PLUGINS THAT WE NEED

Both themes come packed with most of the modules that we would ever need to build a site.  I like this particularly because I don’t like relying on third-party WordPress plugins; often, you don’t know what you’re getting when you install them.  By having a suite of modules and plugins preinstalled with Oshine or Divi, we decrease our reliance on third-party plugins and decrease the security risks associated with them.

OSHINE AND DIVI MAKE IT EASY FOR OUR CLIENTS TO EDIT THE SITES THEMSELVES

Most clients don’t like the idea of being entirely reliant on a developer to edit text or images on a site.  Many WordPress themes can be a pain to make such edits to, resulting in diminished abilities to split test landing pages, longer times to get new content up, and major headaches if they ever need to change developer.  With Oshine and Divi, we can provide tutorials that show clients how to make edits to their own sites, allaying any misgivings that they have about being reliant on a developer to edit their sites and enabling them to be more proactive with editing their websites to support their marketing.

THEY CAN BE FAST WHEN OPTIMIZED

We regularly get Google Pagespeeds of 80+ and even up to 100 with both themes, so people that claim that they are “bloated and slow” simply don’t know how to optimize them.  Compress all of the images, minify the CSS, Javascript, and HTML, set up a good caching plugin, get good hosting, and you’re going to have a fast site.

How Are Oshine and Divi Similar?

• Both contain visual pagebuilders
• Both come with tons of modules to add features and effects to your site
• Both come with importable demos that can serve as a starting point for your website
• Both allow for tons of menu layouts

What Does Each Theme Have That the Other Doesn’t Have?

OSHINE

• Background overlay option.  Oshine allows you to add an overlay to any section or column; this can allow you to add some color to a photo without putting it into Photoshop.  Divi has a similar feature, but it affects the entire column, including any text that you may have included.  This is how we get the effect to right.  You can get the same results with Divi, but it is way more complicated than it is with Oshine.
• Way more portfolio options.  Portfolios are where Oshine really “shines” (funny, huh?)  Just go to the Oshine website and take a look at all of the different beautiful layouts that you can use for your portfolios.
• Minification by checking a box.  This is a newer feature, but I love that Oshine enables CSS, Javascript, and HTML minification by checking a box.  All WordPress themes should have this.
• Slider Revolution.  The free version comes with the theme, which is really nice.  Granted, you can always download it and install it with the Divi theme, but it’s nice to have it already there when you install Oshine.
• Setting an entire column as a clickable link.  Aita Law’s “Areas of Practice”I really like being able to set an entire column as a link (similar to the image above, only something that you can use to click to another section on the site).  An example of this would be what we did with section on the home page.

DIVI

• Photoshop-like editing of photos.  Divi basically comes with a “Photoshop-lite” module that allows you to adjust saturation, hue, brightness, and a bunch of other attributes of images on the site.  Oshine only allows you to adjust the darkness of the image through the overlay feature.
• Custom Login.  Divi allows you to customize the login screen; Oshine does not (you need a 3rd party plugin)
• Blog modules can be set by category. Oshine is very limited in its blog module.  Divi allows you to organize a blog by category; in other words, you can set a module in one column to only feature posts from one category and allow another column to be about another category.  Oshine does not have this feature.
• Audio player.  Oshine doesn’t have this feature.
• CSS modules per section and column. Oshine does provide a custom CSS module under the theme options, but Divi gives it to you right in the editor.  This is nice since you don’t have to continuously switch between tabs or screens.
• Cool section transitions. This is probably the coolest design feature that Divi has and Oshine needs.  Divi allows for sections to have cool geometric transitions between sections, freeing designers from having to do custom CSS to get away from the 90° angle rectangular section transitions.  Styling a section transition as seen below can be a major pain in Oshine, but is a breeze in Divi:

Divi has many more features, but Oshine is easier to use

Most experienced web designers will likely prefer Divi, but Oshine is probably better for the novice that wants to take a step up from paint-by-numbers WordPress templates. It’s comparable to a Wix or Weebly that enjoys the flexibility of WordPress.

We’ll give you some lines of code to add to your .htaccess file and walk you through the whole process.

How to fix the message “Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network”

1. Log into your hosting
2. Go to your .htaccess file
3. Add this code to the .htaccess file:
   1. # BEGIN EXPIRES

      ExpiresActive On
      ExpiresDefault “access plus 10 days”
      ExpiresByType text/css “access plus 1 week”
      ExpiresByType text/plain “access plus 1 month”
      ExpiresByType image/svg+xml “access 1 month”
      ExpiresByType image/gif “access plus 1 month”
      ExpiresByType image/png “access plus 1 month”
      ExpiresByType image/jpeg “access plus 1 month”
      ExpiresByType application/x-javascript “access plus 1 month”
      ExpiresByType application/javascript “access plus 1 week”
      ExpiresByType application/x-icon “access plus 1 year”

      # END EXPIRES

4. Save the .htaccess file.

Read on if you need a bit more guidance…

Site load speed is important for two reasons: user experience and SEO.  Needless to say, with Google getting ready to penalize mobile sites for slow load times, it’s important to make sure that your site is as fast as it can be.  But you already know this.

So you’ve gotten this message…

and you want to see this:

Although you may think that doing this with a plugin would be easier, my experience has been that it is not easier.  WP Cache wouldn’t allow me to do this at all and W3 Total Cache ended up crashing my site, leading to several hours of trying to fix whatever it broke.  Ultimately, adding a script to my .htaccess file did the trick.

Log into your file manager on your hosting

You should see this screen at the root of the website that you are trying to work on:

You are going to edit your .htaccess file by adding the following code:

# BEGIN EXPIRES

ExpiresActive On
ExpiresDefault “access plus 10 days”
ExpiresByType text/css “access plus 1 week”
ExpiresByType text/plain “access plus 1 month”
ExpiresByType image/svg+xml “access 1 month”
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 week”
ExpiresByType application/x-icon “access plus 1 year”

# END EXPIRES

Save it and check that it worked

You should make sure that you saved the .htaccess file, then try PageSpeed insights.  There’s a good chance that you just hit the green!

The Easy Way to Increase File Upload Size in WordPress

Godaddy and many other shared hostings’ default settings are set to not allow for particularly large files to be uploaded.  This is very easily remedied by changing some basic settings within cPanel; you do not need to start messing with pnp.ini files or even know how to code. This guide will walk you through everything; if you prefer to watch a video, scroll to the bottom!

How to Fix “File Exceeds the Maximum Upload Size for This Site.”

Works for Godaddy, Namecheap, Bluehost, and a number of other common shared hosting providers.

The infuriating “uploaded file exceeds the upload_max_filesize directive in php.ini.” with Godaddy hosting.

You’re in the middle of uploading a theme or a photo to your WordPress website when you get the dreaded “exceeds the maximum upload size for this site” message.  You are incredibly frustrated and turn to Google.

For whatever reason, the top results all tell you to create a pnp.ini file and start coding, though there is a much easier way to address this.  Godaddy, along with a number of other shared hosting providers, all set limits to the file sizes that you can upload, though these defaults can easily be changed.  You do not need to create any files and you don’t need to know how to code.

Step 1 – Log into Your Cpanel

Log into your hosting and scroll down to the “software” section of your Godaddy cPanel.

Step 2 – Click on “select PHP version.”

While you’re in here, it’s probably best to make sure that your hosting is set to version 7.1, but make sure that you check that your theme and plugins are compatible with it (I assume no liability for you messing up your site, by the way, so make sure that you have a valid backup of everything before you change anything).

On this screen, you’re going to

Step 3 – Click on “Switch TO PHP Options”

Step 4 – “Increase your upload_max_filesize”

The three number in orange are the numbers that you need to change.  Click on each one and a drop down will appear; select the new value and click “apply” (if you forget to click apply, it won’t take).  Once you’ve changed all three values, click on the save button below “upload_max_filesize.”

You Have Increased Your Max File Size Upload

This is a really easy, fast fix, but for whatever reasons, the top results on Google all tell you to create a pnp.ini file, which often doesn’t work to fix the issue with Godaddy’s file upload limits on shared hosting plans.  I’d like to help people avoid the headaches involved with this and finally start outranking those other convoluted, yet ineffective solutions, so please comment and link to this post so that we can get the word out that there is an easy fix to Godaddy’s 2mb limit on file uploads on shared hosting.

Just to wrap up, you can increase the file upload limit in just a few steps:

1. Log into cPanel
2. Click on “select php version”
3. Click on “switch to php options”
4. Select “upload_max_filesize,” increase it to 64mb, and click apply
5. Save

How to Come Up with Web Design Ideas

There are a number of approaches when trying to get inspiration for a new website.  From visiting websites such as Awwwards, to Googling “best contractor websites,” to checking out Pinterest, there are a few ways to find sites to get your prospective customers excited or simply get your creative juices flowing.

CSSMania

This is the place to check when you’re trying to get a good idea quickly.  There are tons of sites and themes listed there and it is really easy to get to the sites that the site features.  It also allows you to look at sites from specific categories, which can be helpful if you’re looking for a layout that will be most appropriate for a specific niche.  The downside is that some design firms have paid to place their less-than-perfect designs on this site, so you may have to shuffle through some bad designs before you find the jewels.

Slider Revolution Templates

I love Slider Revolution.  When I am working on a site that really needs to jump out at the visitor when he or she first lands on it, this is where I get started.  As you can see in the link here, there are many really cool templates that this plugin offers.  While I seldom use the templates out of the box, they can often serve to get me thinking of different ways to display the images that I’m working with for a specific project.  By looking at these different designs, I can pick and choose different elements that will help to better communicate whatever I am trying to convey through the layout.

Awwwards

This is another website that has great designs.  The sites that are featured on Awwwards tend to be some of the coolest, most beautiful sites done by some of the most talented and creative UX designers in the world.  Take a look at some of the featured sites and get blown away by the talent out there.

The downside to using Awwwards to get started on a project is that you’re likely to find a number of projects that will be a bit too avant-garde for your typical local landscaping company.  If you’re trying to get rolling on a project like that, the sites that you find here may be a little TOO nice for your client.  Also, the site is designed to collect votes on the best design, not to provide inspiration; as a result, it can take a few clicks to actually get to the sites that are featured.

One Page Love

This is a very cool concept for a web design portfolio site; it only features single-scroll websites.  The sites on One Page Love tend to be excellent designs that are usable for your average local business, and it is easy to actually get to the sites.  It’s definitely a site that you should check out if you’re looking to get UX inspiration for a long-scroll page or single-scroll site.

Are there any sites that you can recommend?

What sites do you use to get the creative juices flowing?  Comment below and let us know!

We eat and breathe web design, hearing all kinds of horror stories.

Most of these terrible experiences were avoidable.  If you follow this advice, you are much less likely to get burned by your website developer.  There are a number of good web design companies in NJ, but there are also a lot of hacks and flakes.  Here’s how to spot them…

Visit Their Most Recent Web Builds.

Check if everything seems to work, if there are any obvious problems.  Also, check the same websites on a mobile phone; this will give you a good idea of the company or web developer’s ability to develop a mobile as well as a desktop site.

How Fast Are The Sites?

Go to Google’s PageSpeed Insights tool and plug in some of the urls.  The resulting numbers should be above 55; anything lower and it’s a sign that the web designer did not really do his or her due diligence in optimizing the performance of the website.  If they cut corners on the optimization of the site speed, what other corners may they have cut?

Check Their Online Reviews

Google the business and see its Google reviews as well as any other Yelp or BBB reviews.  Any reputable company will have at least 5 reviews on the internet from former clients.

Do Not Pay Over 50% of the Website Cost Up Front.

This goes especially for one-man operations.  We regularly get calls from clients after they have been burned by local web designers that disappeared halfway through the job.  You don’t want to be out a large amount of money if the same happens to you.

What Are the Hourly Rates For Any Future Work?

There is a good chance that you will need them to make some adjustments to the website as time passes and you don’t want to get any unpleasant surprises.  Typical hourly rates range from $50/hr-$150/hr depending on the market where you are located.

Ask About Instructional Materials

Ask whether the company or individual will provide you videos or instruction on how to make minimal adjustments to the site.  Does your site have a news, blog, or announcements section?  You should be able to handle this yourself and the web developer should be willing to provide you some sort of instruction on how to take care of it.

Ask Past Clients About Their Experiences

If you really want to vet the web design agency, send a message to the website that they built.  Ask about the experience that the client had, how quick the agency was to respond, how happy they were with the final outcome.

Some Basic Things to Keep in Mind When Planning The Layout of Your Website

Hi, it’s Frank at Sagapixel.  We are going to be showing you today a website that we built for a client a month or two ago but we are going to be using an example of what works when it comes to having a website in-transit business for a small business. So as you can see, this is for Mosser Legal. This is an appeals law firm in Philadelphia.  This industry, just the legal industry, is extremely competitive because it has an extremely high pay off if you win.  You know, if  you have a website that’s converting, if you are ranking  well on Google you’re going to make a friggin’ fortune.  So as you can imagine, they really have to put in a lot of budget to maximizing the impact of what these websites can do for a law firm.

So let’s check it out.

First thing you land on the website and you have a very clear value proposition.  You know where we are claiming we are of the value, we are the appeals firm in Pennsylvania.  We have  a little proof over here saying, you know, we have over 900 appeals and counting.  It’s important when someone  first land on a  website they understand exactly what it is that you do, what makes you different than every other place.  Someone should not have to scroll on the website and really search around and just say,  okay,  this guy is a criminal defense firm, this is a basement waterproofing place,  this is a contractor that focuses mostly on roofing and windows.  He doesn’t really do kitchens, so let me go someplace else.  You want people to understand exactly what it is immediately.

As I scroll down, you can see that we are talking about the three main areas of business for this firm, criminal appeals, civil appeals.  And in your business there may be something else,  for example, at Sagapixel we focus mostly on paid search, web design, and SEO, so those are the first three things that we focus on when you land on our website.

As you scroll down we hit you up all of a  sudden with  a call to action, click to call us now.   This is mostly for people that are on mobile phones.   As we  scroll down we’ll make it  a little bit more of the case, why we should hire them and why you should hire us.   Going down, continuing on why you should hire us, some people  want to hear what other clients have said.  If you click here it will take you to a page where there are even more testimonials.   And then at the end yet another call to action, tell us about your case, so this is where we are collecting the leads.

So at this stage…

you have, at the top of the site, the, call us now, this is something you would be manually dialed on a desktop site.

I’m  just going to shrink this, or on a mobile site, you’re going to see it right at the top no matter where you go on the website. As they scroll down we have “click to call us now,” yet another,” tap to dial.”  We have then “ tell us about your case” and then at the very very bottom, you know,  a map that shows people how they can get to the office if they need to, you know, come and visit with the firm.  So the point here is that when someone lands on the website they need to see immediately what it is that you do, what it is you can offer that they won’t necessarily get from someone else.  Second, you need to hit them over the head with a with  the calls to action.  Every place they go, click here, click here, call us, call us, email us, follow us, sign up for our newsletter.  Third, there need to be a coherent progression of what it is that you are doing.   So in this case, this is what we are, okay? Alright, we are still on this is what we are, okay?  Now, we are getting into, this is why you should hire us, with successful cases for clients throughout, and you state,   here are some of our clients talking about us.   And then again a final wrap-up of this is why you should…a  final wrap-up saying, contact us.