Digital UK Design Blog

Designers rejoice and huddle together for the unveiling of our latest addition to the Floating Frog family. We’re extremely proud and excited to announce the arrival of FrogsThemes.com, a new website dedicated to providing all a creative needs to create their online portfolio. FrogsThemes.com will primarily be focusing on creating professional looking Portfolio WordPress Themes and HTML templates. We’ll also be showcasing the best portfolio templates on the web and bringing them into the limelight on FrogsThemes.com. We’ll also be offering helpful articles, how-to guides, best practices and tutorials to those creatives wishing to create their own portfolio from scratch.

The grand launch and opening giveaway!

To celebrate all the hard work that’s been put into FrogsThemes.com, we’re giving away (some say foolishly) an amazingly designed WordPress Portfolio Theme called FolioGrid. Designed specific to fit purpose, FolioGrid is a new breed of WordPress Theme. 3 colour schemes and packaged with advanced automatic features, FolioGrid aims to be a dynamic blank canvas for any creative to build upon. Painters can showcase their artwork, install a ecommerce plugin and sell online. A web designer may want to reskin FolioGrid but use the sophisticated grid based jQuery layout and automatic thumb generation to create their own unique online portfolio and finally Joe doe, with no programming or WordPress experience may just want to use as is. Anything is possible with FolioGrid and we’re over the moon to be in a position where we can give it away, into the online creative community and lift the professional bar on online portfolios.

Welcome FrogsThemes.com

The new place to be seen and heard.

FolioGrid: Grab it while it’s hot!

A FREE WordPress Portfolio Theme

Summary: WordPress Portfolio Theme, 3 colour schemes, built with love.

Features at a glance:

  • Fluid jQuery grid-based dynamic layout and transitions
  • Auto sizing thumbs
  • Comment avatar enabled
  • Multiple page templates
  • Widget enabled
  • SEO friendly
  • Pure CSS based layout
  • Easy to reskin, all three themes contain no template images, all styling is done through the CSS file
  • No complicated and restrictive custom fields to handle
  • Low file size, ultra quick loading
  • Cross browser tested, even IE6 displays a neat looking portfolio
  • Ideal for all types of portfolio, FolioGrid is a creatives blank canvas

More information on FolioGrid

FREE download

Licence: Free to use with a link back to Frogsthemes.com. Creative Commons Attribution 3.0 Unported License.

Feedback

Let us know what you think! Over the coming weeks FrogsThemes.com will be launching a Hall of Fame where users of FolioGrid can show off their portfolio of work and theme customisations.

Whether you’re an SEO, a developer, or just a bit of a geek, you’ve probably accumulated half a dozen firefox plugins over the years that slowed your browser down to a crawl. If like me you switched to Chrome, you’ve replaced some of these plugins with a pile of bookmarks instead – the browser stays fast but actually using it for work is a hassle. Quix, unleashed by Yoast last week, is a solution to these problems – an extensible bookmarklet that gives you toolbar/bookmark functionality with just keyboard commands.

What does that mean?

Well, say you’re using Chrome and you’ve got no toolbars, but you want to see the number of backlinks according to Yahoo! Just open Quix, type in the relevant keyboard shortcut (yl), and hey presto – you’re taken to a Site Explorer results page.

Time saving? Easy to use? When you spend half your day exploring the innards of the web this can only be a good thing. Not only that, but it’s extensible (i.e., if you’re a smartypants you can create your own commands) – if Quix doesn’t do something you need, you can improve it yourself :)

Yoast was kind enough to answer a few questions on his new bookmarklet:

We first saw Quix at Think Visibility in September (and were sworn to secrecy) – did you develop Quix with Marketers in mind?

Well to be honest, Quix was designed with me in mind: it scratched an itch I had and seemed like a great way to integrate a lot of my tools into one. After showing it to a couple of friends, it became pretty obvious this is something a lot of web power users wanted. Among those power users will be a lot of marketers, as the tool comes with a pretty hefty set of built in commands for marketers because of my own background, but I think a lot of web developers will benefit from it too.

It seems like Quix could give people cool functionality on the browser of their choice – does it work across all browsers?

Yes, even on your iPhone! I’ve got a pretty good write up about how to use it with the different big browsers out their on the browser page (http://quixapp.com/browsers/)

I’m not so technical – is there a tutorial on how to create my own commands?

Not another one than on the Syntax page, but I probably need to cook one up :)

