Pass or Fail: Apple Releases Disappointing IOS6 Update

There has been anticipation of Apples realease of IOS6 for some times, and yesterday the world got their chance to grab the latest update. Sadly, the update was not worth the hype it was given.

applemapsThe biggest changes were the exclusion of a native YouTube app (owned by Google) and the replacement of Google Maps with an Apple owned native App.  We are all aware of the “war” going on between Apple and Google over the operating systems, but to drop the worlds #1 and most used Maps and Video Sharing systems is downright stupid on Apples part.

This topic has been hot in the blogosphere over the last day or so, as can be read about on “the verve“, “NY Times” and “Marketwatch“.

Those who updated their devices and tested the maps have found it lacking in every aspect.  There are entire streets missing in some areas and the “fancy” improvements (as Apple would refer to them) such as fly overs and turn by turn navigation are only good if you have a 4S or 5 product, so they have once again left the 3 and 4 users out in the cold.  Those users with the TomTom app on their earlier devices would argue that it has nothing to do with the devices not being fast enough either, it’s simply Apple’s business plan – upgrade your device or be screwed over left behind.

Those users of YouTube will be very pleased with the App that Google created recently that in my opinion is better than the native app that came on the earlier IOS releases.  There is also talk that Google have created a Google Maps app and are awaiting approval from Apple, so the question is whether Apple will do right by their users and approve it, or risk upsetting them en mass.

Then again, history shows that Apple don’t need to go out of their way to satisfy users, as the vast majority will blindly follow them regardless of how good or bad a product they release.

Pass or Fail?

An absolute fail!  The update may be an improvement in the eyes of Apple execs, but to this iPhone user it is a massive step backwards.  Personally as soon as I can i’ll be dropping my iPhone and replacing it with an Android system.

Other stories about the IOS6 Update:

BBC News – New Apple maps app under fire from users
PC Mag – 6 Ways Google Maps beats Apple Maps

Share This:

CSS Tips: How To Create Buttons Using CSS

cssbuttonsA long time back buttons were all the rage because it took some pretty nifty javascript knowledge to make them work. But that’s changed thanks to the power of CSS.

Buttons can be highly effective ways of highlighting links on your website, or displaying a “call to action”. In my experience people are often drawn to buttons more than standard links.

There are a few different ways you can use CSS to create buttons. The method that I tend to use most (and one of the simplest) is by using CSS to created class on an A tag.

The CSS Code:

a.button {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #CCC;
padding: 2px;
text-decoration:none;
text-align:center;
}

a.button:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

The HTML Code:

<a class=”button” href=”#”>Button</a>

Explanation:

First of all you will notice that there are 2 elements to the CSS.

The first is the actual styling for the A tag. This is the core design of the button, including the width, colors, shading etc. You will notice that I have given my elements a class called “button” by adding .button after the a in the CSS. This enables you to create multiple buttons of different styles using different class names (button1, button2, orangebutton, bigbutton, etc). In the code I have used i’ve set the background to light grey with a solid background that will be 8am wide. Virtually all this CSS is fully customizable. In fact, the only thing that you should keep intact is the “display:block” section.

The second section of the CSS refers to the hover effect of the button. What this does is tells the browser what to change after the mouse “hovers” over the element. Again, you will see i have connected it to the same class as the first section by giving it the .button class. The top / left elements will move the button slightly on hover and the border will change accordingly to give a hovered 3D effect. Hover over the demo button above to see how this works.

When you add the HTML code to your page, simply give it the relevant class (see code above) to match it all up and create CSS magic!

Want to fancy it up? Try adding rounded corners to the a.button section (ie. border:radius:4px;) to give a web2.0 type look and feel.

Helpful Links:

Webcredible (page includes CSS buttons)
Speckyboy CSS Styled Buttons

Share This:

CSS Tips: Hack To Fix The IE Padding / Border Width Issue

If you’ve used CSS a bit you’ll recognise the problem where Internet Explorer includes the padding and border into the width of the element.  One of the most popular methods to get around this is to use the Box Model hack method.

ieThe problem is that when IE renders the page it often Includes the width of the padding into the element instead of adding it on as many other browsers.  This over the years has caused much frustration.  It would be easier of course if IE just used the same rendering methods as the others, but Microsoft will do what Microsoft does, right?

So, here is another method that I find quite handy from time to time, which i originally found from the great people at Webcredible.  This method uses a second width command in the CSS that is only viewable by IE, allowing you to essentially create an “If Then Else” type method within your CSS (ie. IF you use IE use this code, ELSE use this code).

The CSS (example):

padding: 2em;
border: 1em solid black;
width: 30em;
width/**/:/**/ 26em;

As with most types of code the second command will overright the first command, so as the browsers read through the CSS and read the padding, border etc they will come to a point with 2 width variables.  So how does this work without a) breaking the page or b) causing duplicate CSS styles?

Webcredible sum it up best:

“By placing empty comment tags (/**/) before the colons, IE5.0 will ignore the command. Likewise, by placing these empty comment tags after the colon, IE5.5 will ignore the command. By using these two rules in conjunction with each other, we can hide the command from all of IE5.x.”

Essentially what we are doing is telling 2 different rendering systems to display the content the correct way.  For IE, we’re saying, “hey, display the element 30em wide with an internal padding of 2em on all sides, to display a total width of 30em.”.  Likewhys, for non IE browsers such as firefox, Chrome etc we’re saying “make the element 26em wide and then add another 2em padding onto each side, giving a total width of 30em”. 

The method varies but the outcome is the same.

Share This: