Curiosita Labs - Thoughts on programming, web development and design.

7 Favorite Web Development Tools

On May 30, 2014

Web developers use a variety of tools to build web sites and web applications. A typical project may require you to use a code editor, photo editor, online code or font generator and more. I have complied a list of 7 web development tools to help you solve specific problems.

Free Photo Archive

The current advice is to be choosy about when you use stock photos. If you choose to use stock photos and have a limited budget, use a free photo archive like Morgue File. With a photo editor like Photoshop, you can customize the photo to fit with your website.

Convert Pixels to Em

Not sure how to calculate the number of ems in pixels or vice versa. Use pxtoem to convert pixels to ems, points to pixels and even percentages. You can use the chart to find the answer you need or use the custom calculator.

Convert pixels to ems and more

Icon Fonts Generator

Fontello is an icon font generator. You can choose from available icon fonts like Font Awesome or create your own customize set of icons. Pick and choose the icons that your need to ensure a consistent look and feel on your website.

Generate icon fonts

Color

Picking a color palette for your website can be challenging. You may have any idea of some colors that you want to use. If you need inspiration, you can use a color palette tool like Adobe Kuler. Adobe Kuler allows you to create your own color palette or explore pre-made themes (color palettes).

When you work on a project, you may need to create a border or a gradient and you want to keep within the same color variation. 0to255 lets you pick a color and choose from the variations of that color. You can use it to simplify the process of choosing colors.

Font Generator

Need to choose fonts for your website? Awesome-fontstacks lets you mix and match your fonts. You use the wizard to walk you through selecting the fonts for your website. Once you have the fonts that you like, you can generate the CSS @fontface code. To use, download the fonts, save the fonts and CSS to your website.

Choose fonts for your website

Responsive Grid Generator

Grid layouts make designing your website easier. You may choose to build your own framework, use an existing grid framework or create one with a grid generator. Gridpak is a responsive grid generator. You tell it how many columns, the amount of column padding and gutter width. It generates the grid. You can view it right away to see how your choices would look. Once you like it, you can download the framework and apply it to your design.

With tools like these, you may speed up the process of building a website. Tools are to help make your work easier not harder. Not every project is the same. You need to select the tools that fit the job. This short lists gives you a few more tools to choose from.

What tools do you use when designing and developing your websites?

Related Article

Your own or a pre-built CSS Grid

Useful plug-ins from Milwaukee WordPress Meetup

By djbrensinger

On April 29, 2014

In Programming, Web Development

What is a WordPress HelpDesk session? Beginners and more experienced WordPressers come to share and help each other with WordPress questions. At the Milwaukee Meetup, we shared useful plug-ins that make managing a WordPress site and its security better.

Plugins for Managing Your WordPress site

How can your replace your media files easily? Enable Media Replace lets you quickly replace a file in your WordPress Media library. Without it, you have to find the file, delete it and re-upload the new file. With this plug-in, it is much easier to replace the file without the extra work.
With WordPress, you have three choices for an image gallery. You can use WordPress’s default gallery, build your own or use a plug-in. Our host, Bard Parbs, uses WordPress’s default gallery with custom CSS for his projects. He recommended EnivraGallery, a premium plug-in for people who want a responsive and easy to use WordPress gallery.
Metadata lets you describe your site that is readable and friendly to search engines. You can use Add Meta Tags to help the search engines to better categorize your website and increase the chances of the people who are looking for your site can find it.
Most websites need forms to gather information from their visitors. You can use Contact Form 7 or Gravity Forms. Contact Form 7 is simple and flexible. If you need more advanced forms, than Gravity Forms, a premium plug-in, lets you build them with ease. Depending on your needs either plug-in can help you get started with forms on your website.
Sometimes your website can be slow. WP3 Total Cache can help to improve the speed of your website and your visitors experience. You can also try WP Super Cache which provides your users with static html files instead of the WordPress PHP files. PHP files can take more time to load than html files. WP Super Cache shows your visitors the cached or original page depending on the visitor to help make their experience better.

Security Plugins

We had a question on how to secure your WordPress website. Brad mentioned that the WordPress Codex has an article explaining how to harden or secure your WordPress site. He talked about 3 additional plug-ins that people can use:

Brute Protect protects your WordPress site against brute force attacks. After too many failed login attempts on your site, BruteProtect saves the IP and blocks it from your site and others who use this plug-in.
Do you have clients who are terrible with remembering or using strong passwords? Clef is the alternative log in that you need. It uses two-factor authentication to enable you to log into your WordPress website. No passwords are needed.
WordPress like other websites needs both security and backups. Backups help you to recreate your website if your site gets damaged by viruses, malware or something you did. VaultPress provides both security and backups for your WordPress. This is a premium service. They have different plans and pricing to match your needs.

