Categories
Opinion Tech

My thoughts on Squarespace (and other site builders)

Some Squarespace ads have rubbed me the wrong way. Honestly, its a little because it seems to threaten my business, but mostly because the ad-readers write off Web Design altogether (sometimes more subtle than others).I was reminded of this after I read Chris Enns’ post on Paying for Web Design vs Squarespace and it struck a cord with me. After Chris listened to the latest The Talk Show:

Some­thing about the way John Gru­ber & Marco Arment mocked pay­ing money for web design dur­ing a Square­space ad on The Talk Show seemed off. You can lis­ten here at the 1:14 mark.

But after thinking about this for some time, I think these platforms are a good thing not a bad thing for our industry. We need to understand where these tools excel and lack.

Where they excel

There are legitimate reasons to use site builders like Squarespace. They are great tools for companies that have smaller budgets or companies that are just starting up. For companies that can’t afford a custom website, this is a great way to get a web esenseesense.

Where they don’t

Squarespace may give you a design quickly, but there is a ceiling to it. Areas like user experience, content optimization and other things are things that we still have the expertise in and any automated system will not address all of these. Squarespace won’t stop a user from writing a 3000 word “About Us” page, or create a 20 page slider (or any slider for that matter). This is where we come in.

How we can embrace them

Whenever I am having a conversation with a potential client, and a tool like this (or even a WordPress template) is brought up as something they are using, this is how I usually respond (and I swear it doesn’t sound as condescending as this reads):

That is awesome you got a website stood up on your own! Those tools work really well for getting a site up and running. Having a web presence in the vital for your business. Let me know if you want a second set of eyes on it.

If/when this person grows out of this website, or finds they don’t have time to work on their website, you might be the first person they call to take their web presence to the next level. And with a client that has an existing website that is pretty well put together, it makes the next iteration that much easier to build.

Getting back to the ads

I think we can’t be polarizing when forming opinions about site builders. Web Designers can’t write them off entirely as tools that create subpar websites. Ad readers shouldn’t sell them as the silver bullet of web design (Remember who is writing the check for those ads). I appreciate Chris Coyier’s reads when Squarespace was sponsoring ShopTalk. To paraphrase, he thinks these are great for smaller companies that wouldn’t normally pay for your services, but still want a web presence.

Even though these tools seem to threaten our business, that’s ok. It forces us to be better at what we do. It forces us to create better user experiences and design better websites. I just ask podcast ad-readers to not write off Web Design completely.

Categories
Opinion

Design Facelift

It’s been many years since I have redesigned this website. As I’m spending most of my time building up Hoverboard these days, I couldn’t do a complete redesign, but I did give it a bit of a facelift yesterday. I’m not happy about how the vertical rhythm is currently, but the type is bigger, no more widgets taking up real estate in the side column, and simplified the banner a bit.

In the near future, I hope to do a ground up redesign, but for now, this will have to do.

Categories
Opinion Tech

A Web Designer’s take iOS and iPhone 6

I’ve read countless reviews of iOS 8 and the new iPhone 6’s, but most, if not all are targeting generic end users. So I’d like to take a look at these new iOS offerings from Web Designer’s perspective.

If you’d like a more technical breakdown of the changes in iOS 8 and the new phones, check out Breaking the Mobile Web. It’s a great read!

Useful extensions and apps

With iOS 8, Apple (finally) added the ability for iOS developers to create app extensions, notification widgets, third party keyboards as well as open up a plethora of other API’s. I thought I’d highlight some of the ones I’ve seen that can make our jobs as web designers a little easier.

Awesome Screenshot for Safari (App Store)

Awesome Screenshot for Safari is a great way to take, crop and annotate screenshots in Safari on iOS. The interface can be clunky when adding text, but overall much better than a vanilla screenshot that says nothing.

Remote Inspector

This is nothing new in iOS 8. It’s actually been in since iOS 6. We all love our web inspectors because it’s so easy to debug front-end code. You can do this (with a Mac running Safari) as long as you are on the same network or are connected to the computer via USB. See this tutorial for more info on how to use it.

View Source (App Store)

