Invisible News

The new layout when viewed on Desktop has 3 newsfeeds going down the page, “The New Stuff” (least important), “The Next Big Thing”, “What’s Hot” (most important).

As far as I’m concerned “The New Stuff” might as well not be there, I rarely read it and I’m so distracted by the much larger stories (and larger images) to the right of the page.

Reverse Page Flow

When I arrive to the site I’m reading from right to left, which feels instinctively awkward as I’m not used to reading websites this way.

Maybe I’m just being picky, but I flipped the screenshot over and I just prefer reading the most important news stories on the left.

Chronology

The new site has no real sense of time, dates are not prominent and stories are not sorted by post time, and when they are its less obvious (“The New Stuff” section which is least important on page and doesn’t seem to include all stories). I guess this makes sense as they want the most interesting stories the most important on the page, but as a power user I’d prefer a different layout.

Those are my thoughts on the new Mashable site, anyone else have any insights?

1. HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach

This book was invaluable to me in learning HTML and CSS (and I tore through it even though it was required reading in college), particularly in learning semantic, clean XHTML 4.0 and CSS 2.0, however it built the foundation on which I write my semantic code today. It’s very easy to follow, and anyone who can operate notepad on a computer will be able to get started coding in HTML within a few hours.

2. Professional Web Design: The Best of Smashing Magazine

This is a short read (and an expensive one), but I guarantee it’s worth it. This book really allows you to get your feet wet with visual design and aesthetics when it comes to the web. It won’t have all the answers, but it will get you started on the right track to building a foundation of design skills you’ll use throughout your career as a web designer.

3. Smashing WordPress: Beyond the Blog

Once you’ve got your basic design principles down, and you’re comfortable coding in HTML & CSS, this book will be an excellent transition. WordPress is one of the easiest CMS systems to get started with, and this book really makes it crystal clear how to manipulate wordpress to work for you, no matter what problem you have to solve. There is some PHP required, but with this book’s help you’ll be able to get by with just copying and pasting snippets into your HTML instead of hand-coding.

Good luck everyone!

Wearable Technology & Durability

Earlier this year I started to wear a life tracking bracelet manufactured by Jawbone (the same company that makes those awesome bluetooth speakers).

I have to say as someone who already wears bracelets and watches it was nice to know an inanimate object on my wrist was working thorughout the day tracking my steps and sending me notifications. Of course there was one down side to this, the bracelet broke within a month.

Wearable tech has to be very durable and I’m wondering how Glass will fare being dropped, or stepped on as I have done with my Rx eyeglasses. As time goes on and more information about Glass is available, I hope Google shares more information on how durable their new glasses wil be.

Using Glass in Public

One reason why I can’t see myself purchasing Glass is because I’m pretty self concious about shouting voice commands in public, which is why I rarely use Siri unless I’m alone in my apartment. I know there are others like me who will feel very awkward speaking commands to their glasses in a crowded subway train or a coffee shop. Not to mention voice commands can only go so far.

It is this reason that I fundamentally believe Glass will not replaces smartphones.

Shopping with Glass

I was thinking about shopping with Glass the other day, particularly shopping with friends. Right now I’m imagining some sort of scenario where friends can view products together and then send those products to either a smartphone or a computer for purchase. Obviously I’m finding it hard to fathom making purchases with Glass, just because there’s a lot of information to give away which I’m not sure people would want to shout verbally.

Behind the Wheel with Glass

One of the best and most exciting things I can think of using Glass for is driving, particularly with GPS. Using a smartphone and a GPS can be very dangerous because you’re interacting with a screen, but Glass will push the GPS screen into your field of vision so you always know your next step and can adjust accordingly.

The “Douche” factor

Finally, there’s the much hyped about “Douche factor” of Google Glasses. Particularly, what others will think of those wearing it. I have to say, this will only affect those that judge others based on looks, as it will give them something else to poke fun at. I don’t think those who will wear Glass will care much one way or the other what others think of them.

I wanted to take the time to announce an exciting new project I’m launching called DailyUX. I recently fell in love with the app Paper on my iPad, and since I have been sketching many UX ideas. I want to try and post one every day for as long as I can, so I’ll be launching this new site using Tumblr, I’m excited to start developing a custom Tumblr theme ever since I saw thecapitol.pn.

Hope all is well with everyone!

About this Piece

When entering the job market, I wanted to create a website that would help me stand out from other developers. My aim was to retrieve a corporate job in Southern California, but I was also thinking of the future. I created a custom built portfolio theme in WordPress that was also responsive and ready to work on any screen size. I am now able to update my portfolio with ease, add new pieces, and even make changes without entering the back end of my site. I did this to ensure that I would be updating and maintaining my site as I progressed from entry level to mid-level in my career.

Technologies Used

• WordPress (PHP, HTML, CSS)
• Adobe Creative Suite

Project Description

