New! Have customers download your content straight to their phone by creating an App for iPhones. iPhone App Training will allow you to create iOS5 apps from scratch. Having a user download your app onto their phone or tablet gives you a direct connection to customers that a traditional website lacks.
Websites are still overwhelmingly aimed at desktop users using a mouse and keyboard. However mobile and tablet use is on the rise and touch screens are starting to replace desktops as the number one way to surf the web. Should web design be targeted at touch screen users?
Breaking all analysts’ predictions, smartphone sales beat sales of PCs in 2010. In 2011 you can add in tablets, netbooks and laptops – the sales of touch-oriented devices has far surpassed traditional mouse and keyboard desktop systems.
As user habits change, so should developers – by ensuring they have up to date web design skills, and thinking about touch-device users when they design. Stay ahead of the trend by taking one of our Web Design Training Courses including the brand new Mobile Web Design Course which provides a best practice toolkit for creating mobile websites.
The boom in native mobile apps - especially games – has led to the development of a wide range of innovative new touch gestures, and as the mobile web becomes more dominant, we will start to see a wider range of touch gestures employed in web sites, as well as in native apps.
Back in 1999 we were one of the first training companies to offer web design training. At that time a lot of businesses still didn’t have websites – web designers were charging a fortune for their services and were always off snowboarding!
The advent of the web was a step change for all businesses – and our Web Design Week package (incorporating our Web Design, Dreamweaver and Photoshop for Web Graphics courses) helped our clients to take control of their websites instead of outsourcing everything to developers. The package is still popular with newcomers to web design.
Fast forward 12 years and we’re seeing another major step change in the way people access the web – MOBILE!
Most phones can access the web now – and the use of smartphones with proper web browsers is exploding. Browsing from mobile devices is set to outstrip desktop browsing within the next couple of years. Our own Google Analytics reports show that our mobile traffic is up 230% in the last year – for more detail on this read our latest post on Mobile Web Design.
Is your website mobile friendly?!
Think about what the figures above might mean for your business… In the near future, more than half of your users might be visiting your website from their phone – and what are they going to see?
If your competitors’ websites render perfectly on their mobiles and yours is unreadable – who are they going to call or e-mail first?
Thankfully – our new Mobile Web Design Course package is here to help! Aimed at those who already have basic web design skills (including HTML and CSS) – our new week long package provides a comprehensive overview of the design considerations and main technologies you will need to understand to whip your site in to shape for mobile users.
Well well well - it seems that Adobe can’t stop releasing previews and betas at the moment!
We recently saw the unveiling of Adobe Edge – a potential future replacement for Flash which creates animations using HTML5. You might like to check out my summary of Adobe Edge (and my atrocious attempt at an animation).
Then last week, they also lifted the lid on Adobe Muse. Muse is a “code name” – so we wait with baited breath to see what the final product will be called. Adobe is currently “working with the branding team to determine the final name of this product” (perhaps the developers are fans of the Devon rock band of the same name!)
Whatever it ends up being called – Muse is a web design tool that allows designers without any coding experience to create websitedesigns and publish them without having to look at any HTML. It’s a What You See is What You Get (WYSIWYG) tool.
Hang on a minute though! Adobe already has the industry standard WYSIWYG web design tool on its books in the shape of Dreamweaver – which has been around for a LONG time (we’ve been running web design training since 1999 and our Dreamweaver course was the first Silicon Beach Training ever offered!)
Dreamweaver was originally released in the age of static HTML pages – and has had to reinvent itself over the years to keep up in the age of dynamic database driven websites. It hasn’t done a bad job of that, and remains a very useful design tool and code editor (Dreamweaver CS5.5 also includes tools for mobile authoring – which is the biggest growth area in web design at the moment). But – to use Dreamweaver effectively to produce dynamic sites which include blogs, social integration etc… (all of which are really important now), increasingly requires more coding experience.
This is where blog and web design CMS systems like WordPressand Joomla have come in to their own in recent years. Via simple interfaces and easy to use plugins, these tools allow people with genuinely NO programming experience to set up sites with interaction and social integration. They are theme based, and don’t have as much flexibility in terms of layout design as Dreamweaver – but nevertheless can deliver professional results.
So who is Adobe Muse for, and what can it do?
Adobe Muse’s strapline is “Create websites as easily as you create layouts for print” – so it’s clear that this product is aimed squarely at print designers who want to build websites (the tool was created by the team behind InDesign)
We’ve downloaded the beta, and the interface will certainly be familiar to all you Photoshop and InDesign users out there:
Click image for full-size version
OK – so far so good – Muse is a kind of “Dreamweaver lite” with a more designer-friendly interface. I had a quick play, and without having to follow any tutorials quickly made a very simple 4-page site using a master page.
For a long time the industry standard tool for generating animated and interactive web content has been Flash.
The vast majority of animated content on the web including banners, intro sequences, ads, cartoons and even some navigation elements have traditionally been developed in Flash.
However - things have started to change over the past couple of years.
2) The latest web standards including HTML5, CSS3 and JavaScript libraries like jQuery are enabling developers to produce animated content that is more accessible and has faster load times than Flash
3) More and more browsers are now supporting HTML5 and CSS3
So if you can develop animated content that contains the same functionality as Flash, but will load faster and display properly on ALL browsers – what is the future for Flash…?
Adobe Edge is a new animation tool from Adobe, that can create animated web content using HTML5, CSS3 and JavaScript. You can import images in most web formats including jpeg, gif and png and also create tweened animations using vector shapes.
In short – Edge looks a bit like Flash – without the Flash! Here’s the interface. The stage and timeline will be familiar to all Flash users out there:
Adobe Edge Interface
Why is Adobe Edge Important?
Tools like Adobe Edge are important for anyone who wants to be able to use animated web content on their site which is accessible from all devices, and who don’t want to have to learn how to hard-code HTML5, CSS3 and jQuery.
jQuery works in every browser that matters. From IE6 to Chrome 9. From Mobile Safari to Blackberry Tablet OS. You don’t need to worry about the incompatibilities.
2) CSS3 Selectors
jQuery lets you navigate the DOM using a syntax specifically designed for the job – CSS! If you want to find all the paragraphs on the page: $(‘p’). If you need all the hyperlinks with a class of rollover: $(‘a.rollover’). For anyone who’s ever needed to use the DOM API this will be GOOD NEWS!
On April 1st I attended Brighton SEO - the brilliant Brighton Based SEO conference arranged by Kelvin Newman of SiteVisibility. One of my favourite presentations of the day was given by Dr Harry Brignull (who many years ago actually delivered a couple of Director courses at Silicon Beach Training!). Harry is a User Interface designer, who has created a brilliant Wiki called Dark Patterns, which highlights ‘Black Hat’ design techniques in website User Interfaces (or UIs).
Many people are familiar with the term Black Hat in the context of SEO (i.e. SEO techniques that go against Google’s guidelines) – however this is the first time I’d heard the term used in the context of User Interface Design.
“Dark Patterns” are UIs that are deliberately designed to confuse, dupe and exploit users in to parting with more cash than they were expecting, or to sign up for additional services they didn’t want.
Have you ever been shopping online and got to a page where you’ve really had to look hard to opt-out of a service you didn’t want, or noticed a check-box that had been ticked by default that you had to un-check. These are examples of fairly simple Dark Patterns – user interface features that are designed to make users who are in a hurry (i.e. most of us, most of the time) sign up for options that they didn’t necessarily want.
It’s one thing to end up on a mailing list you didn’t want to be on – but Dark Patterns can be much more devious than the simple ‘box checked by default’ trick – and some of the really nasty ones can lead to you paying more money without realising. This is the sort of thing that companies can only get away with online – the equivalent, in Harry’s words, of someone “slipping an organic chicken in to your trolley in Tesco’s without you realising”!
In his presentation – Harry gave examples of some fairly high-profile companies that are using Dark Patterns, including Comet, who automatically put a £30 iPad case in to your basket when you buy an iPad, and Wired Magazine, who use a deliberately confusing interface to make it hard for users to unsubscribe from all of their services.
However he awarded the Evil Genius Award to RyanAir (well known for scamming their customers), who have a really devious trick question to dupe passengers in to signing up for travel insurance. See Harry’s explanation below – a description of this devious piece of design can also be found on the Dark Patterns website here
HTML has had many incarnations over the years. All of these are similar, but successive refinements have been added over time to cope with our evolving understanding of the best way to make a website.
HTML5 has been on the radar for a while (in fact we wrote about its emergence in this blog in January 2010). As new browsers (including the new Firefox 4) start to support a wider range of HTML5 features, it’s use among developers is sharply on the rise. To meet demand we now offer a regular public HTML5 Training course, which builds on the knowledge gained in our existing HTML4 Training and CSS Training courses
We still get asked a lot of questions about the different versions of HTML – especially the differences between HTML4 and HTML5. Throw XHTML in to the mix and it can be a confusing picture for the uninitiated!
Billions of people are surfing the Web via mobile devices – more than ever before, with new and better tablets and mobiles coming out all the time. If your Web page doesn’t display well on Mobile devices with WiFi then you are missing a trick. All Web Developers should learn how to design for mobile devices including iPhones, smartphones, cellphones, PDAs, and palm-sized computers.
Silicon Beach Training provides Dreamweaver Training, Social Media training, Google Analytics training and SEO training in Sussex. We are also PRINCE2, MSP and ITIL accredited. Please take a look at our PRINCE2 training, ITIL Training and MSP Training courses in Brighton, Sussex.
Use only HTML tags such as: p, br, b, i, blockquote, center, ul, ol, li, images, pre, headers, and simple tables
do not use frames, layers, imagemaps, Javascript, Java or plugins
Use an alternative stylesheet that can be used by mobile devices — the very presence of a mobile-specific stylesheet will override all styles from your screen stylesheet, thereby simplifying the presentation of your site.
Keep your layout small, and avoid clutter
Be aware of how graphics are displayed
Images for Mobile
Images are not easy to display well on many mobile devices. Whilst most mobile browsers will support images some are not in color, and they will often have low resolution.
Currently many mobile devices have a screen width and height of approximately 150×150 pixels. iPhones and other smartphones are a bit bigger. When devices resize your images to fit that small screen it can result in very poor quality images, or they don’t resize they are too much too big for the screen.
Links for Mobile
Links can be the most important element on the mobile page. Make them easily identifiable. When styling your mobile links, it is good practice to emulate conventional link appearance with an underline, distinguished color, and perhaps a slightly contrasting background colour.
HTML for Mobile
As many mobile devices (excluding smartphones) support a limited version of HTML 3.2 its best to stick with basic layout and formatting tags.
Content for Mobile
Writing good content for mobile is critical. Too much will be difficult to read – too little and you won’t be providing enough information. Decide what is essential. Pages designed for Mobile devices are usually used as a reference and should be straight to the point.
Ask yourself the following questions:
What are mobile visitors looking for?
What information do they want/need?
Can I reduce sidebar content?
Which navigational elements are redundant?
Which stylesheet elements can I do without?
Points to Remember
Keep your pages small – essential content only
Navigation should be easy, clear and concise
Avoid any graphics that are not essential
Always Test your pages Be sure to test your pages in both smartphones like the iPhone and PDAs.
On April 1st I attended Brighton SEO - the brilliant Brighton Based SEO conference arranged by Kelvin Newman of 
HTML has had many incarnations over the years. All of these are similar, but successive refinements have been added over time to cope with our evolving understanding of the best way to make a website.