Are you going to add more commands to the plugin?

Of course, I’ve added 4 or 5 since launch already! If you’ve got good ideas, please do submit them either on Twitter or through getsatisfaction.

An introduction to Quix

Final thoughts

So, I’m giving Quix a go in my working day and so far it’s a neat little app. I always thought when Chrome came out that I’d miss toolbars, but that kinda seems like the old way of doing things now. Typing commands into the Chrome address bar and using shortcuts to perform operations with Quix puts an impressive arsenal at your fingertips. It’s an intuitive way of working, it’s faster, and it feels like the future :)

Apple iPad vs Amazon Kindle

January 29, 2010 | News & Reviews | Gary Hartley | 3 Comments »

Amazon has release a Kindle iPhone app that allows users to read their Kindle books on their hand held device. The app is free to download from the Apple app store and connects iPhone and iPod users with over 400,000 Kindle books. Now with the announcement of the new Apple iPad, launching later in the year the question is “Could the iPad be a competitor to the Kindle as an e-book reader?”

Industry opinion

Everyjoe.com

So people are saying that the iPhone Kindle app, which more or less provides the same ebook reading functionality on Apple’s smartphone, will kill the Kindle. Makes sense actually. After all, why spend $360 on a gadget that can only do one thing, when you can spend roughly the same for a smartphone that multi-tasks? This argument appeals especially to die-hard fans of the Apple “experience”.

At the same time however, I can tell you that reading text on a backlit display strains the eyes. The e-ink of Amazon’s Kindle, on the other hand, is easy on the optics. That’s still why a lot of us still prefer reading printed words on dead trees, even if literally all books ever written are available through the web browser; no tiring light shines from them.

Future Kindles will definitely display color, free from the limits of grays. And you can bet that development will make Amazon’s reader more attractive; who wouldn’t artificially generated color pages that are easy to read? Amazon has the luxury of concentrating on ebook research, unlike supposed future competitors like Apple who are taking a more broad research towards R&D. What do you think?

Okay so in theory the iPhone is too small to really compete with a Kindle and the screen sucks but how about the iPad. The screen is still an issue but it’s around the size of the larger Kindle DX plus is does so much more. The Kindle does just one thing though people argue it does it well and has been designed specifically for the job.

Apple app for iPhone and iPod (and iPad?)

Here’s some quick features of the app:

  • No Kindle required
  • Get the best reading experience available on your iPhone or iPod touch
  • Access your Kindle books even if you don’t have your Kindle with you
  • Automatically synchronizes your last page read between devices with Amazon Whispersync
  • Adjust the text size, add bookmarks, and view the annotations you created on your Kindle
  • Read in portrait or landscape mode
  • Select alternate background and text colors to improve reading comfort in low light conditions
  • Tap on either side of the screen or flick to turn pages
  • Pinch to zoom images in books
  • Tap and hold on a word to create a note or highlight
  • Whispersync will back up and synchronize annotations with your other Kindle devices

Kindle Book Readers

I find the syncing feature a great asset of the app. It also opens the door to Kindle books so in theory the only difference between the iPad and the Kindle is the user experience and the screen.

Comparison

Price wise the the Apple iPad and equivalent Kindle DX are both competitively priced. The cheapest iPad without 3G is on paper at the moment $10 more than the top spec Kindle.

Final thoughts

If we were to analyse this battle solely on the premise they are both e-readers and are sold as such with no other features then surely the Kindle would be the wise choice. The kindle is brilliant at what it does and price wise is competitive with the iPad and it’s competitors. The iPad costs more and hasn’t got an ideal screen for long periods of reading. So in our opinion, as an e-reader, the Kindle is a clear winner. However this isn’t an e-reader face off, the iPad isn’t an e-reader, but can be used as one. In fact, what exactly is it? Who is it aimed at? Is it trying to be a Jack of all trades? What is it’s USP? Soooo many questions…

We’re sure with time the iPad will fit within a niche it’s ment to be in. It has the potential to be amazing primarily due to it’s vesitility, just not as a users primary e-reader.

Thanks to Amazons Whispersync technology we see handheld devices like the iPhone and BlackBerry being perfect accompliments to the Kindle. These devices are unlikely to become a users primary e-reader but there is certainly room to support the technology on other devices.

Reviews elsewhere

Amazon Kindle DX versus Apple iPad
The iPad Vs. The Kindle: How Should Amazon Respond?
iPad vs Kindle DX – The Definitive Comparison

