Web Design Tips, Tricks & Fixes Volume 1 V413HAV

V413HAV
V413HAV
V413HAV
V413HAV
V413HAV
Tips 1 Tricks 1 Fixes
.............. _ 'ress
..
screen
Hate it when you f1 nd WP theme you
love, but then real 1se it looks awful on
smartphone? We fix that here
toolsl WordPress
Limbo
HeiJo worldl
!!tot111t. l1da 1r t. &iit or

<Above>
The site stilllooks exactly like Twenty
Ten, despite the chi ld theme having
activated
200 Web Design Tips. Tricks. & Fi xes

obll e devices are eating
away at the visitor logs for
websites all over the
internet . Sure. most si tes
will look
your but it's
to have to
zoom to actually read
right? This
of
websites are more ever. obviously
this is you don't to miss out
There are ways to make your website
lf we look at WordPress, you' ll see there are
several of your
site. Not everybody to use thOLJgh.
this tutorial we use media queries to make the
theme That is to say, if the
visitor is via small we'l l make the
t heme adapt. we to the
template itself wit h our edits. we'l l create child
theme to keep separate. Let's get started!
01
Make child theme
First of all we to create child theme. As
implied. child themes rely themes which
that that appear the child
will loaded from t he child t heme sits its
folder is activated jLJSt
like other theme. First. create folder called
fi le cal led style.css.
the code:
001 f*
002 Theme Name: Twenty Ten Responsive
003 Theme URI: http://tdh. me/wordpress/twenty-
ten-responsive/
004 Description: child theme that makes
Twenty Ten responsive.
005 Author : Thord Daniel Hedengren
006 Author URI : http: //tdh.me/
00 7 emplate: twentyten
008 *f
009
010 @import url(' .. /twentyten/style.css');
011
02
Activate the child theme
Use of WordPress that
has the Twenty Ten theme. which is shipped with
WordPress default but also from
wordpress.org/extend/themes/twentyten Upload the
folder to
activate the Twenty Ten Responsive theme from withi n
WordPress. You'll notice that the site looks just like
at this we
but import stylesheet.

..... -- ...
Hdowoctol
-
--
.... 1
.... .....

'
-
<Above>
This is easier to read on screen, but it's not
exactly very pretty yet ...
<Right>
lt's amazing what little padding can do, but don't overdo
it; make sure the amount works with the screen width
03
We need header.php too
Before we do any fun stuff with media
queries in style.css we first need to add t iny of
code to header.php. Touching Twenty Ten itsel f is
no-no. so the header.php fi le from the wp-content/
themes/twentyten/ folder and place it in the twentyten-
responsive folder. ln the meta section of our own
header.php, around line 14. add the following line which
wi ll let us play wit h t he viewport:
001 <meta name="viewport'' content="initial-
scale =
/>
002
04
Decide the media queries
ln this t utorial we're not going for fully fiLJid
version of Twenty Ten but rat her adapting the layout for
var ious set widths. The default si te width is
which most modern displays will to handle.
We'l l have media query for width and up. and
then we' ll add some addit ional rules for and up.

-' ... .,
worid!
.. _

The next step is and then we' ll go over the
width rules as wel l Cie the defaul t width).
05
Set up the media queries
Wi th our plan decided. let's start to write the
media queries. This is done in the child t heme we set up
in step 1 since all edits should kept free from the
parent theme. Open style.css from the twentyten-
responsive folder and add the following quer ies Do
read the comment ing wi thin the code for quick insight
as to what each media query is meant to do.
001 f* ===============
002 MEDIA QUERIES *f
003
004 f* 320 and up *f
005 @media only screen and (min-width: {
006
007 f* This goes for everything 320 pixels
017
018 f* From 481 and upwards *f
020
021 f* For screens 481 pixels and wider *f
022
023 }
024
025 f* From 640 *f
027
028 f* Special styling from 640 pixels and
up *f
029
030 }
031
032 f* 980 and up *f
034
035 f* Where we set everything straight again
*f
036
037 }
06
Decide what to hide
The key to getting the versions for smaller
screens to both look good and work well is to make
sure yoLJ hide LJnnecessary elements. and fi nd new
places for essent ial ones. ln this example we'll hide t he
header on top up until the desktop version. and we' ll
float the right-hand column to t he bottom of the page.
Somet imes you'll better off with ot her priorit ies. but
deciding which elements are crucial is key so make sure
you think things through before touching any code.
001 f* 320 and up *f
and up *f 003
008 004
009 } 005
010 006
011 f* Up to 480 *f 007
012 @media only screen and (max-width: { 008
013 009
014 f* Up to 480 pixels *f
015
016 }
010
011
012
#wrapper {
margin: 0;
padding: 0; }
#site-title {
width: 100%;
margin- bottom: 0;
text-align: center; }
Web Design Tips, Tricks. & Fi xes 201

Helo 'I"'Otdt
013 #site-description {
014 width: 100%;
015 float: left;
016 margin-top:
017 text-align: center; }
...._._ .. ;:;:;:: .,_. .. ,...
_...,. .. _.

--
--

. --
-
1
-
_.,....
77
-
-
<Above>
Our template shown reformatted for shown here
in landscape aspect
<Left>
Our template shown in default desktop format, how you'd
expect to encount er it fullscreen
<Right>
Our template adapted for t he slimmer widt h of
smartphone screen such as iPhone, conventionally shown
in portrait aspect
039 margin-bottom: 0; }
040
041 #site-info, #site-generator {
042 width: 100%;
04 3 float: left;
-- .. . ..".
'
worldl

018 #access, #access .menu-header, div.menu, 044 text-align: center; }
#colophon, #branding, #main, #wrapper { 045
019 @media only screen and (min-width: { 046 }
020 width: 100%; }
021
022
023
024
025
026
027
028
029
030
031
032
033
034
#branding img {
display: }
div#content {
width: 100%;
margin: 0; }
div#primary {
width: 100%;
margin-top:
padding-top:
border-top: #000; }
035 #main .widget-area ul {
036 padding-right: 0; }
037
038 #footer {
08
Make it pretty for small screens
While t his simple piece of code will make the site
more viewed mobile
devices. it is in need of good deal of us.
Let's add some the media query. The
we're it here top is that we'l l
have of space later ..
001 f* Up to 480 *f
002 @media only screen and (max-width: {
003
004
005
006
007 }
.post, div.page, li.widget-container {
padding: 0 }
09
Make it pretty for slightly
larger screens
Galleries need bit of loving to look
good on smaller screens too
202 Web Design Tips, Tricks, & Fixes
that are larger t han but smaller t han
might from little more
001 f* From 481 and upwards *f
003
004 .post, div.page, li.widget-container,
#comments {
005 padding: 0 }
006
007 }
10
Reposition the sidebar
You might why we have media
query from up? The reason is t hat from this
size it works wit h the sidebar t he
side. Our is. we it to scale
appropriately, so the width will listed the form of

001 f* From 640 *f
003
004 #container {
005 width: 62. 5%;
006 margin: 0; }
007
008 .post, div.page, li.widget-container {
009 padding: 0 }
010
011 div#primary {
012 width: 32.5%;
013
014
015
016
017 }
margin- top: 0;
padding-top: 0;
border: 0; }
Back to normal
Right now, the desktop of t he si te
looks bad. much like the shown
across the page This is - we have
lot of styles after alll ln our final media we'l l set
thi ngs straight again. basically revert ing to the
Twenty Ten.
001 1* 980 and up *1
002 @media only screen and (min-width:
{
003
004 #access . menu-header, div.menu,
#colophon, #branding, #main, #wrapper {
005 width: }
011 #site-title {
012 width:
013 margin- bottom:
014 float : left;
015 text-align: left; }
016
017
018
019
#site- description {
width :
float : right;
020 text-align: right; }
021
022 #branding img {
023 display : }
024
025 #footer {
026 margin-bottom: }
027
028 #si te-info {
029 width:
030 float : left;
0 31 text-al ign: left; }
032
033 #si te- generator {
034 width :
035
036
037
float : right;
text-align: right; }
003
004 .post, div.page, li.widget-container,
#comments, . navigation {
005 padding: 0 }
006
007 }
15
Dealing with embedded
video content
Embeds something that you' ll almost have
to handle. After all, when t hey are embedded into your
width t hey'll in set widt h and most likely t hat's
wee more than the width of for
example. For embedded video this is simple enough;
just adding the code to our first media
query YouTube videos etc will opt imally
001 embed, iframe, object {
002 width: 100%; }
16
Scale your imagery
006 038 }
default the Twenty Ten theme already scales
images so that t hey t he
That t hat we have to fiddle with
t hem. but other cases you'd to add max-width
to .aligncenter and .alignnone most likely. What
Ten won't take of is images floati ng to t he left
right . which will have to scaled to make
small er
00 7 #wrapper {
008
009
010
margin: auto;
padding: 0 }
Limbo
Here's video for your enjoyment

