• Read more about Break The Bootstrap Mold And Optimize Performance

Over the past few weeks, I’ve heard a great deal of pushback around Bootstrap. The first argument is focused around general feedback that Bootstrap isn’t suitable for production, and the second is that using frameworks like Bootstrap is limited from a design perspective. I’d like to offer a few insights into the practice of implementing Bootstrap in an optimized fashion.

At a recent An Event Apart in Nashville, there was a panel discussion with Jeffrey Zeldman, Eric Meyer, Rachel Andrew, and Jen Simmons. During this discussion, Bootstrap came up a few times:

“If people want to use Bootstrap, or anything, whatever it is, as long as you don’t release it to the public that way.” - Jeffrey Zeldman

"There were back to back presenters today who talked about how we really feel like people should stop using Bootstrap. And you were saying Jeffrey, that it’s great for prototypes, and I’ve heard a lot of people say that, Karen McGrane said that on the show not long ago, “Oh, Bootstrap’s great for prototypes”. - Jen Simmons

Before I demonstrate a few implementation methods, I first think it’s prudent for us to remember that, as in many cases in web development, it’s not the tool’s fault, but the implementation. A shining example of this is when smartphones first appeared, we had developers who had been building desktop sites for decades, who for the first time were being presented with the mobile form factor. Using methods that worked on powerful desktop machines with broadband had to be reassessed, and for a while, the idea that the web is slow on mobile was very popular. This was not the fault of the web, the mobile web, smartphones, or anything in between. This was (and still is to some degree), the fault of developers sending desktop content to mobile devices, among other implementation challenges.

In the case of Bootstrap, the biggest culprit of negative performance impact comes from site authors who include the entirety of Bootstrap’s CSS or JS files. With both, we must always include only the modules used in our app or site.

When implementing Bootstrap’s CSS, this is accomplished by making a copy of the Bootstrap manifest file that imports each individual Bootstrap module. This is placed with your app’s CSS modules. It is typically imported before everything else:

Start by commenting out every module in this master Bootstrap manifest. As you work on your site, only uncomment the modules you’re using:

This allows for a completely customized Bootstrap CSS file, without having to depend on a generator or tool to build a custom version of Bootstrap for you, and ensures that you have the most optimized version of Bootstrap CSS possible running in your app, because you’re only enabling modules as needed.

The same method can be applied with Bootstrap’s JS. In Rails, it’s very easy to include individual Bootstrap JS modules in your app’s application.js file:

Your implementation may differ, but the idea stays the same: only include CSS & JS modules that are being used.

With an optimized implementation of Bootstrap, you can be confident that your performance won’t suffer as a result of using the framework.

The other popular sentiment is that Bootstrap limits our design, a sentiment echoed at the same An Event Apart conference:

“I feel like if you use it as a prototype then you’ve just, right from the first brushstroke, set yourself up to stay within a very small box. Now, it used to be a very small box inside a of a just slightly larger box, but now it’s a very small box inside of a box that’s about to get really huge, and I want to be in the rest of the box.” - Jen Simmons

Using the same CSS architecture described above, we can easily add variables in our Bootstrap manifest that override the Bootstrap defaults, effectively giving us the flexibility to design & build anything we want:

These are only a few examples, but they will have a big impact on the site layout. You can customize any variable provided by Bootstrap. The options in Bootstrap’s variables file are virtually limitless.

While Bootstrap allows designers & developers to customize design & layout to their heart’s content, it’s also worth noting that design patterns exist for a reason. Users have certain expectations, and in many cases, breaking those expectations can cause confusion. This is best demonstrated with the Ionic hybrid app framework. Ionic offers a set of components that adapt to iOS, Android and Windows platforms. With Bootstrap’s components, you get a base set of components that users are familiar with, but also the flexibility to customize them.

It may be true that the defaults for Bootstrap make it too easy for developers to implement a bloated or cookie-cutter version of the framework. But, with the methods described in this post, you can easily break outside that box, and ensure your work is delivered in an optimized fashion to your users.

• Read more about Why Is User Experience Important In The Design Process?

Have you ever found an amazing tool that looks awesome and it tends to be popular but when you try to use it you have no idea know HOW to use it? Or you get more confused when reading the instructions? This is the perfect example of an amazing design with poor user experience.

Creating an app is no easy task, the designer has to know how the app will work before considering the look and feel of the interface. For all UX designers, the end goal is to provide an effortless experience for the user.

