OS 7.1–iPhone 5s

by cdwise 21. September 2013 10:47

A few days ago I updated my iPad 3 to iOS 7 and was taken aback at the new interface. Not only do I find it fugly but also less usable as well. Some of it is downright inaccessible. Despite which I picked up a new iPhone 5s yesterday when they first hit the streets. My impression of iOS 7.1 which is available for the iPhone 5 but not the iPad 3 is better that it suits the phone better but none of my real issues were addressed.

While I’m a fan of swipes and gestures some of the changes make absolutely no sense to me. I loved how easy it was to use my thumb to not only move between screens but also to pull up the search screen since I have both business and personal contacts on my phone as well as a lot of music and audio books. Simple swipe in from the left, start typing the name and choose from the list. Much quicker and easier than opening contacts and searching or scrolling through the long lists there. Now I have to pull down on the icons to get search with Notifications dropping down more often than the search bar appearing. I had to google to figure out how to search. I also had to google to find out how to close applications when I loaded iOS 7 on the iPad. You really shouldn’t have to use an internet search engine to find out how to do something on a phone you’ve been doing for years because of an OS change. This is particularly annoying since Apple could have added the swipe down for search without removing the traditional method.

iOS 7

First, I hate the default color scheme. While I’m not a fan of black interfaces in general the very light colors and poor contrast on the iPhone of the default white or almost white text on a light midtone gray is such a low contrast I can’t believe anyone from Apple ever heard of minimum contrast for accessibility under WCAG,  §508 and similar statutes most governments around the world require. First thing I did was change the background and I’m not changing it back just to get a screenshot. So let’s take a look at a few of the new iOS 7 apps.

The absence of color in the interface is something I do not like. Okay, in a few apps like Messages it doesn’t make any real difference. Text is crisp and sharp, it is easy to tell who sent which part of the message thread. The flattened mostly monochromatic interface reminds makes me feel like I’m back in 1991 in some cases, back in 1982 b&w monitor only in others. Instead of feeling “fresh” it simply feels “old”.

I didn’t like it when Microsoft went to the flat minimal color tiles for Windows 8 and like it even less on my Apple products. Sorry Apple but you really shouldn’t copy Microsoft when it comes to design. Design and UI are supposed to be Apple’s strength. You can’t tell it from this OS.

My other color related annoyance is the colors the OS chooses as the background behind persistent icons and app groups. I’ve seen a few screenshots where someone has chosen just the right background for those areas to be attractive. Sadly, I haven’t found one in the included options nor among the over 1,000 photos on my phone. I may have to try and make one in Photoshop that will be an attractive background AND give me an appropriate static background.

My last comment about the interface itself has to do with app groups. Love the fact that you can put more apps in a group so I don’t need multiple groups with names like Photography, Photography 1. Hate the limit of 9 icons showing when the group is launched and having to scroll in groups of 9. Even on the iPhone 4 and 4s there is plenty of room for a group of at least 12 like there is in iOS 6. On the taller iPhone 5, 5c and 5s you could put 16. On the iPad it just looks ridiculous. So call this one 1 step forward for function but 2 steps back for implementation.

Notes App

From the reaction I’ve seen when I mentioned Notes on facebook and to a few friends apparently most people don’t use it but I do because it syncs to Outlook and it is always available not matter if I’m on my phone, iPad, Windows, Mac or any other device that syncs with Outlook. The original Notes app uses a simple yellow legal pad as a metaphor and background.  Text is a crisp black, hyperlinks are a dark red with an underline . The icons at the bottom of each note. Below is the same note open in iOS 6 and iOS 7.

notes006 Some of the changes such as the background going from yellow to dingy white are no big deal. Though I prefer the yellow background, whitish will do.

What really bothers me is that the hyperlinks and icons are now yellow which makes them very difficult to read. – Note: the screenshot on the right is with Settings > General > Accessibility > Increase Contrast turned on!!!