Brad also suggested Securi. Securi is a complete Website Security service. They check your website, monitor it and provide removal of malicious code. Securi has plans for people with one website to multiples.

When you setup your WordPress site, remember to follow the recommendations on securing your site. Be choosy about the plug-ins you add to your WordPress website. Not all plug-ins will fit your website’s needs. Sometimes, you’ll want to pay for additional features that a premium plug-in will provide. Do you have any plug-ins to add?

Your own or a pre-built CSS Grid

By admin

On March 31, 2014

In CSS, Design, Programming

Bootstrap is a popular design CSS grid framework. A CSS grid framework consists of a specific number of columns and rows. You can quickly define different layouts using a grid framework. It helps you to quickly build the layout of your web application.

What if you want something really simple? You just want a simple grid and create the rest of the design yourself. Do you choose a pre-made CSS Grid framework or build your own? It depends on your preferences and project needs. If you need to complete your project quickly, choose a pre-made framework. If not, you may choose to build your own to use in later projects.

Simple and Responsive Grid Frameworks

Try out one of the following simple and responsive pre-made grid frameworks:

Toast – Simple CSS Grid

If these don’t work for you, a quick Google search provides you with more options to try.

Build your own framework

Why build your own framework? Most developers like working with code that they understand and have control over. With a pre-made framework, you have to deal with the choices that the developer made to get their framework working. You may not have the time or patience to attempt to fit another’s framework to your project.
To build your own framework, you need to:

Determine how many columns 9, 12 or 16? The standard number of columns is 12. 12 makes it simple.
Sketch out a design.
Create the structure for the grid framework. You don’t have to make it complicated. The best grids are simple.
Test out the HTML and CSS for the grid framework.
Make it flexible and responsive. You want your grid to work with your future projects: mobile and beyond.

Building your own framework doesn’t have to be an overwhelming challenge. Check out how Joe Richardson built a responsive grid system.

Are you going to build your own?

4 Tips for Improving Your Web Design

By djbrensinger

On February 25, 2014

In Design, Web Development

Design is problem solving. Whether you are creating an app or a website, you need to focus on solving a problem, not just making it look pretty. When you design, you need to make an impression, create something usable, solve the right problems and improve when your design has flaws.

Good design begins with honesty, asks tough questions, comes from collaboration and from trusting your intuition. Freeman Thomas

— SpyreStudios (@SpyreStudios) November 21, 2013

The following tips can help you improve how you design.

Make an Impression

You have 3-5 seconds to make an impression. If you don’t, your website visitors will leave. You have to make design decisions that convince your visitor to stay. Designing for the 3 Second Rule gives your 5 tips that you can do to make certain that your design will have impact.

Design for Activities, Not Users

Most people go to a website to do something: read, watch a video, or post pictures. You need to consider what they plan to do on your site. When you focus your design on a person or group of people, you can create a web site or app that has too many features. By focusing on activities instead of users, you can build a better website. In Stop Designing for “Users”, Mike Long explains why designing for activities is a better for your design.

Apply App Design to Website Design

Can you use app design to create better websites? App design can provide a source of inspiration and guide for solving certain problems. Kayla Knight explores how you can apply app design concepts to website design. She talks about planning layouts, focus on the user’s reason for coming to the site, solving problems first and making it pretty second.

Test for Usability to Improve Your Design

When you develop an app, some features are easier to use than others. You don’t always get it right with your design. Testing helps you to identify the flaws in your design. Joshua Gross explains How Usability Testing Drastically Improved My Client’s App.

When you create an app or a website, you are solving a problem. You want to be able to impress your visitors to use your app or stay on your website longer. Use app techniques like focusing on activities, instead of a group of users. People come to websites because it answers a question, invites them to play a game or chat with their friends. Test your app. Testing helps you to see how the app or website works when your visitor uses it. By testing, you may see ways to improve the experience for your visitors.

Design requires that you make choices. Those choices affect how a website looks and works. Use these techniques to help you make better design decisions. Do you have any additional suggestions for improving your web design?

Pretty Does Not Equal Design

Web Design and Personal Responsibility

By admin

On January 25, 2014

In Design, Web Development

At Webstock 2013, web designer, Mike Monteiro, gave an inspiring talk called “How web designers destroyed the world”. His talk focused on design and personal responsibility. Designers and developers create new things every day. Mike wants you to realize that what you create has an impact on the world around you. A simple change could affect the lives of your users. Don’t just add features because the client wants it. Look at how the change will impact all of your customers.

Design is about solving problems not making things pretty. Mike want designers and developers to focus on solving real problems. Not just creating another me-too app. He showed a screen filled with camera apps. Do we really need more of them?

If you want to do more than build me-too apps, watch the video.

Webstock ’13: Mike Monteiro – How Designers Destroyed the World from Webstock on Vimeo.