Miscellaneous

Miscellaneous

Milwaukee WordCamp 2013

Posted on by djbrensinger

The second Milwaukee WordCamp was held on June 7-9, 2013. WordPress developers, users, business owners and fans gathered to share and learn more about their favorite website building platform. There were sessions for developers, designers, business development and more. Talks included WordPress is a CMS, dammit!, Scoping Projects and Stop giving s** away for free and start feeding your family.

WordPress Milwaukee Bandana

WordPress is a CMS, dammit!

A CMS (Content Management System) allows users to manage content on a website. Many CMSes include a blog feature. You can choose to use the blog feature or not. You can use WordPress to handle any type of content that you want. People have built stores, blogs, customer management systems and membership websites. Aaron Holbrook demonstrates why WordPress is more than a blogging engine.

Scoping Projects

What is scoping? Scoping is the process of gathering information to define what has to be done and leaving up to those expectations. Everyone involved (you, your clients, your staff, etc) must understand what is expected of them and what they need to do. As a developer, you have to take charge of defining the scope of the project. By setting expectations and documenting project requirements, you help everyone understand what the project involves. Lisa Sabin-Wilson explains why you want to scope your projects: website or plugin development – so you can determine the best approach for your clients needs.

Stop giving s** away for free and start feeding your family

Heather Acton shares how you can move past “side jobs” and build a real business in web development that pays your bills. When you first start a business, you may do a few projects to get experience. Do too many free jobs and you starve. You need to give the right things away: talks at community events, answer questions in forums and do non-profit workshops. Otherwise, focus on jobs that pay and build your business.

Special Treat: A Bacon Bar

For an extra special treat, we had a bacon bar. Everyone took photos of the bacon bar. Here’s mine:

WordCamp Milwaukee 2013 Bacon Bar

Bakin’ with a CMS

Posted on by djbrensinger

How do you learn a new content management system? You build a website with it. A sample website works best because you can delete it if you don’t like the results or even the CMS. I used the Smells Like Bakin’ tutorial from Treehouse and a CMS called Umbraco. Treehouse uses Smells Like Bakin’ to teach how to build a simple website. Umbraco is an open source ASP.Net CMS.

Smells Like Bakin in Umbraco CMS

Building the website

  1. Download and install Umbraco.
    I followed the manual install instructions. Umbraco lets you use an installer. I choose to do it manually, so I could learn what the install process is. The manual process was quick and easy to follow.
  2. Download and install the files for Smells Like Bakin.
    Instead of following the tutorial, I found a copy of the site on github.
  3. Install a starter kit in Umbraco.
    Umbraco lets you install it without a starter kit. Without a starter kit, you need to create your own document types and templates. To save time, it is easier to install a starter kit. Umbraco has several to choose from. I chose the HTML5 Boilerplate. It creates a simple website based on HTML5 Boilerplate.
  4. Modify the templates.
    HTML5 Boilerplate starter kit comes with 3 templates: a master page, a home page and a generic page. Using the Smells Like Bakin’ github download, I started to modified the templates. Umbraco uses master pages. The master page template is used by the home page and generic page template. I added the header, navigation and footer to the master page.
  5. Modify the CSS.
    You can add and modify CSS inside Umbraco. It let you create additional styles that can be used in the CMS editor. These styles makes it easy for a content editor to use them without any knowledge of CSS. For this test, I added the existing styles from my example and then made a few adjustments to it.
  6. Create the Home Page.
    I used the home page template to create the Home page. Then, I added the content and images to the page.
  7. Create an additional page.
    My example of the Smells Like Bakin’ had only one web page. I created an additional page to test the generic page template in Umbraco.

Lessons Learned

  • When installing Umbraco, select and install a starter kit. A starter kit makes your life easier. The type of starter kit depends on what you want to do with the site. Before installing Umbraco, identify the starter kit that fits your needs.
  • Using a Grid 12 system, it made building the website quicker than developing your own. The HTML gitHub example used a Grid 12 system.
  • Umbraco lets you store images inside the database or externally in a file folder as part of the website. Before you build the site, you want to determine which images are added to the database.

With Umbraco, you have to have an idea of what you want to do with it before you start. Umbraco offers the flexibility of page templates, packages(plugins) and XSLT macros. It provides greater control over design and code/markup. As a CMS, it isn’t the type where you can install and be up and running in 5 minutes. If you want that, you are going to need a different CMS.

Related Article

If you need a different CMS, check out CMS Showdown at Web414 Meetup.

6 Web and Mobile Application Inspirations

Posted on by djbrensinger

How do you decide to try a web or mobile application? One way is to look at their website. When considering an app, I look at their website for screenshots, a video tour and information on how the app works. An app website with these elements can help me decide whether or not to try this app. I have complied a list of 6 web and mobile app websites that contain these elements.

Freckle

Freckle is an online web application that lets you track your time. The site opens with an introduction to Freckle. It has a banner image that contains screenshots of the application. This image gives you a quick overview of what you will get when you use this app. If you want to take a tour of the app, they provide you with three different links to the video tour. The color scheme complements the content and helps guide you to the information that you need.

Freckle

InnovaStudio LiveEditor