Think how bad it would be if contrast had not been increased. The only way I have found of changing the background and foreground colors is to invert the colors so you have light text on a black background. That would be something I’d do if this were the only app I cared about. However what it did to my background pictures and to many of the icons was enough to give me a headache. Heck, if Apple had even stuck with the dark red for icons and hyperlinks in this application I wouldn’t be bitching about it.

iTunes App

Next, change for the sake of change that may end up being a much bigger issue for me is the change to iTunes. I listen to audio book all the time when traveling, exercising and yes, even when working. This means that sometimes I want to rewind a bit because I missed something. In iOS 6 backing up a 4 minutes or going back a chapter or two was easy. The current chapter playing has a nice wide bar for only that section of the book as you can see in the image below.

007003Chapter 12 is 17:30 long and it is easy to move the player within that short section.

If you want to go to a different chapter switch to the list view and all the chapters are laid out in a nice neat list. Simply select the Chapter you want to hear.

With iTunes in iOS 7 all that easy functionality is gone.

bookbook2Now instead of a per chapter play bar the entire length of the book is condensed to the width available. What was once 17:30 in Chapter 12 to move within is now 5:36:54 seconds. Try to move back 3 minutes with your finger when there is that much time is such a small space.

No more nice breakout by chapters in list view anymore either. Instead you have “songs” on an “album”. Which may work well for music albums where song length rarely exceeds 6 minutes it is a terrible interface for recorded book, lectures and other audio forms. There goes easy navigation.

Weather App

This is the last app I’m going to mention that has changes I could have done without. My son also mentioned it as one he was particularly unhappy about. 002weather

Nice large easy to read in iOS 6. A simple swipe down gives you hourly forecast when you want it.

The new version – white text on medium background. Sure the current temperture is easy to read but the forecast for the following days – not so easy. The raindrops in the original are  easy to see at a glance but barely discernable in iOS 7. Not to mention hollow outlines of clouds with spects to indicate rain require you to look closely to tell what they mean. The colors and contrast in the original app require no such close scrutiny.

Control Center

notificationThis is a much better implementation in many ways than the simple audio controls that would come up on a locked screen in iOS 6. The ability to access many common tasks without launching an app or going through multiple screens under Settings IS a significant improvement. However, the same low contrast issue I’ve had with iOS remain.

Kudos to Apple for putting the ability to turn off and on different types of connections, airplane mode, adjust audio, take a photo and turn on the flashlight quickly and easily.

I just wish there was a little more thought taken for accessibility. White text on a light midtone background. Tell me how easy it is for you to read the airdrop and phone setting options in the screenshot on the right?

In your quick settings – white means it is enabled and the darker gray means that it is disabled? That’s backwards from every convention I know of where you gray out what is not available.

iPhone 5s – Hardware

Now that I’ve summarized what I think of the software let me give you my impressions of the hardware.

First, the feel of the phone is fantastic. I never thought of my iPhone 4s as heavy but compared to the 5s it sure is. There is a significant and noticeable difference in weight that really surprised me.

The high resolution screen is crisp and sharp – the only thing that makes the flat bland low contrast colors of the new OS even remotely tolerable. If I could go back to the UI of iOS 6 I guarantee that I would.

Fingerprint reader – extremely accurate once you invest in the time it takes to enroll your fingers. That’s one of the reasons I went for the 5s not the 5 or 5c. The other was the speed of the processor. It flies in comparison to my older 4s.

Conclusion

I’m extremely pleased with the hardware and hope that Apple fixes the OS quickly. I’ve had my reservations about iOS 7 ever since I saw the first screen shots. Those reservations proved to be not only accurate but if anything the iOS 7 is worse than I expected from those screenshots and reviews. Change for the sake of change is usually a bad thing – this OS proves it.

Tags:

Accessibility | iphone

Replacing FP Hover Buttons

by cdwise 22. May 2013 09:55

This tutorial was created to show how easy it is to use buttons without using the deprecated FP Hover buttons. You can continue to use the button styles you are currently using but reduce your page code and speed up load time by replacing them with simple css and 3 buttons reused for each menu link. View the finished menu.