True user experience goes far beyond giving customers what they say they want, or providing checklist features. It is crucial for the designer to use EMPATHY when designing an app. If you put yourself in the end users’ shoes this allows you to move beyond a superficial understanding to a real appreciation of users’ feelings and behaviors, which in the end will avoid any kind of frustration while navigating the app.

User experience designers often ask themselves:

•         What is the user trying to accomplish while using this app?
•         How will users feel when they use it?
•         Will they be confused?
•         If so, why?
•         How can I solve this issue in the shortest and easiest way?

Designers are compelled to navigate the app from the beginning to end, trying to find frustrating steps, annoying alerts, or anything that can affect the users’ behavior or feelings. After all, if a product is well-designed, a user shouldn’t even have to think about it they will know the app is there to help them and will not confuse or frustrate them.

• Read more about Mobomo Named Winner For 2016 Muse Creative Awards

We are honored to be named a platinum award winner for the 2016 Muse Awards. We submitted Game Time Pressure Mobile Application that we built for the Baseball Factory. Muse Creative Awards is an international competition for creative professionals who possess the unique ability to inspire with concept, writing or design whether through traditional materials or electronic media. More than paychecks drive a creative people to perfect their craft. They follow the spark of an inner muse, lighting the path to success with deep knowledge and shining originality.

Recognized as the leader in player development for the past 21 years, Baseball Factory provides world-class instruction, life-changing experiences and new opportunities to help student-athletes achieve their dream of playing college baseball.

Seeking ways to help players reach their full potential through science and innovation, Baseball Factory conducted a series of studies over several years narrowing in on five key categories of stress that interfere with the ability of a player to maximize his talents on the field: performance pressure, competitive demands, time pressure, task load, and noise.

Armed with these findings, the Mobomo team developed Baseball Factory's signature Game Time Pressure Training and Simulation Program - a premier strategy for helping athletes overcome game-time stressors. The program has been successfully implemented in both live game and simulated environments, but always in an in-person, hands-on setting.

• Read more about A beginners guide to Gulp

Gulp is a tool to help web developers automate various tasks. Like Grunt before it, Gulp makes repetitive tedious tasks bearable through automation. Remember: if you have to do it more than once, you've already done it too many times.

Today we are going to to set up a very basic Gulp workflow and only focus on building and optimizing your CSS from SCSS. In later posts we will have Gulp do more like compile and optimize you JS.

Prerequisites

Gulp, grunt, and other automation tools rely on Nodejs, so if you don't already have nodejs installed you can get it here. Nodejs will come with NPM, (node package manager) which will give you easy access to download all sorts of things such as gulp itself.

When you're done installing Nodejs it's time to install gulp. Open your terminal of choice and enter the following command:

sudo npm install gulp -g

This command will install gulp globally on your machine. Note, installing packages with sudo is potentially dangerous, this post goes into more detail and precautions to take.

Setting up your project

Now we need to create a project directory. We are going to create a dirt simple project for this example. So create a folder named "myproject", and inside that folder create another directory called "dev".

In your terminal, navigate over to your project directory where we can set up our project by creating a package.json file which will define information about our project and also lists project dependencies that Gulp relies on. We don't have to do this manually, run the following command to set up the file:

npm init

This will create the package.json file and will look something like:

{
 "name": "project",
 "version": "1.0.0",
 "description": "this is a demo project",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "your name",
 "license": "ISC"
}

In this example, I only set the name, description and author. I chose the defaults for everything else.  Now we are going to use more than just Gulp for our workflow, so add a comma to that last line ("license":"ISC") and at the following new line:

"devDependencies": {}

This is where we will list our dependencies as comma separated key/value pairs (standon JSON).

Dependencies

• Read more about How To Create A New Website: Part 2

In our last post on developing a new website, we went over some basic questions that your web and mobile development company should be asking before starting the process of your website redesign. Once those questions are answered your project manager has a better idea of your end goals and how you see the direction of the new site. So what’s next?

Identify:

Identify the key people who will be affected by the project. Start clarifying exactly who the project’s owner is. This may be an internal or external person of the client. Either way, it is essential to know who has the final say and what will be included in the project’s scope and what will not be included.

Once we establish who will be involved on the client side, we set up weekly meetings. During the meetings we set the agenda so that we are not wasting their time or ours. During the weekly meetings we review the ongoing project tasks and reprioritize items if necessary during this time.

Plan:

We start the process of creating a new website by scheduling a meeting with the web designers and developers. During this meeting we clearly communicate what the client expects and the end goals of the project, this makes it easier for us to decipher our weekly sprints. While keeping in mind user experience, visual design, and mobile first design we discuss action items such as mood board work sessions, style tiles, prototype application features, creating visual style guides, data visualization designs, and usability testing.

Build:

This is when we start building prototypes and mockups and establishing a basic application flow. During this process we are keeping constant communication with the client during the project life-cycle. Your website will not only be aligned with your business needs, but users will be able to find the information they need quickly and easily. We implement a responsive design at this point of the project cycle, this is vital because we are in the age of the mobile device, it is almost guaranteed that your website will be accessed from desktop, tablet, and smartphone. Your responsive site will provide the best user experience across devices – and it will be 508 compliant. Visit USA.gov or NASA.gov to see some of our work.

Risks:

Risk is the possibility of an event or condition that if it occurred, would have a negative impact on a project. After a project begins, events that are difficult to anticipate might create new risks. For example, unseasonably rainy weather might threaten the end date of a construction project. Planning for, identifying, and reducing risk at various times during a project can help you to keep the project on schedule and within budget.

• Read more about Reasons To Redesign Your Website

A website redesign can be a big project, although it can seem like a daunting process, it does have many advantages that will help your business. After all, redesigning your website is a powerful thing you can do for your company, this is often times the first way users communicate with your company, by following best practices and using a strategic approach you can help your brand garner ROI as well as brand visibility.

We recently redesigned our own website Mobomo.com, but before starting the process we needed to discuss our end goals, what did we want our new site to accomplish. Here are some of the reasons that we decided to do a redesign:

1. Improving functionality and usability: Although our last site provided functionality we wanted to take the design to the next level and by doing that it ultimately meant that our new website needed better functionality for users. Who doesn't want to drive more traffic to their website? We wanted to improve the user experience on our website and by this I mean we wanted our users to clearly be able to find what they were looking for with ease. If a user is not able to find something easily then more likely then not they will leave your site without thinking twice.
2. Better visuals: I think imagery is everything. If done correctly, it is easy to tell a story by the power of a picture. While in our beginning phases of the redesign project, we agreed that we wanted fresh, up-to-date visuals as well as colors to compliment the site. We felt that we could tell a more powerful story by using more visuals and guide the user through a story. Changing your visuals is a good way to stay up-to-date with the website trends as well as provide a different look to the site so it doesn't feel stale.
3. Rebranding: If your company has been going through a rebrand, it is important to keep your website up-to-date on the new change but I don’t just mean changing logos and colors, you will need to update the content on your site as well so that it is consistent in the branding process. We wanted fresh, new content;  it's always nice to do a pulse check on the content living on your website- is it old? Outdated? Is the user finding the content helpful to their end needs? You can still use the meat of the old content but spice it up and change the wording to ensure that it doesn't go stale.
4. Mobile friendly: We were mobile friendly before however we wanted to make sure our redesign was easy to use on the mobile platform. Mobile has grown significantly over the past few years, so much so that mobile searches have surpassed desktop searches. I think I can speak to everyone here, we all need to do more than just keep up with the times, we need to be ready to make those changes to accommodate users no matter the platform they choose to use. Its important to make sure your website can be viewed on a wide variety of devices, including desktops, laptops, tablets, and smartphones. By incorporating a responsive web design, you’ll be assured of reaching a larger audience than you would with a website that’s not mobile-friendly. 

Conducting a redesign on your company website can be challenging, even though we felt like we were checking the boxes on our old design and felt that user experience was high, it felt outdated and it needed a makeover. The important aspect in redesign is taking the things that you were doing well on your old site and make them even better. You can always learn about what you did wrong in a redesign but what about what you did right?

• Read more about Content Management Systems: Wordpress or Drupal?

A content management system, or CMS, is a web application designed to make it easy for non-technical users to add, edit and manage a website. We use Wordpress and Drupal the most for CMS development, but it is all dependent on our clients' needs. Not only do content management systems help website users with content editing, they also take care of a lot of behind the scenes work.

Whenever it comes to developing a website from scratch, and for a client who wants to be able to manage the site after the launch it is important as a developer to find a tool that the client will be able to use. When we think about web development it’s always better for the client and for the company to find a good content management system or CMS, because it solves problems that you will never have to worry about from the UI of the backend to the front-end wanted features it solves a lot of issues upfront that you will not have to worry about later.  As a website evolves, it will never stay in the final version you delivered to your client, when we develop we need to always think to the site’s future.

