iPad and Flash
April 6, 2010
Move your mouse over image
You know it’s awesome and I know it’s awesome.
We’ve all been waiting and waiting and it finally arrived. The iPad to much fan fare landed in the very touchy feely hands of Mac fans across America. I have read a couple of reviews see below:
“The Apple iPad is basically a gigantic iPod Touch,” wrote David Pogue, the New York Times technology reviewer. “The simple act of making the multitouch screen bigger changes the whole experience.” He said, “Driving simulators fill more of your field of view, closer to a windshield than a keyhole.”
Mr. Pogue thought technophiles would be unimpressed: “The bottom line is that you can get a laptop for much less money — with a full keyboard, DVD drive, U.S.B. jacks, camera-card slot, camera, the works. Besides: If you’ve already got a laptop and a smartphone, who’s going to carry around a third machine?” – The New York Times
“Currently, there is a web standard called Flash, developed by a company named Adobe, which allows for the easy insertion of rich media into webpages. That’s everything from streaming video and audio files, online gaming, to entire websites made using its broad and deep development tools. The penetration percentage for Flash on PCs around the world is something like 98 — that’s almost everyone — and many, many sites employ the standard on their pages. When we say many, we mean most if not all of the pages you typically visit use Flash to display some of their content. The iPad browser doesn’t support Flash, and won’t support Flash, perhaps ever.” Engadget
Ok it’s not all bad especially if you spend most your time consuming content. If you are buying the iPad to consume and not create then your set. I don’t have the time or patience to try to use a product that does not support a standard like flash. At least not yet. I will eventually cave.
I have been investigating remote desktop solutions for flash i.e. use on the iPad to watch videos. To be honest that’s my second reason for wanting flash to work on the iPad and first being web development / design. It kind of bothers me that Apple would put the iTunes store before users like me. Users that have have supported with purchases even in the bad times.
All things considered the iPad is an amazing creation. No one can deny that and it will probably at the least drive consumers to usage patterns different from that of laptops.
Will iPad kill laptops? Not yet.
Other references:
http://simonwebdesign.com/steve-jobs-html5-will-kill-flash/
Modal Windows
March 10, 2010
Modal Windows are usually called pop-ups or inline pop-ups. Modal Windows are very useful in communicating a message, helping a user complete a task, showing progress, displaying a gallery of pictures etc. The point is that the content is inline with out a page blink. If you’re using Modal Windows then you’re likely designing for the user or are approaching web projects with User Centered Design in mind which is good.
Modal Windows according to Wiki:
In user interface design, a modal window is a child window that requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box
I think the biggest hurdle in using Modal Windows effectively is choosing the right flavor. There are a lot of flavors and not much time in a day to rate them all. Me not being a JS programmer am predisposed to choose designer friendly frameworks.
Below I have created a short list of Modal Window frame works that can be very helpful. At this point I really like Colorbox. Please feel free to add your own.
- colorbox – A light-weight, customizable lightbox plugin for jQuery 1.3 and 1.4
- jQueryUI Dialog – The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel
- fancybox – FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.
- DOM window – jQuery plugin (jquery.DOMwindow.js) used to create DOM windows.
- shadowbox.js – Shadowbox is a web-based media viewer application that supports all of the web’s most popular media publishing formats.
- GreyBox - GreyBox can be used to display websites, images and other content in a beautiful way.
- ThickBox (No Longer Supported) – ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library.
- ModalBox – ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional windows.
- Prototype Window – This javascript class allows you to add window in a HTML page.
- Simple Modal – SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development.
- JQModal – jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser.
- LivePipe UI – LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework.
PNG Transparency
March 9, 2010
As Web Design online becomes more sophisticated and IE becomes nicer we Designers are able to do cooler and cooler things.
So let’s talk Transparency.
I remember there was a time I depended solely on GIF files for my transparency. I was left unsatisfied because the edges were always rough and while it did have value in terms of being an arrow in the Web Design quiver, using GIF for cool stuff just didn’t make sense.
Enter PNG
PNG (pronounced ping) files are a really useful alternative to GIF and you can do alot with PNGs for you transparency needs.
According to Wiki
Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace GIF (Graphics Interchange Format) as an image-file format not requiring a patent license. It is pronounced /ˈpɪŋ/ [1] or spelled out as P-N-G. The PNG acronym is optionally recursive, unofficially standing for “PNG’s Not GIF”.[2]
PNG supports palette-based (palettes of 24-bit RGB or 32-bit RGBA colors), greyscale, RGB, or RGBA images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK).
PNG files nearly always use file extension “PNG” or “png” and are assigned MIME media type “image/png”; it was approved for this use by The Internet Engineering Steering Group on October 14, 1996.[3]
The Fly in the Transparent Ointment
As always in Web Design there are at times problems especially implementing technologies into your “rad” design – PNG is no different. Yes, I just said rad. The problem is IE. No surprise. So in order to get PNGs to work you need to add some lines of code to your design in order to get it to work.
According to microsoft
If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may appear to be gray rather than transparent. Web developers who work with PNG files can use the AlphaImageLoader filter…
Below I have gathered links that would be useful to your PNG journey. Please leave me a line if I left any out. I prefer Twin Helix.
- PNG transparency test
Examine the test images in the left column below. To determine how your browser handles PNG transparency, find the images on the … - IE PNG Fix – TwinHelix
This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! … - Digital Web Magazine – Creative Use of PNG Transparency in Web Design
May 28, 2007 … Using PNG’s transparency alpha channel, we can emulate Wilson’s style …. Creating an image in Photoshop for use as a transparent PNG mask … - PNG in Windows IE
This site is all about a JavaScript-based PNG fix for Internet Explorer 5.5 and 6 on Windows. The fix allows IE to properly render PNG alpha transparency. … - Fun with Transparent PNG Images
Transparent PNG images have been always been a great tease to web designers. This tutorial will show you a few tricks to working with transparent PNG files. … - PNG Files Do Not Show Transparency in Internet Explorer
If you browse to a Web page that contains an image that has a transparent background in Portable Network Graphics (PNG) format, the image background may … - PNG Transparency in Internet Explorer – Solutions by PC Magazine
It didn’t work out of the box, but Microsoft created a work-around. Here’s a technique to simplify it. - GIF, JPEG or PNG?
You make a lovely transparent PNG or GIF image for your website, and you go along … Save it as a transparent PNG (one color transparency) and set the … - PNG-24 Alpha Transparency
A PHP solution to fixing the display of PNG-24 images with alpha transparency in Microsoft Internet Explorer. - PNG Behavior (WebFX)
It is of course our all beloved PNG format I am talking about. This format can have an 8 bit alpha channel which allows the images to be semi transparent. …
Typography and Politics
February 5, 2010
File under interesting.
The written word has been used to communicate since its inception. Words can be used to persuade us in one direction or the other. In the context of politics, typography plays a role as well as the message. It’s about how the message is presented. So let’s talk about typography in a moment of contemporary politics. My theory is in contemporary politics that sans serif fonts are simply more powerful and fresh as opposed to serif fonts.
In 2000 there was a highly contested election between Bush and Gore. Here is was their typography usage.
In 2004 Bush was re-elected over Kerry and here’s their typography usage.
I’m seeing a pattern. How about you? Notice (despite your preference) the sans always wins. Is it just coincidence?
“A typical Kerry logo displays the same inconsistency that his opponents accuse him of. A steady visual message requires the consistent use of the same font over and over again. On a typical drive to work, I encounter no fewer than five typefaces used in as many different Kerry-Edwards logos. One is stretched out; another is condensed. One looks masculine; one looks feminine. In contrast to Mr. Bush’s aggressive sans-serif font,Senator John Kerry’s multitudinous font choices center on the use of thin, delicate-looking, “girlie-man” type. No wonder some voters think he’s a vacillating wimp…In recent weeks, Mr. Kerry has done a better job of getting his verbal message across. But his visual message has already been burned into the electorate’s collective psyche. Even if he wanted to make a change for the better, the money has been spent, the signs have been printed, and the bumper stickers have been stuck. But, John, if you do win in November and decide to run for re-election, give me a call.”
-SCOTT DADICH, New York Times | More>
My Theory Shredded (kinda but not really)
Come any closer and I will use the Obama font on you – Gotham.
Gotham is wider than average text, lending it gravity and solidity. It says, “What I’m saying is special enough to warrant the extra room I require.” Increased legibility comes from this and the large x-height (the height of the lower part of the letter, usually compared to the ascender). More>
It’s both, but more than just serifs, and the winning message “Change We Can Believe In” is sans. In fact, that’s what was more memorable and actually proves my theory. Yes, I do know that McCain used Optima a sans font, but my point is it was weaker than Gotham on top of the fact that the serif used for the Obama logo was much stronger than previous presidential candidates.
Scott Brown uses Gotham (Obama Font) and wins.
I know there are many typophiles that will disagree, but it seems to me that sans is more powerful than serif fonts.
If you’re a designer in politics pay attention to serifs, but pay more attention to sans. Because your candidate’s political life may depend on it.
Steve Jobs: HTML5 Will Kill Flash
February 1, 2010
As the Apple Turns
With the release of the iPad I was eagerly expecting to see some sort of Flash improvement or moving towards a solution with Adobe with regard to Flash being able to play on an iPhone or iPad. Rather than a push towards bridging the Flash gap we got a double down and some Google smack talk.
Steve Jobs had a town hall meeting and answered questions from Apple employees brave enough to ask tough questions. Concerning Flash there was nothing new. Jobs doubled down by basically saying HTML5 will kill Flash:
About Adobe: They are lazy, Jobs says. They have all this potential to do interesting things but they just refuse to do it. They don’t do anything with the approaches that Apple is taking, like Carbon. Apple does not support Flash because it is so buggy, he says. Whenever a Mac crashes more often than not it’s because of Flash. No one will be using Flash, he says. The world is moving to HTML5.
It’s a toss up for me at this point. I have been using Flash since Future Splash, I know code, I know business, and don’t believe this is a win for Jobs by keeping the iPad or iPhone closed. All he has to do is open up the code and let us do the rest. It’s easy to Monday morning quarterback I guess, but calling Adobe lazy isn’t going to help even if they were lazy.
If he can’t open the iPhone or iPad maybe an un-bloated version of the plug-in could be created for these devices. The fact is that Flash is pervasive – it’s everywhere and that’s NOT going to change. Has Adobe really turned it’s back on the Apple users that really got them where they are today – yes. Should that change – yes. However, doubling down isn’t going to help and not to mention this smacks of Jobs simply protecting the iTunes Store. I mean why would we pay for movies when we could watch for free?
Critical Update: Simon WP Framework
January 25, 2010
There were issues with the Featured Post functionality and it was fixed.
Check out the changes below or go to the WP Framework page.
Change Log
01/22/10 – v.1.1.6 Critical Changes
Fixed Featured Post on Home Page
Sign-up for Webmaster Services
January 21, 2010
I provide Webmaster Services to current Clients.
Websites often lose luster over time because of many reasons. Mainly, websites suffer because the owner either doesn’t have the time to maintain the website the right way or the technical know how. We know that users frequent the more effective websites that are updated often with fresh and engaging content. Owners usually don’t see the value which lessens the value of their own websites over time. Check your own experience, would you visit a website that was never updated with content that peaks your interest?
Here’s what you get:
- 12 Webmaster Hours
- Web Design & Development
- Flash Animation
- Logo Design
- WordPress Themes
- Search Engine Optimization
- Usability
- Information Architecture
- Traffic Analysis
- Content Additions
- Custom Needs
Maintaining an online business isn’t easy, but it’s now easier for you to succeed. I am credible and flexible to your needs. By signing up for my Webmaster Services you are guaranteed attention to detail and a wide array of services for a below market fee.
Updated: Simon WP Framework 1.1.5
January 19, 2010
Happy New Year all, I have updated my WordPress Framework and blank theme. Please see change log for improvement details. Just reiterate the purpose of this framework / blank theme is so that designers can have a base theme from which to build and deploy themes for their clients rapidly.
In the near future I will be adding:
- Post images on the home page with excerpt
- Calender Date Stamp
- Sticky Footer
- Facebook Login
- Lightbox Integration / Ajax Implementation
- Inline Pagination
- News Ticker
- and more
Please feel free to email if you need any help.
Download Simon WP Framework
Font Stacks
December 22, 2009
What’s in a font?
A Font Stack is an array of fonts that could possibly be used by the Client browser to render a website depending on the Client OS and what fonts are installed on the Client computer. It’s not a one size fits all, but it is the ability to control what fonts are displayed from best to worst case scenarios.
Why does it matter?
Font Stacks are critical in the design of a website and while widely overlooked or relying on what Dreamweaver may recommend it’s better to come up with your own. With more and more Clients updating their computers the more fonts we have to choose from.
How do Font Stacks Work?
Below is a diagram of how a Font Stack works
Here’s what Dreamweaver provides in terms of CSS “font-family declarations”. I use these as a starting point:
font-family: Verdana, Geneva, sans-serif;
font-family: Georgia, Times New Roman, Times, serif;
font-family: Courier New, Courier, monospace;
font-family: Arial, Helvetica, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-family: Arial Black, Gadget, sans-serif;
font-family: Times New Roman, Times, serif;
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-family: MS Serif, New York, serif;
font-family: Lucida Console, Monaco, monospace;
font-family: Comic Sans MS, cursive;
Below is a recommendation for a Helvetica Font Stack:
font-family: ‘Helvetica Neue’, Helvetica, Arial, ‘Frutiger‘, ‘Univers’, sans-serif;
Example when all fonts are present:
There is a lot more we can do as Designers to provide better Design online to our Clients and understanding Font Stacks goes a long way in doing that.
Other Font Stack Resources:
Better CSS Font Stacks | Unit Verse
On top of that, CSS gives us a nice little thing called a font stack. ….. What “stack” would you recommend for someone who is being forced by ignorant …
font-family.com :: find the right font stack
What is font-family? Find the best font stack for your needs. Share great font stacks with others. Learn More. Increase Your Font Stacks With Font Matrix …
24 ways: Increase Your Font Stacks With Font Matrix
detect what font-family has been applied by the browser and set a class on the body … I totally agree with the idea behind this and a larger font stack in …
Code Style: Font stack builder:
Use the Code Style font stack builder to create robust CSS font-family declarations. The font stack builder shows the probability that your preferred fonts …
CSS font-family property
The font-family property specifies the font for an element. The font-family property can hold several font names as a “fallback” system. …
PSD 960 Grid Template
December 20, 2009
In an effort to rapidly deploy comps to Clients I created a Photoshop Template to start from. The PSD contains guides, margins, gutters, 3-columns, etc. Please feel free to use as you please.
Hire Us!
There are some projects that go beyond demanding into almost impossible...If you have a project that requires attention to detail, versatile creative skill-set, fast turn around, and yet still affordable contact me to get started building your web page. Get started today!
