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

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

Tablets Are Not Phones

by cdwise 25. December 2012 04:14

Some folks are attributing Microsoft’s decision to drop Expression Web in favor of “apps” created using Visual Studio and some future “design” integration  is based upon statistics like these: statcounter.com mobile_vs_desktop While I agree that in the future many folks will use tablets and other devices for much of the web browsing they currently do on a desktop thinking that traditional websites will no longer be of value is wrong. Think about how many people you see using laptops at places like Starbucks, on airplanes and other “mobile” locations? The folks you see with the high end laptop/ultrabook are likely to be the same people who have a tablet or two (different platforms) and they do not want crippled sites just because they are using a tablet instead of their laptop. However, they do appreciate some of the things associated with “mobile” sites – lower bandwidth and faster loading. Create your website for ease of use and speed will make all of your users happy.

Mobile and tablet doesn't necessarily mean the visitor is using a phone or "app". I've seen a backlash against serving "mobile" sites and pushing apps from tablet users. Just to give you a few links in response:

Google Webmaster Central Giving Tablet Users Full Sized Websites

When considering your site’s visitors using tablets, it’s important to think about both the devices and what users expect. Compared to smartphones, tablets have larger touch screens and are typically used on Wi-Fi connections. Tablets offer a browsing experience that can be as rich as any desktop or laptop machine, in a more mobile, lightweight, and generally more convenient package. This means that, unless you offer tablet-optimized content, users expect to see your desktop site rather than your site’s smartphone site.

 

If apps and mobile sites were the way to go you wouldn't see articles like cnet.com-how-to-view-desktop-versions of web sites on firefox for android

Linked In User Experience Group post:

Give tablet users your desktop site! Not your mobile site!

Give tablet users your desktop site! Not your mobile site! Bruce Clay's SEO newsletter this week has a great little piece in it that corresponds with a burning issue I've been having since buying a 10-inch Android tablet. More than 50% of the websites I visit using my tablet redirect me to a mobile site, or want me to download their mobile app. I HATE IT! Do you get it? Should I say it louder? I H A T E I T ! ! ! And I think most tablet users would agree. You see a 10-inch tablet can happily display most desktop-oriented websites comfortably, especially if they are using responsive design. It is irritating to open a website designed for 1600 pixel screens, but they don't usually have mobile sites anyway. What is much more irritating is to keep getting forced back into the mobile rendering, even when I request the desktop version. Are you guilty of this? Do you think specifically about tablet-based users of your websites? How do you present your site to them? Banking sites are probably the worst offenders, followed closely by airlines and flight booking sites, eBay (which is rendered absolutely useless on my tablet), major newspaper websites, but it's a very, very long list. You don't want to get me started on this. So come on all you UX designers out there, tell me why you're not thinking about tablet users when the European Travel Commission has identified that there are already 11.5 million tablet users in the US alone, predicted to rise to 90.8 million by 2015.

Bruce Clay's SEO newsletter this week has a great little piece in it that corresponds with a burning issue I've been having since buying a 10-inch Android tablet. More than 50% of the websites I visit using my tablet redirect me to a mobile site, or want me to download their mobile app. I HATE IT! Do you get it? Should I say it louder? I H A T E I T ! ! ! And I think most tablet users would agree.

You see a 10-inch tablet can happily display most desktop-oriented websites comfortably, especially if they are using responsive design. It is irritating to open a website designed for 1600 pixel screens, but they don't usually have mobile sites anyway. What is much more irritating is to keep getting forced back into the mobile rendering, even when I request the desktop version.

Are you guilty of this? Do you think specifically about tablet-based users of your websites? How do you present your site to them?

Banking sites are probably the worst offenders, followed closely by airlines and flight booking sites, eBay (which is rendered absolutely useless on my tablet), major newspaper websites, but it's a very, very long list. You don't want to get me started on this.

So come on all you UX designers out there, tell me why you're not thinking about tablet users when the European Travel Commission has identified that there are already 11.5 million tablet users in the US alone, predicted to rise to 90.8 million by 2015.

This is why I think Microsoft has made a big mistake. The future of the web is not device specific apps nor is it a low quality site. That's the whole premise behind responsive design

3 Ways to Approach Website Optimization for Tablet Visitors

While some marketers may feel that they can implement the same strategies on both smartphones and tablets to increase conversion, the evidence suggests that this is the wrong approach.

It's important to understand that mobile phones and tablets are two separate channels. While it's easy to group them together, the tablet needs to be looked at as its own channel that deserves an individual and unique user experience.

These are but a fraction of the backlash I'm seeing against sending mobile sites to tablets whether they are running iOS, Android or Win 8 RT. Frankly, what makes a good tablet website is also what makes a good usable website in any modern browser. Nothing frustrates me more than getting a stripped down narrow mobile site when I'm on my iPad or having an app pushed down my throat. I've been to more than one site that before it will even load I have to decline their "app" and sometimes more than once with an "are you really sure you don't want app" before I get to the actual website. Even then I've had it send me to mobile versions at which point I usually find some other place to do what I was trying to do on that website.

