Thursday, May 31, 2012

Silly, amazing infographics.

Last night I stumbled upon these awesome infographics about web designers, developers and the gender gap in the development industry.

They made me chuckle.




I can't say I made these...but I can say they are fabulous!

Wednesday, May 30, 2012

New site finished & Chinese Twitter censorship

I've got some good news and some bad news.

Good news is my friend, Sara Snyder's (see previous blog post) website is all finished (for the most part). Seriously, check it out. I think its one of the better portfolio sites I've made.

Bad news is, I read a Mashable article yesterday about China and its microblogging site, and was seriously appalled by the extent of censorship thats limits the online social media activity of the Chinese population. According to the article, the Chinese microblogging site, Sino Weibo, operates off of a point-based system in which users are penalized if they break any of the following rules:

Article 13) Users have the right to publish information, but may not publish any information that:

1. Opposes the basic principles established by the constitution
2. Harms the unity, sovereignty, or territorial integrity of the nation
3. Reveals national secrets, endangers national security, or threatens the the honor or interests of the nation
4. Incites ethnic hatred or ethnic discrimination, undermines ethnic unity, or harms ethnic traditions and customs
5. Promotes evil teachings and superstitions
6. Spreads rumors, disrupts social order and destroys societal stability
7. Promotes illicit activity, gambling, violence or calls for the committing of crimes
8. Calls for disruption of social order through illegal gatherings, formation of organizations, protests, demonstrations, mass gatherings and assemblies
9. Has other content which is forbidden by laws, administrative regulations and national regulations

Article 14) Users may not publish untrue information. For information about what untrue information is, please see “Sina Weibo Community Management Regulations (Trial Phase).”

I can't even imagine a day where I couldn't post my opinions or read others' sassy comments about, politics or the government.

Thank God for the 1st amendment.

Tuesday, May 29, 2012

Summer in the country

Yesterday I decided to go on a nice, long bike ride through all the farms where I live. Between the blue skies, 90 degree weather and awesome jams on my iPod, I was in sweet southern heaven.


The thing about south Texas during the summer time, is that, well, its absolutely gorgeous. Good thing I brought my camera with me :)






















If you want some music to jam to while looking at these country-fied pics, here's what I was listening to during my ride yesterday:

Monday, May 28, 2012

Mobile Website Developing 101

Oh, to be a coder.

In order to receive class credit for my awesome web internship at Planet Forward this past semester, I had to create a final project about something related to my work over the past semester.

I chose to write a long, in-depth how-to piece about mobile website development: something that I wished  I had stumbled upon during my mobile website development experience earlier in the semester.

Its pretty awesome, if I do say so myself:


By: Sandi Moynihan

Today, vast majorities of web users are choosing to access websites via their phones instead of their desktops, which poses new dilemmas for web designers, like myself.

A few weeks ago, I created my first ever mobile-optimized website (with some difficulty I might add) for the organization I’m currently interning for, Planet Forward. While I am quite skilled in html/css/Wordpress website development, I had never attempted to create a mobile version of a website until then, and didn’t even know where to begin. Before I started thinking about writing code, I did what any good student would do—I researched.

Fortunately, I did find some awesome resources that helped me understand the theory and technique behind developing specifically for mobile devices. However, I would have liked a more comprehensive (and colloquially written) resource to reference throughout my entire mobile website development process.

So, I decided to this blog post to help tech-savvy individuals like myself get a realistic expectation of what mobile web development is all about.

Why is mobile web development so important in the first place?

The mobile web is growing. And it’s growing fast.

Until recently, mobile apps have been the standard solution to creating a presence in the mobile world, but as mobile web browsers improve, mobile web sites are proving to be the more flexible and user-friendly option (Falestski 2012). Mobile apps must be created with a particular device language in mind, but mobile websites can be programmed with universally recognized front-end languages like html, css and php (Costa 2010).

Moreover, according to Mashable.com, by 2015 more users worldwide will browse the Internet via mobile devices than desktop computers (Falestski 2012). Nielsen’s Q3 2011 Nielsen Mobile Media Report says nearly half of all mobile phone users have smart phones, with iPhones and Droids being the choices among mobile users (Nielsen 2011). Even Google is pushing companies to go mobile, claiming 61% of mobile users will not return to a website that is difficult to use on their mobile device (Kim 2011).

A recent Fortune article sums it up perfectly: websites lacking a strategic mobile development plan just setting themselves up for failure in the future (Jimenez 2012).

Going mobile: small websites v. large websites.

Once site owners and web developers decide to go mobile, there are a few considerations they must keep in mind before adopting a set mobile development plan:



If a site owner/developer decides to go down the outsourcing route, here’s a short list of some of the better mobile development firms I’ve stumbled upon in my past few weeks of research.

howtogomo.com- Google’s mobile development site. It has tips for going mobile, a mobile site builder, as well as a “find a developer page” that is extremely extensive and very helpful. This is probably my favorite resource out there.

DudaMobile.com- One of Google’s recommended developing firms. It has free, basic and custom development plans at a variety of price levels.

Applicoinc.com- A top-rated mobile development firm. This firm creates apps and mobile websites for some big-wig clients like Toshiba and GM.

Mobisitegalore.com- A “do-it-yourself-builder” mobile development approach. There are different pricing options, including a three-page free option.

Mobify.com- An HTML5-based development firm that focuses on creating commerce sites that adapt to different mobile devices. Mobify has big-name clients like Lululemon Athletica and Starbucks.

For site owners/developers deciding to take a crack at mobile web developing on their own…keep reading.

Building a small mobile website: the basics before developing

Before sitting down start creating a mobile-optimized website, there are three key traits the pre-existing website must have before the mobile-optimization process can begin.

  1. The site must be relatively simple. My knowledge, recommendations and process works well for simple firm and personal sites. Larger sites, however, might need more personnel and technical support to develop a mobile website that satisfies their needs.
  2. The site must not be Flash-based. iPhones make up a large portion of the world’s smart phones, but they are not designed to recognize Flash. To reach the largest mobile audience, avoid Flash.
  3. The person programming the site already has a firm understanding of html/css, as well as a basic understanding of JQuery and PHP. Like in any web developing process, the developer must already possess a working knowledge of the web development process and the front-end coding languages that are associated with the web development process. Without a developer with this basic knowledge, I would highly recommend outsourcing the mobile development project to one of my recommended mobile web development firms.


Ready, set, build.

Here’s my step-by-step guide (with code snippets and pictures) of how to create a small, simple, mobile-optimized website. I’ll be using the mobile site I developed as an example, showcasing code from regular site my boss created as well as code from the mobile site I created. I will be discussing the code in terms of one page, but the code can be copied and applied to an entire site, assuming css styles are consistent throughout the site.

Step 1: Create and define a mobile stylesheet

The most basic part of creating a mobile version of a website is creating a specific stylesheet that will control how content will be displayed only on mobile devices.

Let’s call this style sheet handheld.css.

Initially, this style sheet will be blank, but later in the mobile web development process it will be filled with styles pertaining to the mobile version of the pre-existing website.

Once the development team creates handheld.css, it should then move to the main .html document. In the header of the main .html document, the developers should link to the new handheld.css document, defining its media hand held devices with small screens, like so:

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="Meta Tags Go Here">
<title>Your Title Goes Here</title>
<link rel="stylesheet" href="styles/style.css" media="screen" />
<link rel="stylesheet" href="styles/handheld.css" media="handheld, only screen and (max-device-width:480px)"/>
</head>

In this document, the regular style sheet and the mobile style sheet work together to provide users with an optimal experience depending on which device they are using. The style.css document ensures and optimal experience on larger screen-based media, like laptops, while handheld.css controls how content is displayed on smaller screens, like mobile phones. With these two style sheets, there can essentially be two different versions of the same exact site without having to create an entire new .html document for the mobile version of the site (Raasch 2010).




Step 2: Edit your style sheet for mobile optimization

The next important step is to use the handheld.css stylesheet to manipulate the preexisting defined styles to create a more mobile-friendly version of the site.

While this is largely a process of trial and error via change and upload (and change and upload, and change and upload) there are few things developers should pay attention to when coding their handheld.css stylesheets.

Font needs to be comfortably legible on a mobile screen. The user should not have to squint to read the text, plain and simple. Appropriate sizes range depending on the style.css’s initial settings (Raasch 2010).


(Left: legible text; right: illegible text)
 

Buttons must be thumb clickable. Most mobile users use their thumbs, and not their smaller fingers to click. Make sure all buttons are large enough to be tapped with a thumb (Raasch 2010).


(Left: clickable links; right: difficult to click links)
 


Pictures, colors and background colors must serve a purpose, or be gone. As nice as these elements look on larger screens, in the mobile world, they just take up bandwidth and increase loading times. Unless they are completely necessary, apply a display:none element to the object’s div or style tag to turn the element off for mobile users (Raasch 2010). 

For example:

.sidelogo {         
display:none;
float: left;
margin: 0 0 0 -250px;
width: 180px;
}

Position your content into one column. Mobile browsers are designed for sites that scroll down, not left and right. Keep things simple and position your content into one long column (Raasch 2010).

Change height/width dimensions to percentages to allow for different mobile screen sizes. It would be a mistake for me not to make this recommendation. However, in my coding experience over the last month I’ve come to realize that sometimes percentages work… and sometimes they don’t. My code is a mix of defined percentages and pixel numbers. While pixel numbers are more exactly, they don’t allow the same fluidity that percentage definition does, especially in terms of height and width. If percentages seem to be working, then I would stick with them. If not, using pixels is all right (Raasch 2010). 

For example, here is a snippet of my code, which includes a combination of pixels and percentages:

#mainnav {
font-size: 1.5em;  
background-color: rgba(0, 0, 0, 0.6);
color: #FFFFFF;
height: 200px;
margin: 0 0 40px;
position: fixed;
top: 0;
width: 100%;       
z-index: 100;       
text-align:justify;
}



(Percentages allow for a fluid transition from vertical viewing to horizontal viewing.)
 


And anything else you want changed. Remember, many sites are built so that large stylistic changes can be made just by manipulating the .css sheets without having to touch the html or PHP code of the page. Only look to changing html and PHP bases elements if no solution is available using style sheets (Raasch 2010).

Step 3: Testing & reworking: keeping up with technology

As with any web development process, the project is never truly done. Once a mobile development team creates, edits and uploads new style sheets to define a mobile-optimized version of a website, it is important they constantly test and update the code as new devices appear on the market.

Even today, some devices don’t recognize the media query defined in the import of the handheld.css sheet (as explained in Step 1: Create and define a mobile stylesheet) in which case an entirely separate mobile site will most likely have to be developed (Raasch 2010). While I am not versed enough to explain this process, an excellent article by Jon Raasch touches on the process of developing an entirely unique mobile version of a website.

Tidbits, last words of wisdom and warm fuzzies.

With all of this mobile web development wisdom in mind, there are a few tips that I don’t fit into any specific category that I would like to leave with readers.
  1. Allow at least three weeks to develop the first mobile page. My first page took me two times as long as I would have liked it to. That being said, allow for twice as long as anticipated when planning a mobile web development project.
  2. Prepare to fail. And fail. And fail. And then be successful. Mobile web development, especially the first time around, is a game of trial and error. Prepare for a few frustrated days, followed by a bit of success.
  3. Every site is different. While these tips can be used for almost any basic mobile website development strategy, its important to remember that every site works and breathes differently, and therefore might not respond to code changes in a similar matter. Be patient. There is a way.
...


Works Cited/ More Resources

Costa, D. (2010). Ditch mobile apps, invest in the mobile web. PC Magazine, 29(6), 1.

Falestski, I. (2012). 5 Paradoxes shaping the future of mobile commerce. Mashable.com.

Jimenez, S. (2012). Google's next mobile web plays.
Fortune. Retrieved April 20, 2012 from http://tech.fortune.cnn.com/2012/04/05/google-3/

Kim, R. (2011). Google pushes advertisers to optimize sites for mobile. GigaOM. Retrieved May

Raasch, J. (2011). How To Build A Mobile Website. Smashing Magazine. Retrieved April 1

(2011). The mobile media report. Nielsen. Retrieved April 20, 2012 from

Here's what I've been up to lately.

Considering its no longer the school year, and not quite the start of my social media summer internship at The Nature Conservancy in L.A. (so PUMPED), I've decided its the perfect time to return to my long-lost blog and get to writing again. But I've decided to spice things up a bit, you know, to keep it all interesting.

As you may (or probably don't) know, in addition to being an avid photographer, I'm a web designer and developer, as well as a novice graphic artist.

This past week, my lovely friend, Sara Snyder, and I have decided to do a bit of talent trade: new (muchly needed) headshots for me, and a snazzy portfolio site for her.

I'm almost done building Sara's site, and I'll admit... I think I like it better than my own portfolio site.

Well almost.

Allow me to digress for a moment. Or rant. This is probably a rant.

In the web development world, one of the most crucial choices site owners and developers must make while launching a site is the hosting company. Undoubtedly you've heard of these companies, at least the famous GoDaddy.com (which, actually, isn't that bad).

Well, as much as I love Miss Sara, her hosting company, 1&1, is giving me (and a lot of other developers) a bit of a headache. How many memory failed upload errors does 1&1 expect people to see before they start losing clientele? All I want to do is upload fun pictures, the easy, wordpress way.

Long story short. Don't host with 1&1. Go with a better choice, like iPage (awesome customer service).

Rant over.

Since I'm going to L.A. for the summer, and will have a lot more time on my hands since I won't have homework, expect some awesome blog posts about photography, technology... and everything in between.

Happy Memorial Day!