Random thoughts of a digital web weaver

I like Apple Maps

Ever since the new iPhone was released the Internet has been flooded with harsh criticism and hate for the new Apple Maps. It’s as though the world thinks there is a huge conspiracy by Apple to feed them bad directions so that people end up in the middle of nowhere or on a one way trip to Mars. For me, the backlash is just another example of how society has become impatient and hinges on instant gratification.

Personally, I like the new Apple Maps. I have used it a few times in the Seattle area and the mapping seems accurate so far. The “3D” view looks pretty slick and the graphical aspects are great as well. Having the turn-by-turn navigation has by far been the biggest improvement and if the sticking point between Google and Apple was that Google was unwilling to license their turn-by-turn technology then I am all for Apple going in their own direction as that feature was sorely missing from previous iOS versions.

By no means do I think that the new Apple Maps is perfect. I’m sure there are a ton of things that they need to fix. But I also believe that as they receive more feedback and data that the app will improve (just like Google Maps has improved over time). It is just a matter of being patient and giving Apple time to make those improvements. However, in today’s society where everyone is concerned with getting things “now”, being patient seems to be easier said than done.

CSS Wishlist: Extendible CSS

With more people viewing the web over high-speed connections and through mobile devices across cellular networks, bandwidth has become a major consideration when designing/developing websites.

While the bandwidth usage of CSS files tend to pale in comparison to the obvious big guns such as video, images, and other media, CSS bloat is still a problem. There are methods out there to organize/reduce the amount of CSS we create but it would be wonderful to have a mechanism that would allow us to reuse CSS rules without having to add classes to markup.

For example, if you have a site that uses links that are styled like buttons, you may have some HTML like this:

<a href="sign-in.html" class="btn">Sign In</a>

And some CSS like this:

.btn {
background: #f00;
border: 1px solid #900;
display: block;
padding: 8px;
width: 100px;

This gives you some CSS to create a basic red button. If you want to create a new button for “Sign Up” which is green, you can add an ID and style that:

<a href="sign-up.html" class="btn" id="sign-up">Sign Up</a>

#sign-up { background: #0f0; border: 1px solid #090; }

Pretty simple. As your site grows, you may want other green buttons. So what do you do then? Do you add another selector to your styles like:

#sign-up, #next-step { background: #0f0; border: 1px solid #090; }

or do you go in favor of declaring a separate class for all of your green buttons like this:

.btn-green { background: #0f0; border: 1px solid #090; }

and add the class to your markup?

<a href="sign-up.html" class="btn btn-green" id="sign-up">Sign Up</a>
<a href="logout.html" class="btn btn-green" id="log-out">Log Out</a>

The class route seems like a good way to go until you decide to change the color of the button to blue. Then you would have to create a new .btn-blue CSS class AND change your markup.

I wish there was something we could use that would import the properties of other classes and apply them. The way I’ve been thinking that it would work is something like this:

.btn { border: 1px solid #000; padding: 4px; background: #0f0; }
.red-btn { background: #f00; border-color: #600; }
.join-btn { inherit: .btn .red-btn; color: #fff; font-size: 20px; }

By inheriting a class, you could apply the properties to your new class. You could then inherit additional classes and/or apply additional CSS. This would allow you to quickly change styles without having to add to/change your mark up. It would also cut down on code and help keep your markup free of presentational attributes.

We have seen a huge increase in the capabilities of CSS with the implementation/support of CSS3 and I’d love to see something similar to what I propose above come down the pipeline because I think it would be a great benefit to designers.

Social Media Sites Want You to Stay Connected

Photo of various smartphonesI’m not sure how many people actually log out from their social media websites as opposed to just closing their browser. If you do log out of sites like Facebook, Twitter, and LinkedIn, you may have noticed that the log out confirmation page serves as a reminder to connect to their respective mobile app. 

It made me think about mobile websites and applications and I realized that it’s not just about creating a site to fit on a small device that people can take anywhere. It’s about keeping users close at all times.

Using a log out or exit screen as a spot to direct users to your mobile application is a great way to take a screen that represents the end of a session and use it to re-engage a user.

It’s not just a push to mobile. It’s a push to stay connected no matter what platform you’re on.