WEBVTT

00:00:01.080 --> 00:00:05.110
So what's the trend for
mobile websites in 2016?

00:00:05.110 --> 00:00:10.240
It's all about how it looks on
your phone or on your tablet.

00:00:10.240 --> 00:00:13.400
Both app designers and
responsive website designers

00:00:13.400 --> 00:00:16.550
are focused on the experience
of the mobile user.

00:00:16.550 --> 00:00:19.310
If there's one thing in
common among these devices,

00:00:19.310 --> 00:00:23.180
it can probably be summed
up with one phrase.

00:00:23.180 --> 00:00:24.692
Visual interest.

00:00:24.692 --> 00:00:27.988
[MUSIC PLAYING]

00:00:32.147 --> 00:00:33.730
PRESENTER: Here are
the top 10 effects

00:00:33.730 --> 00:00:36.690
that have the maximum visual
impact to a mobile user's

00:00:36.690 --> 00:00:41.650
experience, all of which
fit on a very small screen.

00:00:41.650 --> 00:00:42.720
Number one.

00:00:42.720 --> 00:00:44.400
Parallax scrolling.

00:00:44.400 --> 00:00:47.300
Parallax scrolling is one of the
biggest modern website design

00:00:47.300 --> 00:00:51.110
trends of 2016, and it has
literally turned the design

00:00:51.110 --> 00:00:52.910
world on its head.

00:00:52.910 --> 00:00:55.630
Rather than the traditional
horizontally-focused page

00:00:55.630 --> 00:00:57.760
design that has been
popular for as long

00:00:57.760 --> 00:01:00.370
as there's been an
internet, parallax site's

00:01:00.370 --> 00:01:03.970
embrace a completely
vertical page orientation.

00:01:03.970 --> 00:01:06.390
Sites are often
one page in total,

00:01:06.390 --> 00:01:09.540
and traditional site
sections are stacked one

00:01:09.540 --> 00:01:12.220
on top of the other to create
a motion-rich scrolling

00:01:12.220 --> 00:01:16.420
experience that alternates
images and solid text areas.

00:01:16.420 --> 00:01:18.820
The end results can
be incredibly clever

00:01:18.820 --> 00:01:21.660
and occasionally breathtaking.

00:01:21.660 --> 00:01:23.460
Number two.

00:01:23.460 --> 00:01:25.160
Modular scrolling.

00:01:25.160 --> 00:01:28.240
Modular scrolling is another
interesting scrolling effect

00:01:28.240 --> 00:01:31.410
that allows for a more
vertical page orientation.

00:01:31.410 --> 00:01:34.730
But in this case, different
parts of the same page

00:01:34.730 --> 00:01:37.020
scroll independently.

00:01:37.020 --> 00:01:40.840
A page that might display in a
stacked format on a smartphone

00:01:40.840 --> 00:01:43.870
can broaden to a side-by-side
display for tablets

00:01:43.870 --> 00:01:47.200
and provide a compelling
visual display for users.

00:01:47.200 --> 00:01:48.930
Number three.

00:01:48.930 --> 00:01:50.890
Infinite scroll.

00:01:50.890 --> 00:01:54.080
Scrolling effects are definitely
a theme in the mobile design

00:01:54.080 --> 00:01:54.930
world.

00:01:54.930 --> 00:01:56.500
Infinite scroll
is an effect that

00:01:56.500 --> 00:02:00.650
makes pages seem bottomless
rather than just the scroll bar

00:02:00.650 --> 00:02:04.960
running top to bottom, the page
loads as the user scrolls down,

00:02:04.960 --> 00:02:09.160
continually presenting
additional content.

00:02:09.160 --> 00:02:10.280
Number four.

00:02:10.280 --> 00:02:11.720
Blur effects.

00:02:11.720 --> 00:02:13.970
Blur effects are
popular static trick

00:02:13.970 --> 00:02:16.680
that allow designers to create
a more rich and layered look

00:02:16.680 --> 00:02:18.130
onscreen.

00:02:18.130 --> 00:02:21.050
Blurred images can be
placed behind display copy

00:02:21.050 --> 00:02:24.340
in an artful fashion,
leaving content readable