Watch embedded videos screens ranging f rom
t o thanks to our now responsive theme
13
Single posts and pages
QLJick look at si ngle post tells us t hat the
comments need styling; at the moment. they hit the
outer of the window. Luckily this is easy
enough to take of. si nce the comments section sits
in div#comments. Remember the padding code
First the up-to-480px we'll
scale the images to 35%:
001 img. alignleft, img. alignright {
002 width: 35%;
003 height: auto; }
introduced step 7? Add #comments to it you'l l Then upvvards
The code from step 7 would look like this:
001 img.alignleft, img.alignright {
001 1* Up to 480 *1 002 width: 40%;
002 @media only screen and (max-width: { 003 height: auto; }
003
004 .post, div.page, li.widget- container,
#comments {
005 padding: 0 }
006
007 }
14
Getting the navigation
links right
lt's not just t he comments code that needs to
positioned. as elements will show up when you're
making t heme responsive as well.
such element is the navigational
Next. and up:
001 img. alignleft, img. alignright {
002 width : 45%;
003 height: auto; }
Finally. let's reset the whole t hing in the
upwards media
001 img.alignleft, img.alignright {
002 width: auto;
003 height: auto; }
to the page in as wel l as to the
17
Tighten up the menu
post on si ngle posts. We need to worry object t hat wil l need some attention is
about t hese when #wrapper is set to padding. so just t he menu. as it fit too t hings row
add the class to the same media as
you did in step 13. like this:
001 1* Up to 480 *1
002 @media only screen and (max-width: {
smartphone. Since this is mostly issue really small
screens. let 's just reduce the size and the spacing
bit . as well as the line height. lf you have an extensive
you might have to create completely
altogether.
Web Design Tips, Tricks, & Fixes 203

r1

on

ress
Soarceliles

Al l required
theme f iles
are supplied
Full step code
Sometimes you JUSt don't want that
pesky sidebar on your single posts in
WordPress. Learn how to remove it,
giving you the option to decide on its
inclusion on per-post basis
toolsl WordPress
---
-
- -
-
-
--
--
-
-
<above>
Sometimes sidebar is an
part of your post, ot her
times itjust takes up space.
Giving yourself speedy option to
remove sidebar makes sense

ome themes have sidebar their
single post views, and ot hers don' t . But
why make that decision on global basis?
Why not jLJSt decide per post ? That way
you make an informed decision on
whether or not the sidebar should
displayed. depending on the content
instead of what the t heme designer
thought was right .
ln t his tutorial we'l l first learn how to
remove t he sidebar from the template file.
and t hen LJse custom field to decide whether it shOLJ id
shown not. Finally, we'll create our own little checkbox
instead of relying on the custom field which might
bit scary for some users.
The principle for how to do this is the same for most
themes, so you should to apply t he solution to
whatever theme you are currently using.
Make an informed decision on
whether or not the sidebar should
displayed, depending on the content
204 Web Design Ti ps, Tricks. & Fixes
01
Grab the theme files
For our testing purposes we wil l using
special version of t he Notes theme, which usually
resides on http://t dh.me/wordpress/notes. The theme
is free and GPL licensed so you can build whatever you
want on it. All the fi les that you need can found on
the resource
02
Get familiar with single.php
Since we're adding the sidebar option to single
posts you need to familiarise yourself with single.php.
Basicall y it includes the header (header.php). then looks
for loopsi ngle.php and. fai ling that. fetches loop.php.
After that we'll get the sidebar (sidebarphp), which is of
course the main part we're interested in. Finally, the footer
(footer.php) rounds up the set.
001 <?php get_header(); ?>
002 <div id="content" class=''widecolumn''>
003 <?php
004 11 Look for loop- single.php,
fallback to loop. php
005 get_template_part( 'loop', 'single' ) ;
006 ?>
007 </div>
008 <?php get_sidebar(); ?>
009 <?php get_footer(); ?>
03
Remove the sidebar
Lets start removing the sidebar and see what
happens. ln si ngle.php, comment out the get_sidebar()
tag, using this expression:
001 
Beta-TDH
-
Contcnt t t (IO'it
=--"_ __
- ........ ...... _-. ...,..
... _ ...... .... -..,_...
,.........,... .............. 4 ........
_fa __ ,....__ ---
,__ ........... ...................... .....
The sidebar on the righthand side is gone on si ngle posts
There will no\N no sidebar on si ngle posts. since we
have commented that element out.
04
Finding your way
in style.css
Now that we've got rid of t he sidebar we need to make
t hings look bi t better: for instance, right now there's
huge white space where t he sidebar used to which
clearly cant remain. remedy this, litt le CSS styling is
needed. so open up style.css. Let's assume we just want
to centre the content column: that means you'll need to
locate the following line
Beta-TDH
Content test post
--
001 div.post, div.page, div.attachment, div.
hentry { margin: clear:both;
} /* pixels *1
05
Centring the post div
that we' ll break the rest of t he site. let's
just do proof of concept posit ioning the to the
centre on single.php. The full width we play with is
and t he content column is wide. That
means t hat we need to push it from the left
(to which it so it ends up in the middle.
So we need to change the
001 div.post, div. page, div.attachment, div.
hentry { ma rgin: clear: both;
} /* pixels *1
to this:
001 div.post, div. page, div. attachment, div.
hentry { width : margin :
clear:both; } /* pixels *1
06
Make the column full width
This quite do it though, as we need t he
wrapping #content column to full width. Find this line
in style.css Caround line 114):
001 div#content {float: left;}.
Next add width: 100%; using:
001 div#content {float: left; width:
Now we've got full-width which
means t hat our post div should centred.
07
Have rethink
This format works to point. but it won't real ly
suffice as it will break the rest of the site with those edits
to t he CSS. Besides. someti mes we do want to show the
sidebar our single posts. so we'll need more
solution. lt custom fields.
--
-
-
---
- -
<leU>
As you can see. the content is now cent red
<above>
Just type the name and value and click Add
Custom Field to apply custom field with
said name and value
<right>
This post has custom field names sidebar
wit h the value set t o nosidebar
08
The solution
We'l l using custom fields in the theme to do
two thi ngs. We need to check for whether the user has
chosen to hide the sidebar or lf the sidebar is
hidden. we need to use different styles so that the rest of
the site as as it is Creating the
custom field is easy. You do it right away t he Edit Post
but you might have to the Custom Field
using the Screen Options menu in t he top-right.
09
The custom field check
We' ll use get_post_metaO to fetch react to
the val ue of custom field. and control whether to
output t he sidebar or not in single.php. Replace t he
get_sidebarO tag wi th t his check:
001 <?php
002 // Is sidebar NOT set to Off we'll output
it, otherwise not
003 $custom_field = get_post_meta($post->ID,
'sidebar', true);
004 $other _value = "nosidebar";
005 if ($custom_field != $other_value) {
006 get_sidebar();
007 }
008 ?>
What we're is the value of t he custom field
sidebar $custom_field we see if the value
$custom_f ield is different from that in $other_value. set
to 'nosidebar'. So if there is custom field named
sidebar with the value Off. the if check won't true
we won't output the sidebar wi th get_sidebarO.
10
Addaclass
We also need CSS class to work wit h so that
we style on whether there is
sidebar or not. We'll put it in #content. as per the step
code. echoing the value of the custom field named
sidebar t he class. which means we'll get the
nosidebar class to play with if t hat is set.
st t lto ... ,._.. 11.. , .., ,
c..tw. , ".,,. '"' ntt Of'CI ut ct
011\r;liUif!O f \tt 1 ' llf'!U '-"' 11\VIIIR 1
' t\ttt rcc _. tt\
>1 lla Of'CI 1C1Q"C IIU. CXI"tt
1o1ata Ln HOcrcl. u\u..;1a.c eot\lt ta
tuetor tco:ll"1" t - ct
- t'"
-
.__ "'
-
-
t
,_
001 <div id="content" class="widecolumn <?php
echo get_post_meta($post->ID, 'sidebar', true); ?>
11
Styling div.nosidebar
Next. let's revisit style.css to get the styles right.
First of all. remove widt h: 100%; from and
we' ll add wit h the ful l width.
001 div#content {
00 2 float: left;
003 }
004 div . nosidebar { width: }
12
Styling div.post
We to get the div.post back to normal for all
the where there is sidebar place
001 div. post, div.page, div.attachment, div.
hentry { margin : clear:both;
} 1* pixels *1
Thanks to we pinpoint div.post when
there is no sidebar. and centre it using:
001 div. nosidebar div.post { width : 64epx;
margin-left: }
13
Fixing the comments
You'll notice the comment form isn't properly
aligned when there is no sidebar. This is easily taken
of. t hanks again to Just add the
foll owing code to style.css:
001 div. nosidebar di v#comments { mar gl n-
l eft: }.
This t he div is aligned right
the sidebar is absent .
14
Take it for spin
Thankful ly, this is all we need to get things
working, so we're get ti ng to pretty good place now.
Web Design Tips. Tricks, & Fixes 205
......
..
<leh>
post without the sidebar
<right>
post with t he sidebar
<bottom>
Here's our brand new which is l ot more
user-friendly t han t he custom field alternat ive
---
Test JIO-'it
--... -- -------
. .- .... ........ .-.. ...... .-. ...... ..
........... - .........................
.. - -----...._",_. ....... 5
..... ...... _._
--
-
Odto. qu1s tortor orct. at rtsus et congue. congue loctnto dJi,
condt corper orct. CQtt \ectus e,et 1n
. pellfn aue ot JU\to, \ ctu\ -orror. foctt,st. Duts
o1\qutt pur us
VJtputD tactn1a qwe r, tacus an eges os rst
Fonnat
toctt\ od litoro no)tra, per hi "oeos. Sed
stt t PDS- re . vest\bUlY pr\ ts \n orct tt u\trLces
posu re cuot 1\o Protn t orct cte,, nd gr.o. Lor tp $\ ,
cdipt cing urno urno u1 r dui $09, . 1 . Jn cond(

Experiment in your browser to that
everything is working as it should.
15
Add your own
Custom field boxes aren't exactly all that user
friendly, so let's create our own wit h checkbox
instead. Open fu nctions.php and inpLJt the following:
001 // CUSTOM SETTINGS
002 // custom for sidebar
003 // save the data
004
1
add_meta_boxes
1
,
005
);
006
1
Save_post
1
,

_save_postdata
1
);
007 // Add the posts

to the
right (side)
008 {
009
010
add_meta_box(

011
012
013
__ (
1
Hide sidebar?l,
),

014
015 ) ;
016 }
1
post
1
,
1
Side
1

This adds actions for the 'Hide sidebar?' we create
with add_meta_boxO. and saves the data. We want it
the righthand side. so we use the side parameter in
add_meta_boxO.
16
functionality
Output said creati ng
inner_CListom from add meta
001 // Output custom
1
002
$post ) {
003 // Use for
004 __ FILE __
206 Web Design Tips, Tricks. & Fixes
),

);
005 // The actual fields for data
006 echo
1
<label
field">
1
- '
007 _e(
1
Check to hide the sidebar
this post.
1
,

);
008 echo
1
</label>
1
;
009 $checked = get_post_meta($post->ID,
1
Sidebarl, true);
010 echo
1
/><br type=" checkbox"
011
012

1
013 ($checked ?
1
Checked="checked
111
:
11
) .
1
/>

014 }
We need to save data as well . and avoid doing it
every autosave. do this. just fol low the code
seQLJence belo\N.
001 // Save our custom data with post save
002
($post_id ) {
003 // submit form autosave
004 if ( ) &&
DOING_AUTOSAVE )
005
006 // Check
007 if ( lpagel == $_POST[Ipost_type
1
] )
008 {
009 if (
1
edit_page
1
,
$post_id ) )
010
011 }
012 else
013 {
014 if ( ledit_postl,
$post_id ) )
015
016 }
17
Save the metadata
Fi nally, we have to save the metadata. the same
way as before. but with LJpdate_post_metaO instead of
manually You'll notice the if/else check at the end.
saving 1 or whether the checkbox is ticked or not.
001 // Update create) post meta sidebar
002 update_post_meta( $post_id,
1
Sidebarl,
($_POST
003
? 1:0) );
004 }
With this in functions php, we'll get separate with
checkbox. and won't have to bother with the custom
field in WordPress admin any more.
18
Revisit single.php
Using function like this means we need to alter
the code in single. php bit. First we need to do check
to see if the meta value sidebar contains 1. and if it does
we' ll echo nosidebar. Apply this code:
001 <div

<?php
if ( get_post_meta($post->ID,
1
Sidebar
1
,
true)== 1 ): echo
?>">
We also need to swap 'nosidebar' from the check for
outputting get_sidebarO to look for value of 1.
001 <?php
002 // Is sidebar NOT set to Off welll output
it, otherwise
003 $custom_field = get_post_meta($post->ID,
1
Sidebarl, true);
004
005
006
007
008 ?>
$other_value = "1";
if ($custom_field
get_sidebar();
}
!= $other_value) {
That's it. Now we've got the same functionali ty
without having to use t he dreaded custom field
Adapting your t heme is now one-click

Full width page

bL"CiJUSC
..... dutt!!i tt1t""'
n or n
r t ""r l 1

1 ]
152

1 4
16S
166
tevc:: h
widt;b g
f or
1 r
nug t

'
is clelete everytfling tllat is the comments
located at tl1e top, ancl replace then1 wi tll :
'Template 1\Jame: Fuii-Width' - as shown.
make sure that the 'get._sidebar template tag is
also deletecl. We have also added our own 'div'
tag cal led so we use CSS to
work with the width.
cn 1 l !i. 11 11:3'1
Web Design Tips. Tricks. & Fixes 207
..
Exotic fonts and decorat1ve styles are
crucial to des1gning attractive themes
toolsl 1 Adobe Photoshop
SY'O
Soarceliles

Homepage_
template.psd
Styles.asl
Shapes.csh
typography_
swirl.psd
bookmark_
buttton.psd
Ribbon_new.psd
r FL
ln one place, hasste, 3 minute SlgnUp
1
chlque brands.
We have made weddmg shopping easyl
theiDur
for product
-
<
Elena Savitskaya's real world web design
work for thebridery.com is used for the
purposes of illustrat ion in t his t utorial
208 Web Design Ti ps. Tricks. & Fixes
'ltatch 1
Jllrtr ) )
1 ..

)

thi s tutori al we will try
t o show you the best
ways of using t ypography
tools to web
designers right now. We
will use
two very
popLJiar Google
Lobster
Before.
smal l of sites were to use typographic
tools due to SEO-related concerns. New ways of
implement ing typography the web made it
for all t he to text. it
SEO web designers to use it in
SEO-sensitive projects. The of small details
grid-based layouts is just as big as typography, so
this tutorial we will touch the subject of using grids
for your layout s the small little details
layer styles that make all the
We've also included the featured resources
this tutorial for you to keep reuse future projects.
---
01
Makeastart
We've prepared template for you
Open 'Homepage_template.psd' and switch Guides
(Ctri+F5). Have look at the grid get familiar with it.
as we wi ll using all t he grid guides to place our
around the page Create group and cal l
it Using the shapes provided wi th the tutorial.
start wit h some simple social icons for the page top.
-
-
--
-

-
-
-

-
-
-til

- -
02
Header
Colour t he icon and the
the symbol Give the symbol drop shadow as
shown the screenshot. Create Hover group top of
create copies of your place
Give the darker colour:
03
Header continued
the tool, create top
Georgia/Regular/ ll pt/Sharp. Colour it for
state for hover state. t he
tool set to create circle separators
coloured Make sure you set the to
All Capitals the Character
t
06
Addlogo
your preferred create
logo colours
Make sure the logo si ts
properly t he grid. with the bottom of
the the horizontal grid line.
Give the parts of t he logo
Over lay layer style white
04
Header details
the pixel brush. create dotted divider
#d3d3d3. Make sure to use t he
tool. t he Brush tool. 'Bookmark.psd' drag
the your header place it slightly off the
grid t he right. Check your dotted
out of the grid. the Bookmark folder call it
Bookmark Hover. the shape base lighter shade
of to create the hover state (we used #47b5dd).
... -
07
Main navigation
Download Quattrocento Roman
from Google Fonts. Create
#686868/17pt/Sharp
and at 75 and make sure the
font is set to All Capi tals in the Character
Pick the tool.
set Radius to create hover
----
gradient. set to Mult iply at 19% to give it current states #38afd9 and
nice shade. Make sure your navigation font sits
the same as the logo.
08
Create big buttons
Custom shapes provided with this tutorial.
create three big One wi ll t he hover
state. the ot her wi ll normal state. the
button shape in t he Layers panel to go to Layer Styles.
tick Drop Shadow and set it to: Multiply/Biack/10%
Opacity/90 degrees
Tick Glow set it to: White/100% Opacity/
Technique: Softer/Source: Edge/Choke: 100%/ Size:Spx.
.. ,
--
-
-
--

-
.. ..
--
-
--

-
--
-

-
--
-
-

.. ..
-
- --
-

-

-- -
09
Big buttons
continued
Tick Stroke Layer styles as wel l.
it to: Size: Posi tion: lnside/ Mode: Normal/
Color Set the colour of t he act ual shape to
#f2ebe7. Lobster Font. create t he text. Set
the size to 24pt . color to the
layer and give it Drop Shadow: Color: #cccccc/Opacity
100%/ Distance: Spread Size to at
90 degrees. Stroke. set it to: l px/ Outside/
Color: Mode: Normai/Opacity: 0%/.
-
-
- -
..
--
--
--
--
-
..
--
-
-
-
-- -
-
--

-
.. ..
-

.. --
-
-- -
..

..

- -
-
-
--
[43
--
-

..
-- -- --
-
-- --
05
Main welcome message
Trebuchet MS/Italic/25pt/Sharp, create
t he welcome message body text. Colour it #686868
and give it drop shadow in white at 90 degrees wi th
distance set to rest to (use the screenshot for
Lobster font/44pt/Sharp
create the Give it Shadow.
at 24%/Multiply and Overlay in Black and
White at Multiply/7%. Set the Fill to 34%.
Thumbnail buttons
-
-
-
--
-
-

-- -

-
-
..
-

-
- -
-
01 Normal State buttons
----
Duplicate the shape and text layer. For the
Shape layer. change the colour of Inner
glow to #el elel. shape colour to #f6f6f6.
stroke colour to white. Change the font
colour to #686868.
02 ___ Create quick
thumbnails
Switch on the grid (Ctrl+FS). Using the
screenshot for reference. hol d down the
Shift key and create square selection
usi ng the Rectangular Selection tool.
Create new \ayer and fill with any col our.
Duplicate thi s thumbnail across t he grid.
--- - -
___ Quick thumbnails
continued
Merge t he thumbnails layers together to
save space. the layer and give
i t l px i nside Stroke and colour it
This way you have evenly spread
thumbnails with perfect padding and
spaci ng. Paste in your product images.
Web Design Tips, Tricks. & Fixes 209
10
Body heading
11
Add 'new' ribbon
Duplicate your dashed the top or create
t he same colour. t he Text tool create t he Georgia/
Regular/23pt/Sharp, wi th set to 10 color #686868. Make
sure you give space the dashed
drag drop it
top of your Have look at the structure
t he Group Folder to see how it was made. Make
sure you explore layer styles for each so that
you create your own you the
used to create this Notice how the base
of the has Gradient Overlay Black and White -
this way you easily change the colour of
or elements while the colour fade effect .
Tor r proc:1urt
-
'"' .
."

days. Since the became huge
com).)aied to ).)revious years, it's
always good to l1ave at
t11e bottom, even if theres not as manY,
of them as usua would liave.
Create dashed line about 3
Remove some s).)ace in the middle
themiddle Reduce the size so it's just
little blt blggei than the l1eight of the
dashed line. Now using symbol from
logo, create little icon right
underneatl1 it. Make sure it's and
Dro).) Shadow: Normal/Black/
-90/
S).)read IOO%/
Shadow: Color:
Normal/. Opacity, 3%/ Angle -93/
Distance: lpx/ Choke:O/
ove11ay: from to
at 100% O,Racity at 90"
\\1 hed f, 1 roduct
. -

13
Load more button
Duplicate your across t he layOLJt Add
another Dashed the same
Custom shape we used for big create smaller
whi te give it the layer styles:
Drop Shadow Black/MLJitiply/Opacity: 1/
Spread 0/ Size: Shadow Normal/
Opacity: 100%/ Choke: 100%/ Size: Stroke
White/ Size: lnside/. Now you should have
base si m ilar to t he screenshot .
- Bn nna L
\\blt

S25.50
From TarP-ot
15
Create three columns
-
- -
-
-

-
Thumbnail titles
Create text Guide under the
the text. Georgia/Regular/13pt/
Sharp colour create the of the product.
Trebuchet MS/Regular/ 15pt/ Sharp
colour #434343, create the price of the product. the
Trebuchet MS/Regular/15pt/Sharp colour
#686868, create the .

ot
Load More button continued
Lobster at 16pt/Sharp/.
create the 'Load More. Add little
downwards on the right. to indicate where
more items wi ll show. Duplicate the folder to
create the hover state. just the base shape
from whi te to #f5f5f5.
in set to 19pt/Sharp set to 10 create the for
Trebuchet MS/Regular/ 13pt/Sharp/ color: create short
the Lobster/ 16pt/ Sharp/ color: create Read More button. the same colour
shapes provided with t he tutorial. create arrow the right of the Read More
- . . ..
16
Create Brands Slider
Create rectangular selection across the grid, create new
layer and f ill it wi th t he layer and let 's give it some
style. Set drop shadow to: Multiply/Biack/Opaci ty:6%/ Distance: l px/
Spread: Size: l px/; Add lnner Glow and set it to Normai/Opacity:
100%/ Color: #el el el/ Technique: Softer/ Source: Edge/ Choke: 100%/
Size: Add Stroke set to: Size: Position: lnside/ Blend mode:
Normal/ Opacity: 100%/ Color: #dbl4f9.

--
--
-
_.__ .
-

-- -....
- ..
..
-
-
-[;i3-
- ..
- .
--
L
_.... - .....
19
Add slider controls
Create small circular vector shape
in whi te in t he right corner of the slider on
top of the dashed line. Add the fol lowing
st yles: Drop Shadow: Multi ply/ Black/
Opacity: 6%/ Angle 90/ Distance: l px/
Spread: Size: l px/; lnner Glow:
Normal/ Opacity: 100%/ Color #elel el /
Technique: Softer/ Source: Edge/ Choke:
100%/ Size: Stroke: Position:
lnside/ Normal/ Opacity: 100%/ Color:
white. Now j ust add in an arrovv from
provided shapes in #686868 color.
21
Footer links
Using Georgia/ Regular/11pt/ Sharp/ Tracking:10/
Color: create footer Give enough space
have si milar of both
the ri ght and left side of the logo symbol. Once you're
happy with t he layout of the links grab t he Pencil tool. set it
to and create dots the same
d )
Our
-
-
--
-
- 1
-
-
-
lt
)
-
-
ti3-
- -
--
--
17
Create heading for slider
Now t hat we have background. let's add
heading. We need this part to really stand out. Create
dashed line. duplicate it and move it down about
Now we have dashed line, make selection in
middle of the dashed line and delete what's inside.
Using Georgia/regular/ 23pt/ Sharp/ in #686868. create
heading.
18
Slider continued

-
Open 'typography_swirl.psd' and
drag and drop the smart object into
Dur.llrnuds
our headings. Duplicate it. go to
Vertical and place the
reversed swirl on top of the heading. as
shown on t he screenshot. Make sure to
explore t he layer style we've given to the
swirl. to have better idea of how it 's
made. Now add in the brand logos
spread across the grid in similar fashion
as we did with t humbnails.
)
20
Create hover for controls
Duplicate t he folder with slider control button. go to Transform
Edit Fl ip horizontal and place it in the left corner of the slider. Let's create
hover state. All we to hover is the grey So
the base layer. go to lnner Glow and change the color of it to
#cdcdcd. Make sure you create both states for the left and right button.
nd -
-

-
-
-
(
-
-
-
r J ff Sf$n U
ma wcddlns mopp ns
t\
Web Design Tips. Tricks. & Fixes 211
....
01
The basic page

up with the t1mes and adapt your
web creations for mobile browsers
Soarceliles

Complet ed
project files
toolsl 1 Dreamweaver or web editor of choice
<Above>
Our basic HTML doesn't contain
special code other than some normal
HTMLS elements

:::::::::::: :::::: :::::::::: designers used to know exactl y

where and how t heir work would
displ ayed. Sure. always had the
of suppor ting multiple browsers
and all the t hat that involves.
but in t he past we that websi tes
would accessed from desktop Today
that is the case.
What does t his mean for how we
our page layouts7 Put simply, we
rely visitor
resolution of 800 more. We need to
from with screen width
of all the way LJP to display at
wide. This not
least to the way we display text images.
We're to use very basic L page to
develop our The code will work more
sophisticated but it helps to develop without
bell s whistles. First. the 'star t.
html' page from the cover disc to access the ful l code.
001 <!DOCTYPE HTML>
002 <html>
003 <head>
004 <meta http- equiv="Content-
content=''text/html; charset=UTF-8''>
005 <title>Responsive Design with elastic
text and images</title>
02
The initial CSS
We've already got our basic styles set up:
single-column design with parts of our
sized to create t hen
some paragraphs of body We'll leave this CSS
pret ty much as it is for the whole project. G rab the code
from the to apply it.
001 1*
002 RESPONSIVE DESIGN WITH ELASTIC &

003 *1
004
005 body {
006 margin:
007 padding:
008 background:
009 color:
010 font-family:
sans- serif;
011 font-size:
012 }
03
Webfonts
0
'
0
'
#333;

helvetica, arial,
62.5%;
One our is is
headline font for the top of the page. Let's deal
with that really quickly an appropriate
theres straightforward to t ypeface from Google Web Cwww.google.com/
our text is at appropriate. webl onts) it to the <h1> the CSS We
size matter vvhat the width of the user's The have opted for Chewy added drop shadow to the
same applies for images. and together these techniques text to add some texture.
form usefLII part of overall web
approach t hat our to LJP to date
across all modern platforms.
this tutorial we' ll build jQuery that lets us
quickly and easily make text elasti c. and t hen we'l l
some CSS to do the same for images.
In the past we knew that websites
would accessed from desktop
browser - that is no longer the case
001 <link href= http: //fonts.googleapis.com/
css?family=Chewy' rel= 'stylesheet' type='text/
css'>
002 hl {
003 text-transform: uppercase;
004 color: #fff;
005 font- weight: normal;
006 0
'
007 padding: 0
'
008 margin-top:
009 font - size: 10em;
010 font-family: 'Chewy',
011 text-shadow: #000;
04
Approaching the
The key we're trying to address is
ensuring that text remains appropr iately sized when the
window is resized to larger or smaller width. The
heading font. for example. might look great at 4em in
desktop browser, but massively too
smartphone screen. We'l l use jQuery to help us set the
font size according to the size of the wi ndow.
05
Prototyping
We' ll start off adding an event listener for the
window being resized. and inside this listener we'l l add
some code that analyses t he width of t he wi ndow, then
uses it to calculate the size of our text, LJsi ng
proportion of the minimum and maximum that we'd like
to display at . Grab t he code from the disc and add it to
JavaScript document to get started.
001
002
003
004
005
006
007
008
$(document).ready(function(){
maxwidth = 1200;
minwidth = 480;
parafontsize = 1.4;
11 Add your interactive code here
$(window).resize(function(){
width = parselnt($(this) .width());
if (width<minwidth) width=minwidth;
<Above>
This highlights the we're trying to overcome. When the
page ls vlewed small screen the font size is al l wrong, making
the content essentially
<Left>
Loadlng ln the CSS shows our design is single column wit h
couple of headlines, an intro and some body text bel ow
06
Some basic maths
We've already set up to define the min
and max width, and we've restr icted our width
to fall between t hose two ext remes. Now we need to
use this width to calculate how our fonts should
001 pfontsize = parseFloat((width/
minwidth))+''em'';
07
Assigning the change
We've got calculation for the size of our text
expressed as percentage of the base widt h. so let's
now apply t his to the .intro text using jQLJery's CSSO
method to target and set the font size property
001 if (width>maxwidth) width=maxwidth;
minwidth))+''em'';
003 $("article intro".
css({fontSize:pfontsize});
004 }) ;
Adjusting line height
When we preview our code it works nicely. but
t heres small issLJe t hat becomes apparent as we go to
extremes of text size. The leading doesn't suit t he text at
all sizes. This is because lineheight is set absolutely in
the CSS. fix t his. we need to set it programmat ical ly.
minwidth))+"em'';
002 $("article intro") .css({fontSize:pfontsiz
e,lineHeight:(parseFloat(pfontsize)+(parafontsi
ze- parseFloat(pfontsize)))+"em"});
003 }) ;
004 }) ;
09
Set base size
Now weve got real control over the starting
size of the text. This makes the code less useful than it
should We'll set up new to act as
m ultiplier for the calculated result . So. start ing with
value of 14. t he fi nal font size will multiple of 1.4.
001 parafontsize = 1.4;
002 // Add your interactive code here
003 $(window) . resize(function(){
004 width = parselnt($(this).width());
005 if (width<minwidth) width=minwidth;
006 if (width>maxwidth) width=maxwidth;
007 pfontsize =
parseFloat(parafontsize*(width/minwidth))+''em'';
Web Design Tips, Tricks. & Fixes 213
10
Review
weve got good of code place
that will to the size. the size
and allowing our text to responsively update itself to the
view. lt's all working as it should do. and
across There is though ...
11
Limitations
Theres wrong wit h the code. but what if
we also want to We'd have to
duplicate our code. which is messy and wasteful.
lnstead. what we need to do is our prototype code
t hat \Ne cal l for
12
Convert to plug-in
our code to wi ll us
to cal l it each simply
its to the end of selected element.
the text-resizi ng code. For flexibility, we set up our
to allow values for t he default
mLJiti plier. and width properties.
13
Structure of the plug-in
jQuery plug-ins look lot like string of
jQuery code. bLJt they have some extra at t he
and end to create the to
the jQuery object. This is essential to support
jQuerys looks like t he code below.
001
002
003
004
005
(function($){
$.fn.pluginName = function(options) {
var defaults = {
property1: 1,
property2: "something
214 Web Design Tips. Tricks, & Fixes
__ _..,._.._,.
----
-- -
--
-
--
--..---...-
<Above>
The jQuery site (http://jquer y.com) has
useful tutorial on how to create plug-in, but
we also cover the basic steps ln t hls t utorial
<Left>
TIHtCoCie we prototype Wlth sets thelntro te)(t
nlcely, but doesn' t address t he headings. For
thi s, we need to convert it to plug-in
<Right>
Ewn wh n y,ew-ed on smartphone. the page
wHh the c:llfferent elements
Stzed accordingly. ell thanks to our eJasdc
14
Assigning settings
to have series of settings
opt ions that how the funct ion will affect the
it's applied to. Our plug-in code accepts
opt ions so we to assign these as
property of t he so they're to our
script We do this adding this simple line of code:
001 var uoptions = $.extend(defaults, options);
15
Setting default options
However. we need to account for the
t hat we call t he an we
pass all the We generate some default
options for the plug-in that will provide basic result.
We do this creat ing object for t he default set of
options before the sett ings.
001 var defaults = {
002 mul tiplier: 1.4,
003 lineheight : 1. 4,
004 minWidth : 320,
005 maxWidth: 1200
006 };
007
008 var uoptions = $. extend(defaults,
options);
16
Convert the maths
We need to use the same formula we devised
for the mockup, but apply it more generally the
plug-in settings. and paste our original code and
substi tute the sett ings for t he values we had
previously. Your code should look like the disc's.
001 obj = $(this);
002 width = parselnt(obj.width());
003 if (width<uoptions.minWidth)
width=uoptions.minWidth;
004 if (width>uoptions.maxWidth)
width=uoptions . maxWidth;
005 fontSize = parseFloat(uoptions.
multiplier*(width/uoptions.minWidth))+em'';
17
Output results
The final step here is to replicate our original
code that actually sets the size. lnstead of using
explici t call s to the element s we'll
to use the obj reference. and we to substit ute in
the correct names for the font size too. Apply
the code below to put this in place.
001 obj .css({fontSize:fontSize,lineHeight:(pa
rseFloat(fontSize)+(uoptions.lineheight-
parseFloat(fontSize)))+"em"});
lnvoke the plug-in
Now we've completed our plug-in. we need to
cal l it from our script. Bear mind that we could cal l
code in from separate JavaScript
so although the code is t here. we sti ll need
to explicitly invoke it. Thankfully this is simple, as we
call it just as we do with any built-in function. Add the
code below
001 S(''article p. intro'') . elastictext({multipl
ier:l.l5});
002 S(''article h2'' ). el astictext({multiplier : 1
. 8,lineheight :1});
003 $("header h1").
elastictext({multiplier:3.05});
19
Window resizing
lf you test your page just you'll notice that it
resizes the text we first load the page, but as we
resize the the two
do not grow together size This is because
code calls the and we it to do
this is made to the We
yet to the
resized, so let's fix that
20
Overcoming the
We to call our each time the
fires We do this simply
of our calls to the plug-in
window.resize Apply the code
the disc to set this up, test the page to
ensure that it responds as
001 S(wi ndow).resize(function() {
002 S("article intro") .
el ast ictext ({mul tipl ier : 1. 15});
003 S(''article h2'') . elastictext({multiplie
r:1.8,lineheight:1});
004 S(''header h1'').
elas t ictext ({mul tipl ier: 3. 05});
005 }) ;
21
Elastic images
quick way to get images to behave
elastic way is to put them container that scales
wi th the width of the browser window. lf
we set the width of the image to 100%
CSS, we force the image to scale to
the width, just the same as the text. Apply the CSS
below to this.
001
002
003
004
005
img.elastic {
max-width:
mi n-width:
width :
}

100%;
22
Test and develop
Now we have fu lly operational jQuery
that allows us to create elastic text at will, you should
test all browsers to make sure the multiplier
values you've chosen work well. Consider how you
could automate the discovery of the
multiplier values the CSS for each
Code library
The completed plug-in
We've writ ten our code as jQuery plug-in to make it easy to
apply to multiple elements. we break t he function down:
kick off, we create set
of default settings to
apply to the plug-in if the
call doesn't include any
passed-in options.
The nuts and bolts of the
resizing is done here.
First we calculate the size
to change the font to, and
then we apply any
changes to the styling.
001 f*
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
RESPONSIVE DESIGN WI TH ELASTI C & I MAGES
(function($){
S.fn. elastictext = f unction(options) {
11 Default options
var defaul ts = {
multiplier: 1. 4,
lineheight: 1. 4,
mi nWidth: 320,
maxWidth: 1200
};
11 Assign the settings
var uoptions = S.extend(def aul ts, options);
return this . each(function(){
obj = S(this);
width = par sei nt(obj .width());
022 if (widt h<uopt i ons . mi nWidth) width=uoptions .
minWidth;
023 if (width>uoptions.maxWidth) width=uoptions.
maxWidth;
024 fontSize = pars eFloat(uoptions .
multiplier *(width/uoptions.minWidth))+''em'' ;
025 obj.css({fontSize:fontSize,lineHeight:(parseFl
oat(f ontSize)+(uopt i ons . l ineheight-
parseFl oat(font Size)))+"em''}) ;
026 }) ;
027 }
028 } ) (jQuery);
029
030
031 $(document).ready(function(){
032
033 11 Assign the starting sizes
When the page is first
loaded, we run the elastic
text plug-in in order to
set the starting size of
each of the text elements
onthepage.
Each time the window is
resized, we'll run the
function again to resize
the text so it matches
with thewidth ofthe
window for best results.
034 S("article intro").
elastictext({mul tipl ier :1.15});
035 $("article h2") . el astictext ({mult iplier : 1. 8,linehei
ght:1});
036 S("header h1 '' ).elastictext({multiplier:3.05});
037
038 11 Each time the window is r esized, recalcul ate the
font sizes
039 $(window).resize(function(){
040 S(''article p.intro'').
elast ictext({multipl ier : 1. 15});
041 $("article h2") . elastictext({multiplier : 1. 8,lineh
eight:1});
042 S(''header h1'').el astictext({multiplier:3.05});
}); 043
044 });
Easily to
mobile devices
using Dreamweaver
andFlash
With mobi le development gr-owlng
demand for Adobe's flagship web
design suites, we show you how to
deploy content to Android and iOS
toolsl 1 Dreamweaver CSSS. Flash CSSS
1opJ11 nt
21.6 Web Design Tips. Tricks. & Fixes
SoarceiUes

mobl le.fla
mobl le-app.xm

t o mobll e
confusing
and workfl ows
surrounding thi s are
const antly in flux as
advancements are made,
so i n thi s tutorial we've
decided t o clear up all the
conf usion. Dreamweaver
has jQuery Mobile,
PhoneGap and deployment to Android and IOS
emulator5 bLJi lt right in. Given Adobe'5 recent acqLJi5ition
of the maker5 of PhoneGap, this looks set to
continue to an impor tant integrated workflow.
Fla5h. meanwhile. ha5 5een t he recent relea5e of
which offer5 5peed5 for pu5hing
graphics around if you take advantage of
(don't confu5ed the name as it handle5 20 really
fa5t well). We'l l 5how you how to overlay and
5et up to to Android and iOS. lt t hen become5
simple mat ter of switching drop menu to move
between the two platforms.
ollo 11 ell!!o'
..,. _... 8l8'tl 1 ...
--
. --
..--... r1 n .. ._.."_ ..
M,_..._,.,.....,f!818-
... _
---
01
Set up the site
We'll show the Dreamweaver workflow fi r5t.
50 open Dreamweaver. head to the Site menu and hit
New Site. Give it an appropriate name and folder to
save your work into as the local site folder. That's really
all we have to do preparation wi5e 50 click on Save to
create the 5ite management.
---
---
_ ...................... ...
..........................
--
... ._
02
Newpage
ln the File menu choose New. Down the
left-hand 5ide of the pop-up wi ndow pick Page
from Sample Then click in5ide the Starter5
folder and select jQuery Mobil e (PhoneGap). The CDN
version use5 an online 5ource for jQuery, the Local one
5tore5 jQuery local ly. whi le the PhoneGap option al5o
include5 the PhoneGap library.
..
811 us .,.
03
Set up the view
Save page as choose t he
folder that you set up step 1. All the jQuery
files will copied that for you.
Now make sure you see the Split view. Select t he
arrow to choose 320
480 before Live View.
-
---. -
.... - ---... - .."_
----
--.
-----...
" "
06
Set up the iOS SDK
there Easy
for the IOS SDK, because you to register as
developer t he IOS Developer ki t.
Obviously this is if you have
computer t his is completed though the path is
always !Developer on your
- 1
au
-
. ...

-
08
destination
Now you can add an icon for the as you
it to appear on the home of the
you also startup image for the
is the most
you need to set up where you to
your to. Below this are also of the
mobile OS t hat you are
1

------
04
Easy-to-add Ul
You use your fLilly the
Live View Make sure you see the
panel change the Common drop-down menu to
jQuery Mobile. Place your cursor at appropr iate
place the code you cl ick of
these to add that to your
-. -----------
nw-.....o_....... cuzu... _.. ....,_.,...,.........,.,
.,. .. ._w ,_..._. \ ._._,...
__ .",J......,.. ............. ..._ ......... ,..,.. t ""
... ,..... ". ...... ....,.....". * ..".
,_,,.IIW....,
-
...
.__
... ...." m

,..;

........ -
"-t#! R
-

"'
W'!Cil
---
07
Application settings
Click Save we to edi t the
settings. Go to Applications>Native
You to add
ID; this is usually your web address. ie
this is write your author
into t he relevant fields.

09
Build to Android
When you have that set up you
view your application t he emulator tool at any
t ime to
either or iPad. The
emulator in the relevant SDK will open and you can
test out your Note. t he emulator requires
little up.
ioJt.:

..
-
__ ...
05
Set up the Android SDK
all youve
built up your You easily test work the
Android emulator. Go to Si te>IVIobile Appl ications and
Framework. lf you already
have t he SDK click Easy order to
automatical ly it.
WorkingJNith
jQuery Mobile
OI ___ Adding new page
add page, place your cursor in the
r ight place the code click the
page the Give this
id- weve used 'Attractions'- and
use the code the
page to link to that page.
1
001 <li><a href="#attractions">At
tractions</a></l i>
02, ___ Theming content
themed to
suit; just add 'datat heme="b"' to any tag.
You specify d or as the theme
types to create your content. Your whole
page will themed in the <div
data-role="page"> or you select
individual buttons UI elements.
-
03 Fixed footer
the footer i s al ways at
the bottom of the document couldn't
more straightforward Add data-
position="fixed" to the <div data-
role="footer"> to keep it attached to the
base of the It does. however.
temporarily disappear while scrolling and
reappears stops.
Web Design Ti ps, Tricks. & Fixes 217
-
version of AIR to as what we've
created will work :RerfectlY. fine i11
AIR2.6, however if want the
best then th1s is an
absolute must.
If you are looking to create games
then you will to enhance

AP.I, wl1icl1 was created
uses ditferent

13

,._ ' '"
,futurt J;g" true / .-
"' c::ll.llf8 1. .. 't t /;,.
,.ftowrt r rte forcet #
<fQWr"C rtecs- truo"l>
.. feotvrt
Change the version number
Open the t hree fi les 'AdobeAIR2_6.xml'.
'AiriPhone.xml' and 'Android.xml ' inside Adobe Fl ash
CS5.5>Com each of these
change the number 3 to 13 instead of 11
(if you upgraded to AIR2.7 t hen it will 12 here).
fnt ml

Q.
Fwh css.s
D <,. Onrtll
""- s
11
Start the Flash workflow
The next four steps are opt ional to update Flash
to to do this. first download Adobe
AIR Cwww.adobe.com/special/ product s/ai r/sdk).
and name the folder 'AIR2.6'. Browse to your Flash
folder in your applicat ions and rename the folder
from 'AI R2.6' to 'AI R2.6 OLD'.
14
Last AIR change
The fi le to is in Flash
CS5.5>AIR2.6>Samples and is the 'descriptor-sample.
xml' fil e this in text editor and change the
to 3.0 as in the
above. Save this then you launch Flash
Professional with AIR ful ly upgraded.

TO&I.iir 10
1 :10 10
Tcd.lr l O 11
l'J to
20 10
20:1:
TOUt 10
Tod.1r r. 10
20 10
'1Q 10
10 10
:lD 10
10 10
10
Rapid
development
This met hod is
really for rapid development
and testing as you go. The
output file saved the
specified step 8
gives the build. You will need
to open this in the
development
so t hat you your
certificate
ready for final
pri or to deployment .
over the new version
From your folder. over your
new version that you renamed 'AIR2.6' the previoLJS
step. Now browse to t he AIR2.6>Frameworks>Libs>AIR
folder in the Adobe Flash CS5.5 folder
airglobal.swc. Paste t his Flash
Configurat ion>ActionScript to overwrite
the existing
-----
--

..
-
-
-
Setup for Android
t he file from t he cover disc
to hard drive and open ln the settings.
choose AIR for and cl ick the Settings icon.
Select t he hit t he
tab. Next to Certificate. click Create and fill in your
details. before saving the fi le.
16
Permissions tab
Click the Permissions tab and choose Wake_
Lock: you have to give at least one permission to make
an Now click This is completely set up now for
Android and, if you connect phone via USB, you can
straight to it. Change the set ti ngs to AIR
for IOS now and click the Setti ngs icon.
_......._.. ......... _................
---
- -
_ __.._ .... .r.-.
--

19
Caching as bitmap
Again cl ick on the first button in the Display
settings but, this time, choose Cache as Bitmap. This
isn't as fast as the Export as Bi tmap option because it
17
Settings for iOS
The general settings are very st raightforward for
IOS: if you are target ing iPhone 4 use high resolution.
Cl ick on the Deployment tab and you wi ll need to create
an iOS-provisioning profile certificate. Full
can found over at http://adobe.ly/
rNOM LV: it costs $99
- ....,__ -
---
... _
--
----...
- -
---
-... -
--
-- .
-
__ .. _
=-----
- -
18
Vector to bitmap
The key to working with Flash mobile
is to use bitmaps of vectors,
because these are handled t he GPU of
t he CPU, which gives faster Click
the text on the screen in Flash and, in the Display
choose Export as Bitmap.
Sou
U<W"'t n.Y
n sc
.....

1
9odcasu

s S(Ort
Plng
Purch 1cd
SH
16
AGOLenses manclal-proto
has to make the cache however there is cr
little this for the majority of cases. The rLJi e is
to try to have as li ttle vector as
20
the
Because all the have been
set up, we just have to switch AIR for IOS
Al R for to to the platforms.
Selecting wi ll create the lf you have an
Android it will
as soon as you unlock the device.

:: us e.s
rrun .. OJ
AOCon unts
60's us
C1.1sstca.t us
os
ted
Rtcentlv d
0 2S osc ayed
Photoshop ...
iP dApp
Place IPA in iTunes
Remote
lf you iPhone of your then you wi ll have 'mobile.
ipa' as the file. You must drop this with the
iPhone to see this on the device. so it takes little longer to this way. lf you
already have of the your you must delete it first before
with iTunes.
Reve ...
V413HAV

.. . -
na ve
r .......
.... ....

eaver
Dreamweaver CS6 and the integrat1on
of PhoneGap Build make it easy
toolsl 1 Dreamweaver CS6. Photoshop

lctur
Soarceliles

Final project
folder

honeGap has become
well -used tool in allowing web
designers and developers to
quickly translate their skills over
to design. PhoneGap was
recently acquired Adobe and
has been renamed as Apache
Cordova. but at present thei r
cloud-based service. PhoneGap
Build, still retains the name. With
the new release of Dreamweaver Adobe has been
quick to leverage t he power of the PhoneGap Build
service into t he software. ln case you are not familiar
with PhoneGap Build, it is an online service that allows
you to upload an entire HTML5 as ZIP file and it
will. in return. build apps for Android, Blackberry. webOS.
Symbian. and if you have provisioning profile. IOS as
well. What's great about this service is that you don't
have to install any of those SDK's your computer and
you get to build apps that take advantage of t he
native phone's funct ionality. ln this t utorial we are going
to show you how to work with the phone's camera.
01
Get Dreamweaver
start t he latest of
Dreamweaver CS6. demo from
www.adobe.com/uk/ products/dreamweaver.html.
the the side of t he click Try
fol low the to
the sof tware it.
1 cor.tmt
f'O\e \tatv
r f'"lpo
href
.. ,pe
\e.footer"

J.O. 110 ,_ ""_;;.._ _________ ..,.,

S-
ICl
1000 uo
11 171
IClO 1\0
IOSO
, .. w.

IIUto'l ....
JIOW!I-Io
04
Get the view
Save t he page as the folder we
created step 2. You wi ll prompted to save local
copies of files: accept this. Make sure your view is set to
split t he view to 320 480 t he bottom of
the view. Click t he Live to see
preview the
06
Open Build Panel
Back Dreamweaver. go to the Site
choose Build Build
Service - yes. the are labelled the same!
appears your that prompts you to log
with your password that you set up
the previous step. cl ick the
Create New Project.
02
Define site
your desktop or somewhere easy to
create folder it
Dreamweaver. go to Sites the
pop-up click the New Site Name t he si te
camtake' bro\Nse for t he folder that we just
created. That's the site so click Save,
_", __
-
-
..... , ..... _ .. _
-
"' -- 1 . ..
05
Create PhoneGap Build
account
Dreamweaver uses WebKit browser to display your
Now switch to your browser visit build.
phonegap.com Cl ick the Register
with your Adobe ID. cl ick the terms
condi tions check boxes hi t the Sign ln button.
"...,_
07
little patience
You wi ll taken to new in the panel
t here will several builds such as
webOS, Blackberry, IOS. lt'll take few
for them all to buil d, IOS wil l fail
you upload profile to the Build site. Click
t he QR code you' ll to larger
of it.
-

---

03
Create the page
start t he project we to create
page. Go to Fil e>New the dialogue click Page
from Sample. Star ters and jQuery (Local).
This will create basic jQuery Mobile that wi ll
t he start of our project. so cl ick the Create to
apply this template.
Buildicons
explained
r) 1
OI ___ Emulate application
In the Build Service panel there are three
icons that appear. the first of these is
Emul ate. this allows you to run the project
on your computer if you have the
emulator i nstalled.
..- ..,__ __
02 ___ View QR Code
This is the icon you will use most of the
time. because it makes the j ob of getting
the onto the device to test so much
easier than if you were to transfer files
from computer.
03 Download the
----
application
The final icon. which is the down-facing
arrow, allows the bUilt application to
downloaded to the computer so you can
transfer the file to t he device manually.
-
the information for it can
command because it starts
are familiar. with any: of the
Success or fail
Now add the remai ning code shown that gets
the pictures id and stores it in the 'image. The
URI is passed in as t he image source to display. lf there
is t hen the fai l function wi ll show an alert with
the failure message in it. Now is really good time to
save your file.
001 function show_pic(uri) {
002
003 var image = document.
getEl ementByid('small image');
004 image. src = ur i;
005
006 }
007 function fai l (msg) { alert(msg);
008 }
009 </scri pt>
08
Snap to install
lf you have an Android phone. use QR code
reader such as Google Goggles to snap t he QR code
and then download the link. This wi ll
download the right to your
phone. Once downloaded. install
t he and when ready. cl ick
the Launch button on the
phone to see it .
Congratulations: you've
made an and installed
it on your devicel
10

p1cture
Rename the heading camtake'.
and in the href> tag of the code
add the following 'onclick="getPicO:"'. This is
going to call some JavaScript code that wi ll take
picture using the phone's built-i n camera. Now add t he
code shown after the </ul> tag, this wi ll place an empty
image on the screen ready to accept the one taken
with the phone.
001 <br><br>
002 <img styl e="width: height:
i d="smallimage" src='"' />
Creating icons
lf you look on your phone you will see t he
project has t he default name PhoneGap Build not
very descriptive name. and the icons are default. Open
Photoshop and create new image. 72 Now add
your image for the icon and create new folder in t he
root folder from step 1. named 'icons.

..
-
-
--- -
-
--
-
09
Let's go native
lt's not the most interesting but we
easily change that and make use of some native
functionality Back in Dreamweaver. delete lines 28 to 62
which are the ot her pages. Delete the footer from the
code and get rid of all t he links except the first. Make
the link for t he first just '#' and change the title as shown.
11
Control the camera
Add the code shown to the head sect ion under
the other script lines. This links to t he PhoneGap library.
and when the but ton is pressed. calls the phone's native
camera function. which brings back the fi le URI. lf the
camera is successful the funct ion show_pic is called. if
not. t he function fail is cal led.
001 <script type=''text/javascript''
charset="utf-8" src="phonegap. js"X/script>
002 <scr i pt t ype='' t ext/j avascript''
charset=''utf-8''>
003 function getPic() {
004 navigator.camera.getPicture(show_
fail, {
005 quality : 50, destinationType:
Camera.DestinationType.FILE_URI
006 }) ;
007 }
... ..
Ht
]
s
n
IW8 ..

........,..
.. ..
.._
Save and resize
Save the image for web as PNG fi le and name
it 'icon-android-72.png in the icons folder from the
previous step. Now resize the image to 48 pixels and
save again as 'icon-android-48.png. Finall y resize to 36
pixels and save one last time as
this creates icons for different sized devices.
15
Make splash
Now inside Photoshop create new image, 360
and add your artwork for your splash screen.
Now save this as 'splash.png' in the root folder Having
splash screen gives feedback to the user that
something is happening when they launch their
Setting preferences
Addi ng the next lines of code wi ll add the link to
the splash screen in si milar way to the icons. The next
line tells the not to rotate the orientation and keep
it in portrait mode. The fi nal line tells the to run at
fullscreen so the stat us bar that has the bat tery and
signal indicator is removed.
001 <gap:splash src=''splash.png'' />
002
003 <preference name="orientation"
value="portrait" />
004
005 <preference name="fullscreen" value="true"
/>
20
lnstall and launch
Once again. wai t few moments for t he to
build and t hen click on t he QR code icon to display t he
larger QR code. Snap this again wit h your QR code
reader and download the in the link. Once
downloaded. install and then launch t he You wil l
see t he splash screen fully working as t he starts.
settings
ln the root folder you wi ll see fi le named 'config.xml', open this
and change id name to your own. eg com.webdesigner.camtake'.
change t he name to camtake' and change the author sett ings to your
own. This wi ll now give the right name when we the again,
but we need to add information about the icons and splash.

t
19
Rebuildthe
application
Save t he config f ile no\N
and close it to return back
to t he index.html file. Make
sure the PhoneGap Build
Service panel is still open.
and if the QR code is still
click t he button to
go back to the Build
Service. ln the bottom
r ight-hand corner cl ick t he
Rebuild Application button
to recreate t he
UsetheApp

..n.. .... fnf
--
.......
. -
-
Picture
Finally we have the fully installed and working the
device. cl ick the Picture' button and you will access t he phone's
native camera taki ng software. Take your image as normal. and when
you click okay to return to your the image will displayed.
17
Add the icons
ln order to get the icons to
to t he we need to add few
extra lines to the config xml fi le. These
lines of code simply tel l the to look in
the icons folder and apply these icons to
t he actual when uploaded to
PhoneGap BLJil d. lt's simple bLJt effect ive .
001 <icon src="icons/icon-

002
003 <icon src=''icons/icon-
android- 48.png'' width=''48''
height="48"/>
004
005 <icon src=''icons/icon-
android- 72.png'' width=''72''
height="72"/>
-' " CSS3 " jQuery tl' " Photoshop '

li'icks ixes
UnJocking the of web design

IS
7

8
* This offer entitles new UK Direct Debit subscribers to receive their fi rst 3 issues for .fr5. After these issues, subscribers will then
.f,25.15 every 6 issues. Subscribers cancel this subscription at any time. New subscripti ons will start from the next issue.
Offer code 'ZGGZI N' must quoted to receive this special subscription price. Direct Debit Guarantee on request .
** This is US subscription offer. The USA issue rate is based on an annual subscription price of ,t,65 for 13 issues which is equivalent to
$104 at the time of writing compared with the newsstand price of $14.99 for 13 issues being $194.87. Your subscription will start from the
next issue.
Masterthe
.. art ofweb

Expert tutorials
ln-depth guides and onl ine resources for L5,
JavaScript, platforms and more
lnspirational features
1
Showcasing the latest design tools for innovative
_ web development
Plus free CD!
-
Try 3 issues for cES in the UK*
or just 8 per issue in the USA**
saving off the newsstand price
For of(ers please visit
.1 1nesu s.co.u
uote code Z i IN
Or telephone: UK 084 4 848 8413 Overseas +44 1795 592 878
ACf
, 1
v"iPad v"iPhone v" Android phone v" Android v" Apple v" Windows
-
) u more lmagine digital editions and for the www.G reatD.Igltal Mags.com
latest issues and best offers, please go to
~ - - ~ - - - - ~ ~ - - ~ ~ ~ ~ - - ~ ~ - - ~ - - - -
V HTMLS V v jQuery v v Photoshop
Unlocking the potential of web design
.,

Get the most out
of essential web
design scripts,
frameworks
and plug-ins
Master the effects and
styles that will make
your website stand
out from the crowd
Volume 1.
IMACil.8
-

Step-by-step
tutorials to help
you optim ise
and improve
you r web site
ISBN13. 978-1908955241
PUBLISHING 9 781908 955241 >
www.imaginebookshop.co.uk

Web Design Tips, Tricks & Fixes Volume 1 V413HAV

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Web Design Tips, Tricks & Fixes Volume 1 V413HAV

Загружено:

Авторское право:

Доступные форматы

V413HAV

Вам также может понравиться

Web Design Tips, Tricks &amp; Fixes Volume 1 V413HAV

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Web Design Tips, Tricks &amp; Fixes Volume 1 V413HAV

Загружено:

Авторское право:

Доступные форматы

V413HAV

Вам также может понравиться

Web Design Tips, Tricks & Fixes Volume 1 V413HAV

Web Design Tips, Tricks & Fixes Volume 1 V413HAV