Wordpress is one of the most popular tools because it is very adaptable. The amount of plugins (solutions to your problems) are endless. Not only does it have great features but it has a friendly UI backend. All of the advantages mentioned lower the development time, which helps the client to lower their costs. In short, Wordpress saves time and money! The most recent example is our very own website Mobomo.

Another resource for a CMS is Drupal. Drupal may be a little more difficult to develop with because it can handle bigger sites with much more data and a ton of users but this system is better for newspapers or government sites such as NASA. 

Each CMS will have their own advantages but our first priority is making it adaptable to the client’s needs.

• Read more about Simple Doesn't Always Mean Easy

Recently my friend and I were talking about different digital products and their functionality compared to their appearances. I was trying to make the argument that simple equaled easy, that an application with less complexities was easier to use compared to one that was very complex. My friend was rather quick to stop me in my tracks, he was making the case that that isn’t necessarily true, he started his argument by comparing two everyday products, a bicycle and a car.

A bike is extremely simple in its appearance, there are really only 4 components that make it up:
- Frame
- Handlebars
- Two tires
- Chain

That’s really the foundation for any bike, nothing less.

To contrast that though a car has hundreds of moving parts:
- Complex motor
- Exhaust system
- Electrical components
- And dozens of other parts that allow it to run

However when you compare the two to see which is easier to use, in this case let’s say that “using” it means movement; a car with all its complexities has a much lower learning curve than a bike. Really all you need to do to drive a car is sit down, press a pedal, and turn the wheel.

In comparison to riding a bike, an extremely simple system compared to that of a car, the learning curve is much steeper. Why? Mainly because it relies on the user to have an already working knowledge of how to use it…balance. Without learning how to balance yourself on a bicycle you won’t get any further than a few feet. Once you learn to balance than you need to pedal in order to keep the system going, otherwise everything comes to a stop. Lastly combined with balancing, and pedaling, you need to steer the bike, all in tandem with each other. All relying on you, the user, to make the whole thing work.

What does any of this have to do with digital products, websites, applications? In short what my friend was saying is don’t make an interface overly simplified and expect your users to know how to work with it. Sometimes an icon, with its simple form, is harder to “use” than a more complex interface. Just because it has less “parts” for it to work doesn't mean that it is easier for the user.

• Read more about CSS Architecture: A Recommended Strategy To Put Into Practice

Tired of being terrified that one CSS change will cause a ripple effect of bugs across your site? How about trying to make a simple change only to learn that the previous developer nested the styles five layers deep and slapped an !important on it? Learn how you can help bring sane and scalable CSS architecture to your projects and organization.

[pdfviewer width="100%" height="849px" beta="true/false"]https://mobomo.s3.amazonaws.com/uploads/2016/05/CSS-The-Specificity-Wars-1.pdf[/pdfviewer]

• Read more about Part 1: How To Create A New Website

Creating a new website isn’t always as simple as snapping your fingers. You can create a basic website that will give you basic results; however, there are many questions to answer if you hope to optimize its performance. In this series, we'll discuss how to create a new website.

As a project manager it is important that you are asking important questions before you start designing a website. It’s vital to ask questions around the client's goals, internal philosophy and how they envision their end product. Bottom line, you want to know as much about what their business and their end goals before you even start thinking about design.

Below are sample questions along with a few explanations that I ask a client before starting the project:

A website designed to appeal to 30-something professionals is going to be different than one aimed at young newlyweds or retirees. It’s important that you have a good grasp on who your client’s customers are. It affects not only the look and feel of the site, but may also affect usability and accessibility issues

Finding out a client's budget before the project begins is vital, what if their budget does not match what you designed? You have not only wasted time but money is the most important.

It is important to let the client know that a website or an application is a process and not only a project. Will be necessary to put significative budget for maintenance phase in order to keep the project constantly updated.

The project will be complete once it becomes live. Preparing a site for going live is a combination of choices made before the project starts. It is important to focus on tracking performance, using an according methodology and prioritize items.

It is a good practice to know what the client will want to do in the future with their site in order we can make allowances in the design and coding now. This practice allows us to think in advance to avoid a possible site rebuild from scratch.

This is important because you want a client to be able to track their success after the launch of the site.

These are just suggestions, but if your web development company did not ask you some of these questions, you should probably follow up to make sure they have the right vision for your company.