Personally, I don't like having a different usually far more limited experience because I've been forced into using an app. Let me give you an example using Netflix. There is only one way I can manage everything on my Netflix account and that is by using a full featured web browser. We have a bunch of different devices all of which can be used with Netflix. Some of them only let me play what is already in my on demand queue such as the wii game console device. Others will let me search or let me browser, occasinally both - Roku and Samsung DVD player with Netflix app. iOS lets me play and search but none of the apps mentioned let me manage my account. For that I have to use a real web browser. Okay, I can use Safari on my iPad but then I can't watch the videos there because of Apple's limitation of Flash and Silverlight used by Netflix for DRM but at least by using a combination of the website and app I can get all the features of Netflix on my iPad. I haven't really explored the Win 8 Netflix app nor have I used the xBox app on my son's xBox but I suspect it will be closer to the feature limited versions of the other "devices" vs the experience on my Mac or PC.

Apps are better for some things than a website. You want to have your Office tools installed whether in an app or a program. Additional security protocols like banks need I have no problem using an app with (unlike the gentleman quoted above) but I don't want specific apps for every danged website I visit. Think about it if you needed an app for every site you have visited in the last week. How would you ever keep track of them? I've already installed a start menu replacement on my Win 8 Pro machines because I can't deal with the over 100 icons that my full set of installed programs adds to the "start screen" since every bit of every program gets its own tile

Tags:

I DON’T HATE VISUAL STUDIO

by cdwise 21. December 2012 20:31

I don't hate or despise Visual Studio, ASP.NET, IIS, Azure or any of the other products no matter what my comments in yesterday’s post may seem to imply. Nor do I think they suck. I think that Visual Studio is an excellent IDE for DEVELOPERS. You can create very good applications that do extremely complex tasks well with ASP.NET and Visual Studio but that isn't my space. Sure I can write real code but frankly, I've never enjoyed doing so not even back when I had my very first programming class in Basic back in 1974-5. Classic ASP did everything I needed and was easy to use. PHP fulfills that function for me now but I'm digressing.

There are a few developers who can produce a useable functional website with good user experience but they are few and far between just like there are some designers who can create elegant clean server side code. They are the exceptions. I know enough code not to screw up what a developer does and even rewrite some of it so that it better suits the ux/usability/accessibility needs. That actually makes me more skilled than most who work on design. I'm a member of a private community, invitation only of professional web designers/front-end developers. Less than 10-15% can or want to do more than integrate a form or address output from server side processing. That is pretty typical of the small design businesses demographics from what I've seen.

I had really high hopes that Microsoft had "got it" with the Expression toolset but even Microsoft’s choice of words confirms that I was wrong. There is a real need for web tools that are not "web development" in the sense that Microsoft has used it. The words are design, UX - User eXperience, UI - User Interface and even IA - Information Architecture. Those are what make people comfortable and able to effectively find/use the information in websites and web applications. I got into this field because back in the 90s I was a member of a group of women who all had babies about the same time. Prodigy Internet had a "beta" internet web program going on that included subscriber websites. I took all the stuff that had been circulating between our group in a envelope mailed from person to person with the latest baby pictures and scanned the photos. Then I created a site and published it to the beta hosting. Over the years I used several different programs to maintain it including AOLPress, which was the only decent piece of software that came from AOL.

I was creating sites for others by 1998 and commercially shortly thereafter using Dreamweaver. My introduction to FrontPage came because a client used it and wanted me to remake their site with it so they could maintain it. FrontPage wasn't ever as bad as many made it out to be but it was never as good as it should have been. Given its target market of information workers it was a decent enough product but always require care in using it if you were concerned about not Microsoft browsers.

Visual Interdev was a joke, Visual Studio is its successor and much better but it is still  a developer’s tool.

I joined HAL-PC when I found out they were starting a "Web Technolgies SIG" somewhere around 1999. The SIG leader had over 200 people show up for the first meeting. He started it because he wanted to learn more about creating database driven websites. He was an Access developer and was using Visual Interdev. Now Visual Interdev created truly horrible code with no usability at all using as it did the the worst bits of FrontPage “no need to know” anything about what you are tying to do canned themes and up/down, next/back navigation. The one thing he did do right was have a speaker at each session on CSS but he didn't use it himself. He relied 100% on the themes and navigation available in Visual Interdev. It was so bad I ended up creating a parallel site with a UI that would let visitors find the very useful code examples and FAQs the leader created as well as tutorials and articles contributed by various presenters. Eventually, I ended up taking over the site and as leader when he lost interest in writing code for the web.

Over the years I've tried, really tried to use Visual Studio but it doesn't make sense for what I do. It has a steep learning curve for someone who isn't a serious back-end developer. Its complexity and methodology is a good thing for programmers. It is not a good thing for whatever it is you want to call people who are design oriented. Drop a programmer into Photoshop or even Fireworks and tell them to use curves to correct white balance, use Bezier curves and do a comp with 256 layers then output with cmyk separation for the prepress and rgb optimized for the web or to css3 gradients and they will feel just as lost as your front-end designer/developer when they open Visual Studio.

EW was a breath of fresh air. Something that did a better job in many respects than any other available program. No longer did I need to use TopStyle for my CSS, Dreamweaver my HTML but there was one tool that I could use from start to finish.

When I criticize Visual Studio and/or any other of Microsoft's development tools it isn't because I think they are bad. They aren't, and some of them are extremely good but they are not design tools and never will be.

Tags:

Expression Web

Online TV



Outstanding Hosting