A look at the latest design changes introduced with iOS 7 that are noteworthy to IBM XPages mobile development.

1. www.redpilldevelopment.comlearn. do. dream.
Modern Domino
iOS 7

2. www.redpilldevelopment.comlearn. do. dream.
iOS 7
• Modernization is a journey. And on September
20, 2013 the journey changed once more with
the release by Apple of its latest mobile
operating system, iOS 7.
• Apple have long been a trend setter when it
comes to defining the modern user experience
having launched a series of innovative products
such as the iPod, iPhone, and iPad.
• With iOS 7, Apple have delivered the first
significant change to its mobile UI since the
iPhone was first released in 2007.
• So just how significant is iOS7? In the first five
days after its release over 200 million devices
upgraded to iOS 7!
• The following is a summary of some of the key
design changes introduced by iOS 7 that should
be considered when designing modern Domino
applications.

3. www.redpilldevelopment.comlearn. do. dream.
User Interface
• The overall look and feel of iOS 7 is
much flatter and lighter.
• Changes made include borderless
buttons, translucent bars,
increased use of animation, and
the introduction of full screen view
controllers.
• Gone are the graduated blue
headings and black navigation bars
which made previous iOS
applications easily recognizable.
These are replaced with lighter
backgrounds and frequent use of
translucency.
• A new gesture (swipe left) is used
as an alternative to the back
button.
• Touch points are now often
denoted with circles.
• Apple have updated is UI
guidelines that carefully outline
how an iOS 7 application should be
designed.

4. www.redpilldevelopment.comlearn. do. dream.
Bars
• The various bars that appear at the top
and bottom of applications now have a
much cleaner look.
• The icons have been changed to favor
icons that are line-based rather than
solids.
• The default font has changed to
Helvetica Neue.
• iOS7 introduces the concept of a tint
color. This is applied to the navigation
options in the navigation bar, selected
icon in a tab bar and to color the icons
used in tool bars.
• When using Safari the tool bar is
hidden when scrolling down allowing
more content to be visible. By tapping
on the bottom or scrolling up the tool
bar reappears.
Navigation Bar (Heading)
Tab Bar
Tool Bar

5. www.redpilldevelopment.comlearn. do. dream.
Picker Views
Picker views lets the user chose between values by spinning a wheel on
the screen.
• Building on a theme of constant motion found throughout iOS 7, the
various pickers have been updated to provide a new look for the
choices spinning in and out of view.
• The color scheme is dramatically different, as can be seen by the
comparison below.

6. www.redpilldevelopment.comlearn. do. dream.
Search Bars
• The default search bar now
features a more prominent
Cancel button that conforms
to the iOS 7 approach of
providing borderless buttons.
• Search scope options are
similar in style to segmented
tab bars.
• The overall look and feel of
the search bar is based on
the tint color used within the
application.

7. www.redpilldevelopment.comlearn. do. dream.
Action Sheets
The action sheet provides a
mechanism for selecting actions
(gestures) to run against the
current content.
• The action sheet now has a
translucent background and
container borderless buttons.
• The tint color is commonly used
as the text color for the choices.
• In some applications we see
actions that have a destructive
effect (e.g. delete) adopting an
alternate color (e.g. red).

8. www.redpilldevelopment.comlearn. do. dream.
Advanced Gestures
The mail application provides a
good example of a range of ways
in which gestures can be
supported outside of Action
Sheets.
• When editing lists, tap zones
are denoted by circles on the
left to select multiple items
• A drag icon on the right can be
used to re-order items.
• When no items are selected
an action to select all is
displayed in the toolbar.
• When one or more items are
selected a new set of actions
are displayed for the selected
items.

9. www.redpilldevelopment.comlearn. do. dream.
Notification Center
Notification center provides a design
pattern for Notes applications to keep
users informed of content that is relevant
to them. Changes made iOS 7 are
therefore noteworthy.
• The notification center has been
enhanced. Content is now split into
three tabs for Today, All, and Missed.
• The (new) Today tab is designed to give
you a summary of your day.
• Also new, the Missed tab collects
notifications you receive and don’t act
upon.
• Unlike many other iOS 7 widgets,
notification center is still presented on
a dark background.

10. www.redpilldevelopment.comlearn. do. dream.
Mobile Platform Support
jQuery Mobile
• jQuery focuses more on providing a consistent
look and feel across platforms so we would not
expect iOS 7 to have any immediate impact on
its design.
• Third party vendors may provide iOS themes
for jQuery Mobile
Dōjō Mobile
• dojo provides specific theming for iOS and
android devices.
• At this time there is no indication if/when dojo
will provide an updated user experience for
their iOS theme that matches the iOS 7 design
guidelines.
XPages Mobile Controls
• Domino 9.0.1 is likely to be release at the end
of October. The release will contain
improvements for mobile controls but it is
unlikely the design team will have had time to
make any changes based upon iOS 7.
• The XPages mobile controls are based on dojo.
It is therefore likely we will see a lengthy delay
between the iOS 7 release and dojo Mobile
controls being updated and then a further
delay before these are released in Domino. It
will be interesting to see how long it takes
before an iOS 7 theme becomes an option out
of the box with XPages Mobile controls.
• Domino 9.0.1 is likely to provide better support
for themes for mobile applications giving
developers more options for building the iOS 7
UI into their own applications. If Keeping your
Domino mobile applications modern is
important to you then this would be the best
path when using XPages mobile controls.

11. www.redpilldevelopment.comlearn. do. dream.
Mobile Platform Support
Kendo UI Mobile
• iOS7 support for Kendo UI Mobile
was released on the same day as
iOS 7! So if you are looking for a
third party HTML 5 mobile
framework that keeps your Notes
applications at the leading edge of
“modern” this framework should
be considered.
• Support for iOS 7 features include:-
– A new iOS 7 theme
– Native scrolling support
– New iOS 7 transitions
– Support for tint color
– New swipe gestures