InnovaStudio LiveEditor is an web-based HTML editor that you can include in your CMS and web applications. Their website uses an image rotator to show why you will like this app. If you want to see the app, you can choose to try out a live demo or a video demo. The bottom of the page includes screenshots of the app. They use a minimal design which helps you focus on the app and not figuring out how to use the site.

InnovaStudio LiveEditor

Blinksale

Blinksale is an online invoicing web application. Their website has a screenshot that shows the application and lists what you get when you use this app. Instead of a video tour, they use FAQs and Testimonials to help you decide if this app is right for you. The color scheme helps you to focus on the different sections of the page.

Blinksale

Bluenote

Bluenote is an app that allows you to store notes, passwords and tasks in one app. Their website rotates through the screenshots of the app in two different sections of the page. It also includes rotating testimonials from people who have used the app. Bluenote uses a blue color scheme on the website and app. The contrasting blues and white text make the site easy to read and organize the page.

Bluenote

FieldNotes

FieldNotes is mobile app that allows you to take notes while on the go. You can take photos and record voice notes, video and your location. FieldNotes uses a black, white, gray and blue color palette. They use two different colored backgrounds to help you focus on the purpose of each section; top is for showing the app and the bottom is for describing it in detail. FieldNotes rotates screenshots of the app inside an iPhone. They provide reviews, a demo video and FAQs. FieldNotes provides you with enough information to help you decide whether or not you want to try the app.

FieldNotes

Air Display

Air Display is an app that can turn your iOS device into a a second display. It does this by installing the app on your iOS device and drivers on your computer. The website uses a black, white, and gray color palette. On the Air Display page, they use the color red to make the buy button stand out. The main focus of the site is to rotate through screenshots of the app on a monitor and iOS device. Below the app demo and buy button is the section that describes what you can do with Air Display and lists some uses and driver plus app compatibility.

Air Display

Pretty Does Not Equal Design

Posted on by djbrensinger

Art PencilsNotes from the Milwaukee WordPress Meetup “Stop Making Things Pretty and Start Designing”.

Design is more than themes, graphics, fonts or the look and feel of a website. The most beautiful sites aren’t the most successful. People come to your website to solve a problem, get a task done or to learn something new.

Things don’t need to be attractive to solve a problem. Michelle Schulp

Websites like Google and Craigslist have very simple designs. Most people wouldn’t call them beautiful. These sites focus on helping you get a task done instead of looking pretty.

Design is a technique that you can use to solve problems. It can help you to build a website or an app that your visitors will want to use.

Start Designing

Design is fundamental. It helps you to focus your attention on the details and see how everything fits into the final product.

Be deliberate! Everything on a website or web application should have a purpose. The most important question to ask when designing is Why. When you ask why, you can get to the reason for a font, color or photo on a website. You can then determine whether or not it really helps your visitors or just makes the site pretty. Design adds value.

Design is a process. Your job is to help your client and yourself remember that the design is not for you; it is for your customers. To help you do this, use tools like a mood board, style tiles and style guides. They help you to focus on choosing the colors, patterns, fonts and logos before you create a prototype. Gray screen prototypes can help to focus on how the site works before adding colors and fonts.

Related Article

Build a Better Website

Posted on by djbrensinger

Computer CodingYou’ve built your website. The site gets enough traffic, but you want it to do better. What things can you do to build a better website? Speed, images, navigation and forms can help or hinder how your audience works with your website.

Does your site load fast?

Check your site for speed issues. A slow loading website with make people leave your site if it takes too long. Two of the simplest checks are image sizes and the location of JavaScript in your web page.

Images with large file sizes take longer to download than smaller sized files. You can use PhotoShop or another photo editor to shrink down the size. If that doesn’t work, consider using Smush.it to remove unnecessary bytes from image files.

JavaScript’s location in your web page has an impact on the speed of the site. You need to determine if a specific script need to be in the head tag or placed before the end body tag. When a web page loads, it stops loading the page when it sees a JavaScript. It processes the JavaScript before continuing to load the rest of the page. If you have several JavaScripts, it has to process each one. To improve speed, you need to move the scripts that don’t impact the page immediately to the bottom of your page.

Do you have images that work?

Too many, not enough or even the wrong type of images can turn off visitors. You want the images that you use to help your visitors to decide to stay on your site and to do something. Whether that is sharing your article, buying a product or signing up for your newsletter. To help use images to make your site more usable, 1st Web Designer has some tips on how to use images effectively.

Can your visitors find what they want?

Your navigation menu is an important tool to help your users find what they are looking for. If your visitors have to use two or three clicks to find anything, you need to reconsider how you have organized your site. To create effective navigation, you need to use words that your visitors will understand. Standards like About Us, Home, Contact Us, Products and Services help people to navigate your site. You may want to add features like a sitemap or additional navigation at the bottom of each page. Your design can help visitors too. By being consistent with colors, word choices and images, these design choices can help your visitors interact with your site.

Are your forms easy to use?

Forms that look like a tax form is going to make your visitors leave. You want to build forms that are easy to use, guide the visitor and quick to fill out. If you need ideas on how to build a better form, get inspiration from these 5 Web Form Designs.

By looking at speed, navigation, images and more, you can improve the overall experience for your visitors.