00:02:24.340 --> 00:02:27.310
but adding visual
interest to the design.

00:02:27.310 --> 00:02:30.460
Blurred images are often
layered behind regular images

00:02:30.460 --> 00:02:33.430
to create more visual
impact as well.

00:02:33.430 --> 00:02:34.760
Number five.

00:02:34.760 --> 00:02:36.820
Light copy.

00:02:36.820 --> 00:02:38.880
As visual storytelling
becomes more

00:02:38.880 --> 00:02:42.880
prevalent in modern website
design, where photos and videos

00:02:42.880 --> 00:02:45.600
and infographics are
being used more heavily,

00:02:45.600 --> 00:02:48.880
large blocks of text are
becoming a thing of the past.

00:02:48.880 --> 00:02:51.370
Instead, designers
and producers are

00:02:51.370 --> 00:02:54.870
working to create a rich display
where the visuals are carrying

00:02:54.870 --> 00:02:58.500
the story with only minimal
keyword relevant text is used

00:02:58.500 --> 00:03:00.370
as needed.

00:03:00.370 --> 00:03:01.510
Number six.

00:03:01.510 --> 00:03:03.840
Swipe reveal photographs.

00:03:03.840 --> 00:03:06.290
These photographs
are invariably cool,

00:03:06.290 --> 00:03:08.630
and they provide an interesting
comparative experience

00:03:08.630 --> 00:03:10.030
for the user.

00:03:10.030 --> 00:03:13.510
They're often used for
before-and-after images,

00:03:13.510 --> 00:03:16.430
and they work brilliantly with
the smartphone's inherently

00:03:16.430 --> 00:03:18.380
swipe-friendly style.

00:03:18.380 --> 00:03:21.540
These photos create a dynamic,
interactive storytelling

00:03:21.540 --> 00:03:25.790
experience that can be
condensed into a small screen.

00:03:25.790 --> 00:03:27.760
Number seven.

00:03:27.760 --> 00:03:30.650
Interactive images
and animation.

00:03:30.650 --> 00:03:33.920
Since mobile devices
are not flash-friendly,

00:03:33.920 --> 00:03:38.160
designers tend to look for
ways to use HTML5 to display

00:03:38.160 --> 00:03:40.890
interactive images and
animation to liven up

00:03:40.890 --> 00:03:42.620
the user's experience.

00:03:42.620 --> 00:03:44.840
Subtle animation of
photographs is one way

00:03:44.840 --> 00:03:47.080
to create motion and
interest without having

00:03:47.080 --> 00:03:49.180
to actually embed video.

00:03:49.180 --> 00:03:52.760
Use of HD videos is
a huge trend today.

00:03:52.760 --> 00:03:57.510
This can explain why YouTube
has many visitors every minute.

00:03:57.510 --> 00:03:59.710
Research has shown
that internet users

00:03:59.710 --> 00:04:05.520
upload more than 100 hours
of HD videos every minute.

00:04:05.520 --> 00:04:06.650
Number eight.

00:04:06.650 --> 00:04:08.670
Rich arrows.

00:04:08.670 --> 00:04:13.130
Why have a plain old navigation
arrow when you can make one

00:04:13.130 --> 00:04:16.800
that animates or
expands to reveal

00:04:16.800 --> 00:04:20.970
contextual images related to
the content on the other side

00:04:20.970 --> 00:04:22.670
of the click-through.

00:04:22.670 --> 00:04:26.040
These arrows are aesthetically
pleasing and contribute

00:04:26.040 --> 00:04:28.760
to the greater context
of the user's experience,

00:04:28.760 --> 00:04:32.800
making them more
than just eye candy.

00:04:32.800 --> 00:04:34.810
Number nine.

00:04:34.810 --> 00:04:36.950
Sliding navigation.

00:04:36.950 --> 00:04:38.860
This navigation
technique is employed

00:04:38.860 --> 00:04:40.990
to add another
level of engagement

00:04:40.990 --> 00:04:44.870
to entice the user to discover
more information on a very

00:04:44.870 --> 00:04:46.580
small screen.

00:04:46.580 --> 00:04:48.580
By creating navigational
elements that

00:04:48.580 --> 00:04:52.380
are triggered by the
user to slide into place,

