Friday Favorites: 1/29/2016

Most Interesting Article I Read This Week

Tips for Designers Who Don’t Code by SpeckyBoy.

screen shot - from SpeckyBoy
Not a lecture, just good advice

This is not a lecture article. The advice in this article is really good. For example, everything in your design should start with the content. And this means your mockups, not just the final design. How will your beautiful layout look if the title is more than three words long? What if the ads in the sidebar extend below the length of the main content–will you be okay with a big blank spot in the middle of your design? What if the people choosing the images don’t choose image in the correct aspect ratio–will your landscape-focused design look good with portrait images? or square? What if they attempt to crop the offending image, and it’s even worse than if they’d just left it alone?

Design is great, but when it meets the real world it can be challenging, and if you don’t code it can just be frustrating. But this article might help at least a little.

Quote of the Week

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs

This is something to bear in mind whether you code or you don’t code. If your web page or application doesn’t work for the audience it’s targeting then it’s poorly designed, no matter how pretty it might be.

Questions about web editors

When I started asking questions about web editors, I started thinking there might be something better than what I was using. There are so many web editors out there, it is hard to choose which one to use. Most designers I know find an editor that suits their needs and stick with it. And this is definitely an easy solution. After all, if it’s meeting your needs, why would you need a new one? I was using Dreamweaver, and it met my needs.

Dreamweaver has a lot of great features, it includes a decent code editor, has some RWD features, it includes preliminary testing for mobile devices, and integrates fairly well with Photoshop. But one thing I noticed year over year was that even though new versions of Dreamweaver were coming out every year, they all seemed the same. Sure, I didn’t want the interface to change too dramatically, I was used to it. But couldn’t they at least add in some new features like advanced CSS properties or better visual design? I wouldn’t have been so bothered by it except that Adobe was also releasing products like Adobe Muse (a visual web editor with no easy HTML support, but very easy to use WYSIWYG) and the Edge products (Edge Reflow for RWD, Edge Code for HTML,  Edge Animate for web and CSS animations, and Edge Inspect for previewing on mobile devices). These products offered a lot of the features I was looking for in Dreamweaver. But why weren’t they being included in Dreamweaver?

Once I started asking questions I couldn’t stop. I started looking at other editors. It was terrible, I felt like I was cheating on Dreamweaver, but I couldn’t help it. The more editors I tried, the more I realized that there were features in web editors that I didn’t know I was missing. And once I saw them, I missed them. Thus I moved to Coda and Pinegrow.

Coda Creating a New Site
Panic Coda–Creating a New Site

What Questions About Web Editors Do You Have?

What web editor do you use? Why do you like it? What would you change about it? Have you considered trying another editor? Most editors out there offer some type of free trial, so you can check out some new editors and perhaps be surprised by the features you didn’t know you were missing.

Two Important Web Editor Features

Web editors offer features that you can’t get from a text editor. But often the one web editor feature people look for is the price–free. I’ve been trying out web editors for nearly twenty years, and while I have one web editor that I still use that’s free, most of the ones that I really like I’ve spent some money on. And over 20 years, spending $50 or $100 on an editor seems like a good investment. There are other web editor features that I look for instead of just price.

One of the best things about doing web design is that you don’t need any special software to do it. The tools you need are either already on the web or you can use an editor that comes with your operating system. So they are free. In fact, many people write all their web pages in Notepad. When I’m in a hurry I’ve been known to just open up vi (a Unix text editor) and slap out some quick HTML tags myself.

Most of the time, when I’m doing work on web design I like to use a web page editor. My current favorite is Coda because it integrates easily with Git and lets me preview in any of the browsers I have without a lot of effort. I use this editor almost every day.

Web editor feature
There are many possible web editor features