Instant Blueprint allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster!

Instant Blueprint

If you’re after saving time by setting up the generic website framework of your next project then this could save you time. Personally I’d like to see a few more options like including the options to setup a specific CSS Framework.

Read the rest of this entry »

A new dawn for The Floating Frog

I thought I’d take this opportunity to announce the pending arrival of some WordPress themes I’ve been working on. Over the coming days, weeks, months, The Floating Frog will be shifting dramatically from it’s current position, from a leading UK based digital design blog to a portal where designers can drop in and access the tools they need designed specifically for them. I will tell more at a later date once things are in motion but until then I’d like to put a flavour of this out there now.

Calling all designers

It’s fair to say most designers aren’t developers and building their own website can be some what restricting. The design I’m sure is brilliant but to convert that into a website with full CMS capabilities will either cost them money, time, headaches or even all three. Using an open source CMS like WordPress is an ideal way of tackling the management side of the site but this doesn’t answer the frontend dilemma. Unfortunately I haven’t found any WordPress Portfolio Themes that I think are good enough to use to showcase my work. They never seem to tick all my boxes. Also with it running on WordPress, theme developers feel it necessary to add in all the features WordPress offers. The portfolio part of the theme can be buried within the navigation on it’s own section with maybe a homepage show reel demoing the latest work. The rest of the homepage is filled with blog rolls, blog articles, navigation, twitter feeds and so on. This is why I decided to design and develop a WordPress Portfolio Theme specifically targeted at showcasing the work of the creative community.

A WordPress theme for creatives

Coming soon is a theme called FolioGrid, a WordPress theme designed for creatives to showcase their work in a grid/gallery based format. The theme will be completely fluid, allowing every part of a browsers screen to be filled with their work. The beauty of the layout is that the emphasis is on the work, not the design of the theme. No fancy background images or rotating banners, just a clean content focused canvas for the work to flow on. Several colour variations will be made available, for example a white theme, a dark theme, a yellow theme and so on.

Feedback wanted

It would be great to hear your thoughts on this, does it sound right for you? How much would you be willing to pay for a ready to use online portfolio with full CMS? Any other thoughts…

Viewing historical browser market share statistics the old fashioned way is a pretty dull task. There’s nothing less inspiring than sitting staring at a table of data that visually tells you nothing. On the flip side we all like a good pie chart right? All those colourful segments that kind of look like a Terry’s Chocolate Orange, indicating immediately the impact of the resulting data in a visual form.

Historical browser statistics

Current browser share statistics is something I reference from time to time and I use W3schools.com as a primary source for this data. A tool I recently discovered from Axis shows the historical browser statistics from W3schools.com in a custom visualisation. It tracks back to January 2002 and includes historic deprecated browsers such as IE4.

Conclusion

A cool online tool for viewing historical browser market share statistics. Witness the demice of Internet Explorers dominant control of the market with this intelligent custom visualisation. Let us know what you think of the tool and the market share as a whole.

I’m a web designer by day and a web designer by night, I pretty much live and breath the web. I use many tools to assist me in my workflow, tools that both assist me in maintaining quality in my work and also in saving time, time I’d much rather spend catching up on the latest season of The Wire.

One pretty cool tool I use to assist in the development side of web design are grid overlays. Grid overlays are exactly what they sound like, a grid that overlays your website. I use them as a quick visual guide to check to see in all my elements line up as intended and are pixel perfect.

Browser plugins

One option is to use Firefox and an extension called Gridfox. This is useful as I already use Firefox as my main development browser.

Scripts

Andy Budds Layout Grid Bookmarklet

A more die hard approach would be to use Javascript. Andy budd wrote a nice overlay grid bookmarklet, originally inspired by Khoi Vinh’s post about using a background image of a grid for layout. The script is also demonstrated on the SubtleGradient website.

#grid

A personal favourite is this Hashgrid script you can embed on your site. The clever part is you can turn it on and off by typing ALT + G – g33k! The clever scripting gives me the functionality I need, if I have a particular layout to test with a different structure I can simply replace the bg image.

Designing with Grids in mind

Do you or have you considered using a CSS framework when developing sites? Personally I don’t as I feel I can write lightweight CSS which is both flexible and cross browser. Photoshop guides and grids help in the design phase but you lose these when developing, until now of course.

In summary