Awesome Screenshots [screenshot]
view-source-1

View Source is an extension for viewing  source html of a web page right in Safari (this should really be native in iOS). If you aren’t at your computer with a remote inspector, this a nice way to see the html of a page.

I would really like to see some improving on this extension, including inertia horizontal scrolling, code beautification and linking of external files (such as css and js). But, for now, it’s a great start.

Transmit (App Store)

Just like Diet Coda, this is an “in case of emergency” app. I’m still on the fence about buying this because I’m not an FTP Commando anymore, right? I’m sure I’ll kick myself when, one day, I have to quickly upload a file to a server on the go.

I would encourage you to read the review on MacStories for more detail on the app.

Prompt/Prompt 2 (App Store)

This is a must have app for us, as we are continually SSHing into servers. Again, you aren’t regularly logging in to servers on a phone, but when that server goes down while you are laying on Fort Myers Beach, it’s nice to know you have the control to sudo service nginx restart.

If you don’t own Prompt yet, Prompt 2 should be out any day, so wait for the new and improved version.

Password Vaults and Safari

With the advent of Safari extensions (These should have been there a long time ago), you can now have an app autofill forms in the DOM. Security expert Steve Gibson has recommended LastPass for years, believing it is the most secure option out there. That being said, I’m using 1password because I’m invested in that system, and I feel that my passwords are very secure.

1password and LastPass have seemingly reached feature parody, so I feel you will be happy with whatever choice you make. They both have my favorite feature, shared vaults (LastPass 1password), meaning you can share server creds, WordPress logins, etc with your development team (huge!).

To learn more about password managers, the internet can explain it better than I probably can.

Viewports and pixel densities

The biggest thing that affects us web designers is the bigger phones, which have been around on all other smartphones for some time. Ideally, you’re responsive website should look great at every pixel from 320px to 1200+px, but it’s important to pay a little more attention to these new breakpoints. Here are the viewports for all of the supported iPhones:

Portrait Landscape Pixel Density
iPhone 4/4S 320px 480px 2x
iPhone 5/5S 320px 568px 2x
iPhone 6 375px 667px 2x
iPhone 6+ 414px 736px 3x

As the size of these screens get bigger, it’s much more tolerable for the user to use the phone in landscape mode, so keep an eye on those landscape breakpoints.

If you are using responsive images, you’ll want to create 3x assets to utilize the higher-res screen on the iPhone 6 Plus. The 6 Plus has a 3x pixel density, compared to the 2x pixel density of all the other devices. I haven’t ventured into responsive images yet, as I try to use SVG’s whenever I can on vector graphics.

A small win for the web

One complaint I’m seeing from users (myself included) is that most apps are not “optimized” for the iPhone 6/6+ screens yet. All sites that are using responsive web design worked day one. Let’s not celebrate too much because if native didn’t exist, I wouldn’t be talking about all these cool tools you can use on your phone that make your job easier.

iPhone 6 or 6 Plus?

For those of you who are in the market for a new iPhone, I thought I’d share some of my thoughts when making my purchase decision:

Option 1: Don’t upgrade

If you have a 5S, upgrade is a hard sell, because the price can be hefty.Having iOS 8 and TouchID is enough to make your 5S feel that much better. If you have anything older than a 5S, I think it’s worth upgrading (If you are doing 2 year contracts, you are basically throwing away a year of phone subsidies).

Option 2: iPhone 6

IMHO, it’s the perfect size and this is the phone I went with. As a Web Designer, I’m using tools like Sublime Text, Terminal and Photoshop, so I still can’t do “real work” on my phone (or iPad for that matter), so there wasn’t a compelling reason for me to get the 6 Plus.

Option 3: iPhone 6 Plus

It’s much bigger and you don’t know until you actually hold one. I would visit a store that has both and hold them in your hand. My wife opted for the Plus, and she does like it. If you are trying to justify the purchase, the iPhone 6 Plus has 3x pixel density compared to the normal 2x of the iPhone 6, so you can be testing <picture> elements or srcset on it.

In the end, the phone you pick is a personal decision and there are no blanket answers. Go to an Apple Store and hold them in your hand and see what you think.

Exciting times

This is a really exciting time to be on the web. There is competition in the mobile hardware and OS markets, and we are seeing some really cool things!

But one thing I have learned over the years; don’t get too sucked into the “tech” and rumor-mills. We all want to know what the next big thing Apple or Google is making, but don’t let it consume you. At the end of the day, we make cool stuff on the web and have the power to change the way people interact in the world. The hardware and OS’s are important, but the web is hardware agnostic. Don’t loose site of the open web and it’s core fundamentals.

Categories
Opinion

Dogmatic Thinking in Web Development

Image of Buddy Christ
Buddy Christ; from the film Dogma

dog•ma is a principle or set of principles laid down by an authority as incontrovertibly true.

As I was walking the dog yesterday (no pun, I swear), I was thinking about how a great deal of the #hotdrama in our industry lately stems from dogmatic thinking. It usually starts with someone saying “you should never use jQuery because it’s bloated” or “developers should always use BEM-style naming conventions”. I’ll admit, it’s very easy to slip into making a decision or best practice binary. I don’t think anyone is being deliberately malicious or arrogant, they are just trying to sell the technique they believe in, and sometimes that can cloud the message that they are originally intending.

I was trying to figure out why we slip into this way of thinking, and I think it comes back to the type of work we do. Coding is inherently binary because we are often writing things like “if this do this, otherwise do that.” So it’s perfectly natural to think this way when making decisions about our craft. This isn’t to say that code doesn’t have any creativity to it; it very much does.

Through other life experiences, I’ve come to find that black and white thinking is generally not good. There are always exceptions, outliers and unique situations.

I do recognize that this post may sound hypocritical because it may come across that all developers think dogmatically. That is not true and is not my intent, as I’m just bringing up a perception that has been on my mind lately. I’d love to hear what others think about this.

So lets keep this in mind when we look at another developers code or a peer writes a blogpost about a cool coding technique, let’s not be so quick to pass judgement. And if we see others slipping into this mindset, maybe give them a friendly reminder that there are always exceptions to the rule.

Categories
Opinion

Using HTML5 form types

Note: This one gets a little ranty.

One of the earlier things I learned how to use in html5 was form types. This sounds really complicated, but it’s actually really easy (that’s why I get so worked up about this).

When these should be used

When creating a form, at least one of those input’s is an email, phone number or zip code. It is really easy to mark these as email, and phone, and zip it not quite as obvious, but still easy. Why do this? Because if you are on a mobile device, the device will pull up a number pad, or an email keyboard (with @ and .com/.edu).

Here is how easy it is

Email

<input type="email">

URL

<input type="url">

Telephone

<input type="tel">

Zip is a little more complex

<input type="text" pattern="[0-9]*">

“I can’t use those! I have to support IE8?”

Sidenote: I personally think it doesn’t greatly deteriorate the user experience if you don’t polyfill, but ideally you want to. I realize this adds complexity to implementing these, but if you are taking the time, it is definitely worth it.

If an input is <input type="blahblah"> or a type that the browser doesn’t understand, the input defaults back to text. If you want them to work flawlessly in other browsers, you can progressively enhance these inputs.

“Date” is the one that I can understand why developers wouldn’t want to use

Date support in browsers is a little dodgy and has some pretty ugly date-pickers. It takes a little more work but is worth loading in jQuery UI’s date-picker for the non-supported browsers. This is one type that can’t really go without a polyfill. Chris Coyier explains this well in the progressive enhancing post.

Why does this drive me bonkers?

When I fill out a form on my phone, I really appreciate the experience of a proper keyboard. And as a developer I know it’s as easy as changing the word “text” to “email” or “tel”.

I’m writing this post to get the change the misconception that html5 forms are difficult. I totally get why this exists. There are lots of html5/css3 techniques out there that are either difficult to implement, or hard to polyfill for older browsers, so we are hesitant to use them. HTML5 forms are not one of these. They are super easy and enhance, at the very least, the mobile experience. Oh, and did I mention you get free form validation in supported browsers?

Tvenge Design