I should say that I have been building web pages since 1995, and I can often write a complex CSS property faster by just typing it out than by using a visual or WYSIWYG editor. But that’s not true for everyone. Some of the other editors I use include:

  • Komodo Edit–a free text editor for Windows, Macintosh, and Linux that is based off the much more powerful Komodo IDE. But although I still like this editor, I use Coda more and more often instead.
  • Macaw–one of the first responsive web page editors I ever used. It’s a visual editor and made it fun to fiddle with my designs.
  • Pinegrow–another visual editor, this one also has the feature of including WordPress template editing.
  • Dreamweaver–I’ve used Dreamweaver since the 90s, and it’s changed a lot over the years. Now, of course it’s owned by Adobe.

I’ve used dozens of other editors, but those are the ones I come back to day after day. I was thinking about what makes these editors my go-to tools for web design and development, and I came up with these two features that I use all the time.

Most Important Feature: HTML

This might seem like an obvious feature, but a lot of web editors out there, especially the WYSIWYG ones seem determined to make it nearly impossible to view and edit the HTML. That drives me crazy. Sure, if it really is what-you-see-is-what-you-get then it shouldn’t matter, but the fact is that CSS and HTML still aren’t so consistent that you can guarantee a page will look the same no matter where you view it. Sometimes you need to go tweak the HTML or the CSS or both.

My favorite editor, Coda, is an HTML text editor first and foremost. It has syntax modes for many different languages including things like JavaScript, Python, PHP, Perl, CSS, and many more. And when it comes down to it, these languages are all written in text editors, so the difference is how they are displayed (color coding, indenting, etc.).

But visual editors need to have access to the HTML as well. And the best ones do. Macaw and Pinegrow each allow you to edit the HTML with separate windows. Generally you edit the HTML in blocks, rather than the entire document itself, but you still have access to it. Dreamweaver has a code editing mode that you can switch between.

Do you think HTML editing is important in a web page editor? Or do you rely on the visual editor 100%?

Previewing is an Important Feature, Too

If you’re like me and you prefer a text or code editor, having a good preview is important as well. But even if you use WYSIWYG you should be able to preview in different browsers and possibly even mobile device emulations. Previewing is a web editor feature that is often overlooked in favor of more of the bells and whistles because it seems like an obvious feature.

But with responsive web design and the need to develop sites that work on many device widths, sizes, and capabilities, being able to preview what you’re doing quickly and without a lot of fuss is critical.

I like Coda because I can hit the preview button and it will show me my pages, including PHP and other dynamic designs, right in a webkit browser in the editor. I can resize the preview pane and see how it responds once I’ve added RWD features. Then when I’m confident it will work in that browser, I can open my page in any web browser I have on my computer.

Dreamweaver offers a connection to mobile devices through the Creative Cloud. All you do is click on the preview icon and it will give you a QR code you can scan and view on any device. You can also send the URL to other people to have them preview your designs. This is a great quick collaboration method. And this is in addition to the built-in preview modes to do edits in a page sized for an iPhone 4 or a Google Nexus 10 or any other size you want to define.

Do You Agree? Are These Important Web Editor Features?

Do you have a feature you can’t live without? It can be something as simple as color coding or something fancy like RWD-builders. What makes an editor something you can’t live without?

Friday Favorites and Features: 1/22/2016

Two New Articles Featured

This week two of my articles on web design were featured on InformIT:

I hope they are useful to you.

Most Interesting Article I Read This Week

Learn to Code HTML and CSS Website
Learn to Code HTML and CSS in 12 Lessons online.

Shae Howe’s book Learn to Code HTML and CSS (Buy on Amazon.com) is a really nice looking introductory book on HTML and CSS. And he’s also got a free online course you can take to learn HTML and CSS that is just as beautiful. Learn to Code HTML and CSS in 12 lessons.

Product or Service I’m Considering

Firefox Developers Edition
A browser specifically for developers

This Monday I was recording some videos on Firebug, and so I had to open Firefox to install it. I haven’t used Firefox in a long time because Chrome has been working well for me. But it seems like Firefox is going to suck me back in. I learned of a new Firefox fork called the Firefox Developers Edition. This is an interesting version of Firefox that puts tools useful to developers front and center.

h/t Noupe

Quote of the Week