These tools help bridge the gap between the design phase (Photoshop, guides and grids) and the development phase (using these tools to test and compare). Let us know if there are any other tools out there that do something similar, I’m sure I’ve missed some, oh and let us know what you think of these, if you already use them and what your experiences of working with them are.

CSS Inheritance: Slideshare Presentation

December 29, 2009 | CSS | Gary Hartley | No Comments »

CSS Inheritance is pretty easy to understand but can take years to master. First you have the document tree to fathom, then you throw in the multiple value types, the selector groups and their individual behaviours and then it all becomes a little more complicated. You have Ancestors, Descendants, Parents, Children, Siblings and the family pet to deal with, it becomes a real head spinner when left to look after them all with no firm grounding as to how to properly organise them all. This is until now, we present to you the CSS Inheritance Slideshare Presentation, classified a U so is suitable for all experience levels in CSS.

Conclusion

Now hopefully you are fully versed on CSS Inheritance, let us know what you thought. Did you learn anything new? I’ve been hand coding CSS for as long as it’s been feasibily supported and I have certainly picked up a firm understanding of Inheritance.

More CSS resources by us

CSS Shorthand

CSS Shorthand

CSS Shorthand top tips. Think you’re a CSS Guru? You should checkout CSS Shorthand, we’ve even written an article on it.

CSS for ABSOLUTE BEGINNERS – shaping up with CSS

CSS for ABSOLUTE BEGINNERS training presentation. If you’re an absolute newcomer to the scary world of web design and wish to start learning things from scratch then this is the presentation to watch.

The CSS Bible

The CSS Bible – full chapter and verse, every article on css you’ll every need from third party sites. A great post to bookmark.

A Decade in Design: 2000 to 2009

December 28, 2009 | News & Reviews | Gary Hartley | 3 Comments »

In just a matter of days our glasses will be full of cheap Brut Cava, the countdown to midnight will begin and we’ll drunkenly sing along to Old Lang Syne as we welcome in a new year, a new decade and the start of 2010. Looking back 10 years I regale my girlfriend to where it all began where I, a mere design student, started the long road to design stardom, stardom which still avoids me of course but the start of a career that sees a lot of change and evolution in the design industry. Print is in decline, web has been a rollercoaster of growth and decline but most amazingly my mother gets her first computer and starts blogging (no you can’t have a link she’ll kill me).

Good took a look back at the last decade in design and highlighted the most significant moments. We chose are favourites below but please do click through and read the entire post as it’s really worth the read.

It will also be great to hear your achievements from the last decade, whether you’re new to the game or you’re an old skool designer make sure you regale us below in the comments.

2000

Tech stocks plummet, signaling the official burst of the dot-com bubble. Thousands of newly-minted web designers are laid off. San Francisco’s cafes swell with unemployed creatives paying inflated rents.

2001

Apple’s first retail store opens. Steve Jobs announces the first-generation iPod, which can hold 512 MB of music. It is available only in white.

2002

The stop-motion Lego animation of the White Stripes’ video Fell in Love with a Girl by Michel Gondry heralds a new generation of video and commercial auteurs who bring their specific aesthetic to feature films (and Criteron Collection DVD sets).

2003

Jeffrey Zeldman’s book Designing with Web Standards transforms the way that web developers interact with code, calling for universal accessibility across browsers.

2004

The Dove Campaign for Real Beauty is launched by Ogilvy & Mather, featuring self-esteem messaging for young girls, an attack on glossy magazines, and imagery of real women shot by Rankin.

2005

The One Laptop Per Child project announced by Nicholas Negroponte. The lime-green laptop is later designed by Yves Béhar.

2006

The Wii gaming console is launched by Nintendo, forever transforming the way we interact with games. We never need to go outside again.

2007

The 2012 London Olympic logo by Wolff Olins is revealed, sparking a international scandal as more than 50,000 British citizens sign a petition against its design. An animated version is said to cause seizures.

2008

Shepard Fairey creates the “Hope” poster to support Barack Obama’s presidential run. It becomes the single most representative image of any political campaign, ever. Fairey spends the next year in a heated fair-use battle with the Associated Press. No one wins. Oh, except Obama.

2009

Dubai’s Burj Dubai, designed by Adrian Smith, tops out at 2,684 ft, the tallest man-made structure ever built. It’s scheduled to open in January 2010 as reports of Dubai’s downfall begin to trickle into architectural publications.

2010 – What next?

Page 4 of 33« First...23456...Last »

©2006 - 2009 The Floating Frog