Jun 032013
 

 HTML5_Logo_512

Old habits can die hard. But don’t worry, Paul Wyatt and Joseph Luck are here to guide you through launching a site in HTML – with traditional Flash sensibilities.

For years Flash has been a great creative tool for websites, animation and even broadcast work, but it’s becoming increasingly necessary to look at new ways to build websites and display content.

A key personal motivation behind this tutorial was a folio website, originally designed seven years ago as a showcase of the ‘campaign website’ flavour – with a filing cabinet dropping from the sky and displaying content with animations and transitions in between seemingly everything. Over seven years this website had been updated but failed to keep up with career and work changes, and the demands on it to display different types of content. Something that was easy to update, would work on everything and also serve as a ‘shop window’ for work was required.

But Flash and the showman go hand in hand, and those sensibilities endure. The new site was to have a resizable image-based homepage showcasing full browser width and height images to their best. The aim was for this to rotate and transition from one image to the next and on the sub-homepages have a cut-down version. Clean, bold typography and clear labelling were also key.

MORE:   Apply Flash principles to HTML | Tutorial | .net magazine.

 

 


 

Feb 072013
 

internet-web

One of the first things to look at is the size of your HTML code. This is probably one of the most overlooked areas, perhaps because people assume it’s no longer so relevant with modern broadband connections. Some content management systems are fairly liberal with the amount they churn out – one reason why it can be better to handcraft your own sites.

As a guideline you should easily be able to fit most pages in <50KB of HTML code, and if you’re under 20KB then you’re doing very well. There are obviously exceptions, but this is a fairly good rule of thumb.

It’s also important to bear in mind that people are browsing full websites more frequently on mobile devices now. Speed differences between sites viewed from a mobile are often more noticeable, owing to them having slower transfer rates than wired connections. Two competing websites with a 100KB size difference per page can mean more than one second load time difference on some slow mobile networks – well into the ‘interrupted thought flow’ region specified by Jakob Nielsen. The trimmer, faster website is going to be a lot less frustrating to browse, giving a distinct competitive edge over fatter websites and going a long way towards encouraging repeat visits.

MORE:  Make your sites load faster | Tutorial | .net magazine.

 

 


 

Aug 302011
 

 

 

Responsive design is no longer just something you’ll find on the portfolio websites of the designers and developers who pioneered the idea. These days using media queries to adapt to varying screen sizes is well on its way to being a mainstream design goal.

Head over to a responsive design showcase like Media Queries and you’ll find plenty of “real world” websites — like Opera or Arizona State University — using media queries to build responsive websites.

via Build Faster Mobile Websites with ‘Adaptive Images’ | Webmonkey | Wired.com.

Jul 112011
 

 Ethan Marcotte coined the term responsive design to describe the process of using liquid layouts and media queries to scale websites so that they fit any screen size.

via Tips, Tricks and Best Practices for Responsive Design | Webmonkey | Wired.com.

Forget Photoshop, build your comps in the browser. It’s virtually impossible to mock up liquid layouts in Photoshop, start in the browser instead.

Scale images using img { max-width: 100%; }. For very large images, consider using something like Responsive Images to offer the very smallest screens smaller image downloads and then use JavaScript to swap in larger images for larger screen.