Upon being hired at NTT Data Americas in Santa Monica, California, I was tasked with developing and contributing to a news blog for the Analytics & Optimization practice. This site houses many posts by me and my colleagues regarding user experience, analytics, and user experience.

Technologies Used

• WordPress

Project Description

One of my clients from Kurt Sietz Web Design in the Inland Empire, California came to me with a project to build a website for her Estate Sales company. I decided it would be best to develop this site for her using a CMS since I was leaving the area and wouldn’t be as available to update her website. I was able to create training documentation to help her update her site on her own, which she uses to publish information about upcoming estate sales in the Riverside, California area.

Technologies Used

• WordPress
• HTML / CSS
• Adobe Photoshop

About This Piece

Upon moving to Santa Monica, California I co-founded Flashback Methods. Initially we aimed to create a web presence and landing page campaign that would introduce us to the highly saturated web design market in West Los Angeles, and provide a housing for a listing of solutions we offer to small-medium sized businesses as well as non-profits.

Technologies Used

• Adobe Creative Suite
• WordPress (PHP)
• HTML / CSS

1. Image Optimization

Getting your images down to size will reduce load time on your site, which can provide a great benefit for mobile users. When your mobile audience is browsing on 3G connections, load times can get pretty high. Make sure your images are cut down to the lowest possible size you can go without sacrificing quality. In Photoshop you can use the “Save for Web & Devices” option in the File menu. It looks like this:

Pay attention to the circled areas. You can adjust the quality of the image to optimize load time and file size.

2. Use the “rule of thumb”.

When creating clickable elements be sure to use the “rule of thumb”. Make the elements as big as your thumb for easier access to mobile users. trying to click a line of text is difficult on mobile devices, especially if the website wasn’t optimized for mobile devices. The easiest way to implement this concept is to use large attractive buttons, especially for important action items such as “Sign Up” or “Pay now”.

3. Avoid hover states.

Hover states don’t work on mobile devices, and can create an unnecessary load step for your buttons or images.

4. Fix modal windows.

If your modal window isn’t optimized for mobile users, it could end up taking up the whole screen and your user will never be able to close out of it. Be sure to test your modals on mobile devices to make sure your users have the ability to close out of them on a mobile device, if not you could end up facing a situation where users walk away from your website.

These are just a few quick tips this Friday morning, I’m currently in Northern California so I’m going to go outside and experience the beauty up here. If you have any tips you’d like to share please leave them below. Have a productive day, and a wonderful weekend.

Today is all about copywriting, specifically for your new website.

Step 1: Brainstorm and organize content.

Now is the time to let your stream of consciousness flow. Write down your ideas for the content on each page. Make lists, write paragraphs, and organize them based on importance. You want to determine your goals for this project you’re working on (now is the perfect time to reference that list we created in part 1), and decide how to go about achieving them. It’s okay to be messy during this stage, because the rest of the process is all about refining the content. Keep in mind you need to spend a lot of time brainstorming, make sure you’re exploring all avenues. Once you have a few pages of rough content, move on.

Step 2: Think “search” oriented.

Now is the time to think about searches. The best way to generate traffic to your website is to provide answers for search terms or questions. Create a list of keywords you want your copy to focus on, be sure you include those keywords when necessary, explain how they are relevant to your website and your content. When you think in terms of search engines it’s important to focus on a specific target audience, flooding your copy with loads of keywords will never help you reach a specific customer base.

Step 3: Sales techniques for the web:

Headlines: Engaging and accurate.

I could write a whole blog post just on headlines (maybe I will some day). These are roadmaps for your users to determine if they are on the right page. Most users will scan headlines first, then read content if they feel they are in the right spot. Be sure to make your headlines engaging and accurate.

Motivate your users to act.

Use action oriented language, motivate your audience to perform actions (call you, purchase products, fill out a form, register). Give them good reasons to perform these actions and explain the rewards for their time and energy. Most users aren’t going to perform actions for you if it’s not easy and clear, so make sure you take the guesswork out and explain everything in your copy.

Accurately describe and sell your products and services.

It’s important to think in terms of advertising, tell your audience what’s so great about your services or product, explain the benefits of a purchase or phone call. More importantly, make sure your products and services are described accurately, especially if you are targeting a niche market. “Brown Shoes” doesn’t quite have the selling power as “Brown Leather Slip Resistant Work Boots”.

Step 4: Review, Edit, Reduce

Now is the time for spellcheck, and a couple of read throughs of your content. Make sure your grammar is correct, all words are spelled correctly. Reduce your content if you have to, make sure the most important material is present and leave out all the fluff, this will show your users that you value their time.

That is a quick crash course for anyone willing to put forth the effort to write their own copy. Of course, practice will make you better over time, along with research. I am by no means a master of the skill, but I definitely want to be able to write copy, as a web developer, when I need to. It is for that reason that I constantly research and learn more about the interesting world of web copywriting. If you have any additional tips please leave them below.