Beneficial Websites

Tutorial:Building a website for the iPhone

iPhone WebDev

CSS iPhone

Creating the for the iPhone

It was a challenge learning what you needed to do to make things work on the iPhone. First off you have to think about the small screen, flip orientation, fluid widths because of the orientation, load time, etc. Here are a couple of highlights that you need to remember when creating for the iPhone.

1. Fluid Widths / 100% Widths – you don’t have to use fluid widths but if you don’t, when a user flips their phone sideways your content doesn’t stretch to fill the width. I found that it works best to design so that your buttons, content, images expand based on the orientation. It looks better and it makes for a better user experience.
2. Load Time – you have to remember that some of your users may be viewing the content on their 3g / edge network. So load times are key, you want the page to load fast so make sure you optimize your images properly.
3. Large Buttons – people have fat fingers. Even though I have heard that the iPhone has an algorithm that molds the click function based on your usual habits it still makes it easier for the user when your buttons are large enough for them not to miss.
4. Mobile Detection – You need to have a snippet of code that allows your site to be loaded when a user is visiting with their mobile device.
5. Text Adjustment – When you rotate your iPhone because the resolution changes your font size increases, it almost seems as though the font size gets bigger. To keep this from happening you can incorporate this snippet of code in your body style  -webkit-text-size-adjust: none;.
6. PNG’s – Make sure you use PNG’s where needed and enjoy taking advantage of transparent PNG’s. Remember you don’t need to test for IE or anything else accept for mobile safari.

I highly recommend that everyone take the next step and create your portfolio, mini site, etc for the iPhone. It is a great learning experience and you will learn a lot about how people may interact with your site as you browse around on it yourself. More and more people are going mobile these days so we need to adapt to this change and create experiences that are beneficial for you and the user.

Enjoy! Follow me on twitter and don’t forget to visit BoomSkins to get your iPod, iPhone, and Apple Laptop protection!

Well let me tell you how it can be useful. Say you are working with a client and you send them a link to view the masterpiece website you are creating for them. You know the one that has the huge logo, way bigger than it needs to be and the flash intro with no skip button because, you know, people need to see the intro to their website….you get the idea. And for some crazy reason they can not view the flash or some of your pretty jquery isnt showing properly or maybe they are on the latest IE6 browser that just came out last week. There could be several reasons they aren’t viewing the proper experience. Well all you have to do is send them to Support Details and it will display all the information that may be causing these issues. They can either tell you over the phone or they can save it as a PDF and email it to you.

I think it’s a great little tool that can help the client understand they need to upgrade certain features of their operating system or give you some insight on what you need to change for it work for a more broad audience. Enjoy!

Remember to follow me on Twitter and visit BoomSkins in your free time!

Oh and remember to follow me (Jake Mize) and Mr. Mugnai on Twitter!

Website Stencil

Website Sketch Pad

iPhone Stencil

iPhone Sketch Pad

iPad Stencil

I personally like to draw three legged unicorns riding on surf boards shooting bazookas, but thats just me. Check out what these “professional” doodlers are doing.

By the way, I just realized that these things are not called Fickle Flickers, thats just the name of the site they are displayed on. But the name sounds really cool and there is some beautiful content flow going on above, so, I’m going to leave it. Enjoy!

All of the photos come from this website, this way I don’t have to link every single photo. Plus all the photos open in pop-ups, cuz pop-ups are cool!

A Munny doll is a blank figure the owner can decorate using pens, pencils, markers, paint, and other pigments. A Munny doll is made out of vinyl and has movable joints. The first Munny doll was white, and has since been available in other colors such as black, pink, blue, and phosphorescent green. The figure is housed in a box which includes 4 random accessories that vary from a different series (1 through 4, 4 being the latest) such as a carrot or a hat. The doll also includes one out of a series of collectible coloring books

Here are 45 of the coolest Munny’s I could find. I’m sure there are more but I have to tend to other things like, eating and sleeping. Enjoy!

If you have enjoyed this posting, follow me and Francesco as well as the other authors here on the blog! Enjoy!

Ok, so ThemeForest, I’m assuming that most of you have heard of them or at least heard of Envato who runs a ton of Design / Code based sites. If you are part of the design community but have never checked any of their stuff out, I would highly recommend it.

Overview of what I will talk about