The enemy of art is the absence of limitations.
–Orson Welles

So the next time you find yourself complaining about the drawbacks to a certain browser or how annoying it is to have to design for tiny screens consider that without those limitations you can’t create art. And creating something beautiful, something that is art, is a noble goal for any website.

What is the most important web hosting feature?

When I was working on Monday’s article I was planning on writing about the web hosting features I thought were the most important to look for in web hosting. But really, price is the one that we all care about, and the article wanted to be about that, so…

But that doesn’t mean there aren’t other web hosting features you should consider. Things like:

  • Space – a lot of web hosting providers offer unlimited space, but some don’t.
  • Bandwidth – like space, many web hosts offer unlimited bandwidth, but some don’t.
  • Support – I like sites that have good support, even if I rarely use it.
    • Email support – my preferred method
    • Followed by chat
    • And finally phone support
  • Up-time – I find up-time promises to be a little silly, as most of the time hosts are either up reliably or they are not.
  • Software and services – Personally, I use a VPN and control the software that’s installed on the server myself. But if you aren’t a huge tech geek like me, it can be nice to have a service that offers decent software packages already included.
  • What else?

What web hosting features do you find valuable? Participate in the poll and post your comments below.

What is the most important web hosting feature besides price?

View Results

Loading ... Loading ...

The Price of Web Hosting

I have determined that there are two types of people in this world: the people who care about how much things cost and the people who claim they don’t. Whether we like it or not, price is a factor in how useful a hosting provider is going to be to you and your website. It doesn’t matter if your hosting provider offers every bell and whistle under the sun if your business can’t afford to pay for it. On the other hand, just because a hosting provider is free doesn’t mean that it’s the best choice.

Many people are inclined to go immediately for the free and low-cost web hosting providers simply because they are just that—free. But there are drawbacks to free and low cost hosting providers that might not be apparent immediately.

Who Controls the Ads,  You or Your Hosting Provider?

coffee vintage ad
Coffee mmmmmmmm

Most free web hosting providers put ads on your website that you don’t control. Not only will you not earn money from those ads, those ads might not fit the tone or goals of your site.

I spend a lot of time thinking about what ads I want to host, where to put them, and if I should keep them. Some of my sites deliberately have no advertising at all (or very very little). But if I’m on a free hosting service they might decide to fill up my screen with pop-ups and interstitials and those really annoying double-underlined text ads, and there is nothing I could do about it. In fact, one of the reasons I’m glad I’ve left About.com is because their advertising policy has gotten insane. It’s nearly impossible to find content on their site anymore because there are so many ads.

Free Web Hosting Might Cost You Money

Many free web hosting providers do not allow you to place your own ads on your site. They are typically concerned that your advertisements will compete with their ads, and they want that revenue, since you aren’t paying them.

But if you can’t put ads on your site, then you won’t be getting any money from those ads. This is what my MBA teachers would call “opportunity costs.” I have the opportunity to make some money from my website, but since I’m using a hosting company that disallows ads, that money is lost.

Hosting Providers Can Cap Usage

Most free and cheap web hosting providers have usage caps. They limit the space you have available to your site, the bandwidth that you can use to deliver the site, sometimes even the number of files you can post on your site. The really unscrupulous providers will add on extremely high fees that come into play when your site goes over a cap. You won’t get a warning, just a bill for the services. This can cost you in the opportunity to provide more content to your customers, but also in the very real money that you have to pay the hosting provider when they charge you for going over your cap.

The Price of Web Hosting Isn’t Always What It Seems

money
Money to buy coffee

Many inexpensive web hosting providers will heavily advertise a price that seems really good, but has onerous requirements. For example, you might get a $2 a month price if you sign up for five years of hosting (so you have to pay $120 up front). Then if you cancel before the term is up, some hosting providers simply keep the money while others block website transfers. One web hosting company charged a very low monthly fee, but the fine print on the contract allowed them to set up a recurring charge of much more than that after the first three months. I heard one claim that the only way to cancel was to cancel the credit card.