00:04:52.380 --> 00:04:55.090
designers can keep page
designs uncluttered

00:04:55.090 --> 00:05:01.310
and yet keep needed information
available with just a click.

00:05:01.310 --> 00:05:03.470
There are also many
website designers

00:05:03.470 --> 00:05:05.380
that are using
new website design

00:05:05.380 --> 00:05:07.810
trends like the
split-screen layout, which

00:05:07.810 --> 00:05:11.620
is a vertical line that is
used to represent two items.

00:05:11.620 --> 00:05:13.680
You can use it if you
have two items that you

00:05:13.680 --> 00:05:17.940
are planning to promote and they
are both of equal importance.

00:05:17.940 --> 00:05:20.710
Block grids can also be
used by dividing a web

00:05:20.710 --> 00:05:22.920
page into several blocks.

00:05:22.920 --> 00:05:26.880
The blocks can be
symmetrical or asymmetrical.

00:05:26.880 --> 00:05:27.860
Number 10.

00:05:27.860 --> 00:05:29.600
Dynamic charts.

00:05:29.600 --> 00:05:32.690
Not only do dynamic charts
add greater visual interest

00:05:32.690 --> 00:05:37.480
to a page, but they can also be
used to an even greater effect.

00:05:37.480 --> 00:05:40.930
Simple charts might load
animations as content scrolls

00:05:40.930 --> 00:05:43.890
into view, but more
complicated information

00:05:43.890 --> 00:05:46.030
can be communicated
very effectively

00:05:46.030 --> 00:05:47.900
by presenting facts
that are revealed

00:05:47.900 --> 00:05:52.140
to the user in a specific
and controlled fashion.

00:05:52.140 --> 00:05:54.230
The website redesign
process involves

00:05:54.230 --> 00:05:56.300
using the best
mobile website design

00:05:56.300 --> 00:05:59.060
while leveraging brief content.

00:05:59.060 --> 00:06:01.510
Focus on the performance.

00:06:01.510 --> 00:06:04.410
A website that can support
access to mobile devices

00:06:04.410 --> 00:06:07.530
has an advantage due to
the many advanced features.

00:06:07.530 --> 00:06:11.230
For instance, the use
of touch screen and GPS.

00:06:11.230 --> 00:06:13.900
The mobile experience
is still in its infancy,

00:06:13.900 --> 00:06:17.510
but if modern website design
trends are of any indication,

00:06:17.510 --> 00:06:21.300
the internet will be an
increasingly visual experience.

00:06:21.300 --> 00:06:24.090
Of course, trends come and go.

00:06:24.090 --> 00:06:26.370
And the latest technology
is replaced with something

00:06:26.370 --> 00:06:28.900
newer and better every day.

00:06:28.900 --> 00:06:31.570
But it definitely
seems that our devices

00:06:31.570 --> 00:06:34.510
are going to be more centered
around looking and touching

00:06:34.510 --> 00:06:39.090
and less about just reading
as we move into the future.

00:06:39.090 --> 00:06:41.660
Does a compelling website
design increase traffic

00:06:41.660 --> 00:06:43.190
to your business?

00:06:43.190 --> 00:06:45.170
A plethora of
research and studies

00:06:45.170 --> 00:06:48.000
have shown that a well-designed
website will increase traffic

00:06:48.000 --> 00:06:49.920
into any business.

00:06:49.920 --> 00:06:53.140
This means more customers
and higher profits.

00:06:53.140 --> 00:06:55.650
If you have an improved
website interface,

00:06:55.650 --> 00:06:59.590
you'll be more likely to get
new businesses at a high rate

00:06:59.590 --> 00:07:01.950
and increase conversion.

00:07:01.950 --> 00:07:05.200
Is your business keeping up
with the changing of times?

00:07:05.200 --> 00:07:08.080
Have you adopted the best
mobile website design

00:07:08.080 --> 00:07:12.390
trends to help boost the overall
performance of your business?

00:07:12.390 --> 00:07:15.790
For more information,
download our white paper

00:07:15.790 --> 00:07:19.600
"How Video and Interactivity
Create ROI," and don't

00:07:19.600 --> 00:07:21.880
forget to subscribe.