First create a hover button using the spacebar for the maximum number of letters you expect to use for your link text.

The person I created this tutorial for used the "glass" style button in blue so I'm also using it.  I generated three states for the button which look like:

link state over state  active state

Then I created an unordered list of links since lists are the proper mark-up for most menus. By default the menu now looks like:

To set these links apart as a menu the first thing I will do is to assign the list in an ID of menu. This allows me to target only those links in the menu for the new link styles.

#menu {
width: 7em;
margin: 0 auto; }

First thing I will do is create a #menu div to center the new menu in the #sidebar and provide a way to target just those links in the menu using descendent selectors and inheritance.

T to remove the list-style-item and remove all default margin and padding applying the following css:

#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

Which leaves me with a clean list that looks like:

list default styles removed

Next we create the default link style setting the background image to the link state image created above. Before I do that there is a choice I have to make. The traditional one which is to set the sizes for the image in pixels and text also in pixels so that they will match what the old hover buttons did however that will make it impossible to scale the text very well.

The alternative is to scale in ems which means we need to convert the pixel size of the image to ems. To do that you divide the width by 16px. That means that our 100px images above are 6.5em but since that was rounded of a bit I increased the width slightly to 6.75em and centered the image. I also set the line height to 1.25em (20px in the image) so that the text would be vertically aligned properly.  It also means that the image quality will degrade if they are scaled up too high but the text will remain sharp. I'm going for the second approach.

So now my menu link css is:

#menu a {
text-align: center;
line-height: 1.25em;
font-size: .9em;
width: 6.75em;
display: block;
color: #000080;
text-decoration: none;
margin-bottom: .75em;
background: url('images/over.jpg') center no-repeat;
}

Which looks like:

default menu

To get our rollover state we need to define the hover pseudo class for the menu which would be:

#menu a:hover {
background-image: url('images/over.jpg');
}

That's all it takes since we are not changing the link text or color. If you wanted to change the text color to say black on rollover you would simply add "color: #000;" to the style definition.

The final step is to create an active class that you would apply to the link for the current page. In this case I'm going to use black as the text color and the active image created earlier. So my active class would look like this:

.active {
background-image: url('images/active.jpg');
color: #000000;
}

To demonstrate its use I have added the "active" class to the link for this page to the menu in the left column. You will notice that it has black text and a darker button.

You now have the look of the buttons without the overhead of multiple states for each link and no JavaScript is required.

Tags:

Tutorial | Expression Web | CSS

New Event Template

by cdwise 22. March 2013 22:33

I put together the first template (besides the Muse example) that has a separate display for small screen devices and uploaded it today. Check it out Team Clueless Rally

team-cluelessI used a scooter rally for “Team Clueless” which is a bit of an inside joke related to the Scooter Cannonball held bi-annually where folks are  challenged to ride scooters coast to coast with vintage scoots being ride of choice by the organizers. Because of the handicap system new and particularly larger displacement scoots would have an extremely difficult time winning so an alternate no handicap, no winner alternative had been playfully suggested.

The result was “Team Clueless” so I thought I’d use that premise for the latest template. It was also inspired by the distances some folks travel to events like Amerivespa and other rallys whether they are a scooter, motorcycle or car rally.

By swapping out the images and text you can use this template for any event whether it is a one day or multi-day activity.

Web Fonts

@fontface with Google web fonts provides the display font for the masthead in order to allow for a fancier type without having to worry about what fonts are installed on the visitor’s system.

CSS 3

CSS 3 rounded corner and box shadows are used in various places which will give a bit more life the site in modern browsers while still displaying with square corners and no shadows in older browser.

A CSS class was used to make the images scalable on small screen.

Media queries serve an additional stylesheet to phones and other small screen devices. Higher resolution/larger screen tablets get the same experience as a desktop user. To accomplish this with the registration form a little extra trickery had to be in the head section of the page which is documented on the register.html page in the site itself.

Let us know what you think of this new template. Available for download from our Template page.

Tags:

Templates

A New Look

by cdwise 15. January 2013 21:16

I Since you are reading thing I’m sure you must have realized that this site has undergone a major change. If you thought it was bright before well its even more so now.

It has needed some serious updating for a long time. The last major change was when we moved off of Community Server – same basic platform Microsoft is using for their MSDN forums (enough said?) to BlogEngine.NET. For our purposes Community Server was not only far more than we’d ever need it was also cumbersome to modify. Okay, if you are a Visual Studio devote who thinks that C# is the cat’s meow you probably feel different. Like most front-end folks I don’t want to have to fool with the backend of the site anymore than I have to. Okay, I could have created a traditional site but since I thought it might be nice to let people comment on posts (what was I thinking?) it seemed some sort of blog or CMS would be appropriate.

So I originally settled on Community Server for a couple of reasons. First, they had a “free” community edition and the generous folks at telligent offered an upgrade to Microsoft MVPs. So I took them up on it. Unfortunately, while Community Server is a very good enterprise level system I’m not an enterprise sort of person. It took the good folks at orcsweb to get it installed on their hosting service to get it up and running with all the correct permissions.  I kept using it for a couple of years through at least one upgraded version before deciding that Community Server was not only overkill for my needs but since this is a volunteer “in my spare time” sort of site I didn’t have the time to master the skills necessary to make it do what I wanted how I wanted it.

So since I was getting a special offer to Microsoft MVPs from orcsweb I went looking for another asp.net based solution. That’s where I found BlogEngine.NET.  A much, much simpler solution that used XML files instead of a full fledged MS-SQL database. Ah, something I could work with to customize in Expression Web. A much better fit for me than an application that required Visual Studio to successfully modify. The folks at orcsweb helped with database back-up so I could extract content already published through Community Server.  That was sometime in 2008. The site hadn’t a redesign since. Sure I had downloaded and worked locally with newer versions of BlogEngine.NET but somehow I never got around to migrating site content to a newer version.

Over the years some of the links had moved and video tutorials were hosted elsewhere due to bandwidth constraints. Which caused some issues with content being “lost” and links broken. Still, a bandaid was put on and “updating” this site was still on the back burner. When considering New Year’s Resolutions I decided to move a new site design to the front of the list. Not just because it was well past time to do so but also because I had resigned as a Microsoft MVP and as a result knew I should move off OrcsWeb.  Something I would have preferred not to do since they are without doubt the best web host I’ve ever used in the 20 years I’ve been creating websites. However, with Microsoft announcing end of life for Expression Web and my no longer being an MVP it seemed to be the best thing to do.

That brought on a whole new round of what should I use for Expression Web. I thought about migrating over to WordPress since that is the platform I use most often. I even exported this site’s content and imported it into a more or less generic default WordPress site. Then out of curiosity I took at look to see where BlogEngine.NET was in its development. After all one of its big attractions initially was how easy it was to work with. Guess what? It’s still easy to work with and  while I’ll probably find some bugs I figured I’d give it a go for a bit. If it doesn’t work out I can always move over to WordPress.

orcswebI want to reiterate my thanks to the folks at orcsweb for the help and support they  have provided over the last 7-8 years. I cannot recommend them highly enough. If you need a web host with superb support, one that needs the ability to scale, or your website is mission critical you cannot ask for a better company to do business with.

Tags:

Misc

EW 4: New Tutorial Series

by cdwise 14. January 2013 17:13

I’m in the process of creating a new set of tutorials for Expression Web 4 because now that it has become a free program from Microsoft there is an influx of people who have never migrated from FrontPage (discontinued as of version FrontPage 2003)  as well as other people who are using a professional web editor.

While there will be a video on building this website:

camp-escalante

I start a new tutorial series by creating scripts for each video. Since it may take some time to get them all recorded and edited I will be creating text based tutorials using each script and screenshots. This series will start with configuring Expression Web and creating a local site. The first 3-4 should be posted within the next day or two since they are almost ready to go.

Tags:



Outstanding Hosting