Paying a small fee might sound like a good idea when you’re first starting out, but if you are forced to stay there, you might end up paying more money just to get out.

Once you have signed up for cheap web hosting, some providers will then hold your website hostage. One well-known web hosting provider makes it very difficult to move a site away from them once you’re there. They lock your domain name for six months of the year and has even been reported to have removed access to the website files if they think you might be considering leaving. Most people don’t realize this can happen because the hostage situation only becomes apparent when you try to leave.  It’s like “Hotel California” web hosting style–You can check out, but you can never leave.

Always Read the Contract

Be sure to do your homework and find a hosting provider that really does provide what they say. Look for loopholes in the contract–are you stuck for 90 days or can you cancel immediately? Do you have to buy something else (like a domain name or web design services) to get the great price? Also remember that web hosting is often something that other service providers will try to tack on as an “extra” service. Some web design firms will redesign your website and move it to their hosting service. This can leave you with a monthly bill on two web hosting providers even though you only need one.

David Bowie RIP

Most Interesting Article I Read This Week

I grew up in the 70s and David Bowie was a huge part of it. So I was very sad when I learned of his death on Monday morning. Like many of my friends I spent most of Monday and portions of Tuesday (and let’s be honest, Wednesday, Thursday, and yes, today…) watching videos of Bowie singing a-capella with Freddie Mercury and crying as I listen to Blackstar. But one of the articles I found most interesting was one on the BBC: David Bowie: The internet pioneer. I remember Bowienet, although I was not a member. I remember when he released “Telling Lies” as a downloadable single. But I didn’t realize how much he was involved in the early Internet. He was a man ahead of his time. David Bowie—RIP

He will be missed.

Quote of the Week

“It’s only forever, not long at all.”

—Jareth (David Bowie) in Labyrinth

Do you design all your own sites?

This is a tough question for me as I feel like I should design all my sites myself. But when I’m honest I recognize that there are tons of people out there who are much more talented than I am at design. And they put out their designs as WordPress themes and templates that make it easy to pay them some money and use their design. But I have trouble just using someone else’s work, even when I’ve paid for it. So I tend to modify most designs that I get at least a little bit.

The other part of this question is what constitutes “design?” In other words, if I use the a WordPress template, but I change the background color to my own custom one, I change the header image to another custom image (or images), and I add my own iconography and fonts, haven’t I done some design on that theme? For example, Meridian Stories (a site I did not design, but I do work on and I think looks great) uses a theme called Ethic that has been modified with a child theme to reflect specific design decisions of the Meridian site. Is that design? While my site Enjoy SciFi uses the Twenty Eleven theme with just a few modifications (colors and photos). I would never claim that I designed the Twenty Eleven theme, but I did decide on the colors and images to be used to represent that site. Did I design it?

Do You Design Your Sites?

Do you design your own sites?

View Results

Loading ... Loading ...

I don’t believe there is anything wrong with whatever you choose to do. Some of the sites I maintain I designed 100% myself, from the CMS to the CSS and everything between. Others I grabbed a template to be done quickly. I’ve hired designers to do some designs for me as well. And in each case I’ve been happy with the results.

What do you think? Is it important for you to design every aspect of your site? Or do you prefer to work on other things like the content or the programming? Let’s chat in the comments.

New Freebies Available to Learn Web Design

It’s already 2016 and I’m hard at work on my latest project to help you learn Cool CSS. But while that book isn’t out yet, you can check out some of my work in the form of free chapters and free videos.

Free Responsive Web Design and Bootstrap Chapters

If you were wondering about mobile design, I have a free chapter from the book HTML5 and CSS3 Web Publishing in One Hour a Day full of tips and tricks for doing mobile design. Get it as a PDF here.

And if you’re interested in learning RWD you can learn the HTML you need to know in this free chapter from my book Teach Yourself Responsive Web Design.

You can get started quickly with Bootstrap with the free chapter: Build Your First Bootstrap Website with the Basic Template from my book Teach Yourself Bootstrap.