1. Who are they?
2. What I submitted
3. ThemeForest Rejection
4. ThemeForest Acceptance
5. Making Money

ThemeForest is, in their own words

ThemeForest is an Envato Marketplace. At ThemeForest you can buy and sell HTML templates as well as themes for popular CMS products like WordPress, Joomla and Drupal with prices ranging from just $5 up to $40. Items are priced on the complexity, quality and use of the file. The site is home to a bustling community of web designers and developers and is the biggest marketplace of its kind.

What I Submitted

I submitted several file types, Website Photoshop file, Website HTML / CSS, and Individual Web Graphics Photoshop file. Each of these file types represents a category. I submitted several files to each of these categories but there is no point in going over all the files.

The following snapshots were submitted first as a Website Photoshop file

Status - REJECTED

Here is why it was rejected -

This File Did Not Meet Our Criteria

This template has a nice concept going but it is not aesthetic ready for PSD category. It will need many improvements in typography, visual hierarchy, layout and general aesthetics.

This template is more suitable for site template category, I recommend to directly convert this into HTML/CSS and re-submit after improvements.

If you have any questions about this review you can reply to this message to open a new support ticket where I will be happy to answer any questions you may have. Once again, thanks so much for the submission. Hopefully, you’ll submit more templates in the future.

Ok, so my very first file was rejected, no big deal. They requested that it be made into an HTML / CSS version and then resubmit, apparently it would have a higher chance of being accepted. Improvements on typography, visual hierarchy and general aesthetics seems kinda vague. It also seems strange that all of these items are fine if coded as HTML / CSS as opposed to me just submitting this as a PSD file. They would be getting the same thing but in addition to getting the REJECTED PSD file they would also be getting a HTML site. Why is a photoshop file not acceptable one way but is acceptable if this other item is added to it?

Here is a link to the Website HTML / CSS file that was submitted above (when submitting HTML / CSS, you also provide your PSD file used to create your HTML file)

ThemeForest – Theme Cart template

Status – ACCEPTED

This file was accepted but only after it was rejected. Here are some of the reasons why it was rejected -

This File Requires Some Improvements / Fixes

Thanks so much for taking the time to submit this template. Unfortunately, due to our high standards, your template has been declined.

1) Sorry, but your MainFiles.zip doesn’t contain the HTML/CSS template. You’ll need to upload the MainFiles.zip with the HTML/CSS template included.

2) You’ll need to include more in depth template documentation with your main download files. Try using our example documentation template which can downloaded here: http://blog.themeforest.net/site-news/building-better-template-documentation/

The help file should cover the HTML and CSS structures to help the buyer get caught up to speed on how you’ve built the template. Please also note that this is an example only and you should expand the documentation to fit your template and what your buyers might need to know.

3) Elements such as navigations and series of items should be placed in lists instead of a series of links or divs.

4) Some of your files contain validation errors that will need to be fixed. Please be sure that all files validate before resubmitting.

You can validate HTML at http://validator.w3.org

You can validate CSS at http://jigsaw.w3.org/css-validator/

Man, this was a great response as opposed to the rejection response I received from my PSD template. They gave me specific instructions as to what I can change to have it accepted. I submitted after this but it was rejected yet again, with more changes that differed from the first. Was something missed during the first review? Maybe so, but eventually it was accepted.

Making Money

So once your file is accepted, it gets placed on the homepage with all the other new files and is priced by ThemeForest. Ours was priced at $12 / $10. It seems to stay on the home page for a week or so but Im assuming this varies based on the amount of files that are submitted. You get a lot of traffic during that time, and the ability to generate a lot of sales. If this is your first time you will make 40% of the sales if you sell exclusively with ThemeForest and I believe 25% if you sell it some where else too. This is reasonable I think because they are generating the traffic for your product and most of these files are just rejected client files anyways.

While most people make small amounts of money ranging in the hundreds and thousands there are people that have jumped up to the $250,000 – $1,00,000 range, although I highly doubt they are anywhere close to the $1,000,000 mark.

Conclusion

If you are looking to make some extra cash and don’t mind putting in the extra work, I would recommend funneling some of your design work through Envato. Although don’t take it personal when your perfectly good file is rejected and no reasons are provided. As for me, I will keep submitting and will continue to share my submission experiences with you guys, hopefully some of my short comings will help you in the future. Thanks!