Free Videos

I also released a video course last year: Learning HTML and CSS LiveLessons, and there are two free videos available on InformIT to help you get started learning HTML and CSS.

5 Things You Need to Design a Website

It’s very easy to design a website these days. I’m really almost jealous of people coming into it now as all the annoying things that I had to learn to work around finally just work now. I can spend time on cool CSS rather than focusing on whether my images will even display in the browser (or display where I want them).

But if you’re just getting started with building web pages, it can still be really overwhelming. There are a few things you need to get started, but don’t worry, it’s not as hard as you might think!

To Design a Website First You Need a Computer

You need a computer
A laptop is nice but not required

This may seem obvious, but it is very difficult to build a web page without a computer. But the computer you use doesn’t have to be fancy. There are people out there who have built entire web empires on public computers (like at your local library). If you have access to a computer that can access the Internet, then you can build a web page.

There aren’t any hardware specifications that you must have. Your computer can be ten years old or the newest thing out there. You can build your own computer or you can create web pages on a tablet or smartphone. You could probably build them on a feature phone, but that would be pretty difficult, so I’d head to the library if that’s all you have.

Once you have the computer or other device you’re going to build your site on, you then need:

You Need a Hosting Provider

Hosting
You don’t need a domain name, but most sites eventually want one

There are so many options available for web hosting these days that you may feel paralyzed in choosing. If this is the first website you’ve ever designed, then I recommend you start with a hosting company that acts as a web page builder as well. Some of the best ones out there right now include:

Weebly

Weebly makes it easy to create a really nice looking website, blog or online store. They have a lot of styles and themes to choose from to create exactly the site you need. Plus they will help you set up a domain if you want one and they have great stats to watch your site grow.

Wix

Wix has a lot of categories and styles to choose from and like Weebly it offers some really nice templates and themes so your site will look professionally designed right out of the box. Wix has a lot more templates than Weebly, but they both offer equally nice looking themes. The biggest drawback to Wix is that it can be difficult to move a site from there once it’s been built on Wix. But if you like what you have, this shouldn’t matter.

Squarespace

Many of the small business owners I know who are considering designing a website are considering Squarespace. They offer lots of themes and styles to get exactly the site you want. Plus they have a lot of responsive website themes, which are lacking on some other builders. They also have great SEO features.

If you are looking for a more advanced hosting system, you won’t go wrong with BlueHost. They offer a lot of programs and systems, but you have to do a bit more work to build your site than on the site builder hosting companies listed above. Personally, I use Linode co-location. I’ve been building and maintaining websites since 1995, and they offer me the services and security that I look for in a web hosting provider.

You Should Have a Text Editor

Typewriter
A typewriter might be a little bit old school.

If you go with a site builder like Weebly, Wix, or Squarespace, you might not even need this, but I like to have copies of my web pages on my local computer. Keep in mind that you don’t need a fancy web editor to build your site in a web builder or in WordPress. A text editor like IA Writer or Notepad++ can give you a place to write and edit your content before you paste it onto the site. And you can use your site builder to add images.

Speaking of images…

Don’t Forget an Image Repository

image editing
All the images on this page were found on Pixabay.

Note, I don’t mean you need an image editor. In fact, most of us, myself included, are probably not graphic designers or professional photographers, and we would do better just sticking with graphics from a reputable source than trying to create and edit our own.

Remember: just because an image is on the web does not mean that you can use it on your web pages!

Instead of risking nastygrams and worse from photographers and graphic artists because you used an image you found in Google images, go to a site like Pixabay and be confident that your images are free for commercial use. I use Pixabay for nearly all the sites I maintain, and they have a huge selection of really nice looking photos and illustrations.

Most Important: You Need Your Creative Imagination

imagination
This is probably the most important part

Once you have the first four things, you’re ready to get your site up and running. Head over to Weebly and pick out your template. Write your first couple of pages in Notepad++ and then post them to your site with images you found at Pixabay. And then keep going.

Designing and building web pages is fun!