10 seamless website designs
July 2, 2008
One of the challenges in designing websites is to create a layout which takes into account all the different screen sizes at which it may be viewed. Some websites use fluid layouts (where sections of content will automatically resize to fit the screen dimensions) to get around this. Not all designers want to work with fluid layouts, however. I have compiled a list of ten websites which are designed to work at small or medium screen sizes without using fluid CSS layouts, but which don’t look lost in a sea of blank space on a larger screen.
I deliberately omitted sites which were mainly or entirely designed in Flash, because I was keen to review sites which rely on CSS/XHTML for their layout. A few of the sites listed do incorporate Flash animations, but these do not constitute the majority or whole of the site’s layout. I also omitted sites where a seamless design was only used on a front (or splash) page, because I wanted to see how the bulk of a site’s content could be incoporated into a seamless design.
Jesse Stephens
This site fits acceptably into a 800 x 600 pixel screen size, but has been designed to be viewed at 1024 x 768 pixels or bigger. The offset layout elements and the minimal colour scheme help to balance the design and the negative space of the background when viewed on a larger screen resolution.
Digital Zoo
The content of this site flows well below the fold, in a familiar web layout style. What makes it looks less “boxy” at first glance is the striking beetle image (actually a Flash animation) which fades to black at the edges, merging with the black background (the effect is repeated in a still graphic below the fold). This site has been designed for viewing at 1024 x 768 pixel screen size or bigger.
Aespec
This layout works at small, medium and large resolutions: at 800 x 600 the robot disappears from the screen but the logo and welcome text remain. The full design is best viewed at a large screen size, and the main elements (logo, welcome, robot) follow a straight line diagonally down and to the right. The design elements are maintained through the site, although the robot is sadly missing from the portfolio page.
Mad in Spain
This minimalist design fits acceptably into a 800 x 600 screen size, but has been designed for 1024 x 768 or above. The image of overlapping discs embraces the white background; the final disc in white with green centre elegantly shifting the image into the negative space to the right.
AdLitteram Group
Another site designed for 1024 x 768 and bigger, this site features a Flash animation with imagery that fades into the background red colour. The layout is consistent across the site, although each page has its own animation.
Yellowood Store
Like the previous example, this site features an image fading into the background colour, giving the appearance of a backlit forest masking the edges of a sunlit glade. The content sits in transparent boxes placed over the photograph. However, the Store and Blog sections are not seamless because they extend far below the edge of the background photograph. This site fits acceptably at 800 x 600 but is designed for 1024 x 768 pixel screen size.
Nick Day
A very simple, one page site which fits a 800 x 600 pixel screen size. However, the red flourish doesn’t show, suggesting that the site has been designed for medium to larger screens.
The narrow layout of the content works even at a large screen size; the red flourish helps with this, drawing the eye downward.
Minimal Joomla
The site has been designed to display the background graphic and header (the identifying elements) when viewed at a smaller screen resolution (800 x 600 pixels). However, the full content is revealed without scrolling in a 1024 x 768 screen size or bigger. The background graphic fades into black at the edges, merging it with the background and giving the suggestion of being larger than it is. The rippled effect in the background graphic adds depth. It’s currently a one page site (the product has yet to launch); it will be interesting to see how much the site changes and whether the present layout is maintained.
Matriz Comunicação
A beautifully seamless site, designed to fit at 800 x 600 and up. The features of the room fade into the background colour (the fading can’t be seen at 800 x 600) and the image is centred both horizontally and vertically. This is one of the few sites listed here which doesn’t have a minimalist colour scheme.
Elan Chicas
Lots of imagery and content are packed into this layout, which works well at 800×600 but has been designed for a 1024 x 768 screen size or bigger. The offset design of the scattered photographs, the shadows and the illustrated white flourishes all help to marry the design with the background space. The design is never quite visible in full: elements disappear off-screen at the top and bottom, suggesting a larger design than what is visible.
Many of these websites have design elements in common which enable them to be viewed at varying screen sizes without losing their identity (small screens) or becoming lost themselves in a sea of background colour or pattern (large screens). CSS box style layouts exist in these designs but in most cases the overall look is not “boxy”. In some cases, the use of offset elements or organic shapes helps to balance the designs with the negative space of the backgrounds surrounding them.
Some examples listed here use layout and/or simple images to draw the eye down the page, again balancing the design within a large background space. In the case of minimaljoomla, a ripple effect in the feature image adds depth to the layout. In most cases, the colour schemes are very simple: two or three colours only. Featured graphical elements frequently fade into the colour of the background or “disappear” off the screen, giving the impression that they are larger than they appear.
In a couple of examples, the most important identifying elements of the website (logo, title, descriptive slogan, header graphic) are laid out so that they are the only elements visible at 800 x 600 screen size. Upon expanding to 1024 x 768, the rest of the layout appears.
It’s tricky to produce a website design which can be viewed at a medium (let alone small) screen size yet still works on a large screen. The screenshots for all of these examples were taken from a browser window almost completely filling a 20 inch computer monitor. Do you think they retain the strength of the original designs at this larger size? Have you seen other examples of sites which work effectively at large and small screen sizes?
27 Responses to “10 seamless website designs”
Got something to say?
These fall somewhere in the realm between fixed and fluid layouts. Technically they’re fixed, but the authors found a way to keep their websites both compatible for the 800×600 resolution and robust for the higher resolutions…all the while controlling the width and display. Quite an awesome article Tracey, thanks!
I can’t remember visiting any of these before, Tracey, so thanks for the signpost. A little inspiration is always good, especially when I’m considering my own online appearance.
David Airey’s last blog post … Why are designers never 100% satisfied?
Kevin:
With so many sites designed for 1024 x 768 pixel resolution, it seems the trick is to layout out the design elements acceptably for 800 x 600, while at the same time not looking too “boxed in” on a large screen. I like your assessment that these layouts are somewhere between fixed and fluid.
David:
It’s great to see that you found some inspiration here.
Thank you for your kind comments on my site and for a collection of inspiring sites. This is an interesting article as I have always taken a fixed approach with all of my site designs.
All new to me! Nice picks, thanks for sharing. Fine examples of seamless designs.
liam’s last blog post … 50 More Wallpapers for Designers
Dean:
I’m glad to have come across your site while I was researching for this article. I wanted to show a variety of solutions to the size/screen resolution problem, and I felt that your layout was simple, effective and different from the rest.
Liam:
I’m glad you enjoyed them; thanks for your feedback.
Thanks for the list – it’s great – I bookmarked about half of them
Piotr’s last blog post … Tosia – 7:05am
Hello Tracey,
As the owner of Minimal Joomla, wanted to thank your your great article and comments about our site.
I confirm that is basically designed for the “new standard” of monitor resolutions although I know there are still lot of people using lower ones.
Sometimes is complex to show much info in less space withouth “bloating” the design and content.
Thanks again for your interest!
Raul BC.
Piotr:
Fantastic – I’m glad you found some useful sites in the list.
Raul:
You are right that this is a very complex aspect of web design. All the best for your launch later this month.
Really good list, haven’t seen many of them before
toon’s last blog post … Troisiemeoeil Photography
Pretty amazing sites, very inspiring indeed :-)
toon and Mchilly:
I’m really glad you enjoyed them!
I enjoyed reading this article and visiting some of the sites. I always go with fixed width myself but the way some of these sites use it to merge into the background colour is something else. Interesting to see that all but one are centred meaning there’s not loads of empty space for those with big monitors.
Rob Cubbon’s last blog post … Turn your client‚Äôs photos into beautiful images
great picks, these are really nice and very inspiring.
adelle’s last blog post … Premium News Evolves into WooThemes
[...] 10 Seamless Website Designs # [...]
Rob:
That’s a good point about the centred content in just about all of the sites. Aespec and Mad In Spain are not centred, and their layouts both have great solutions to the challenge of huge amounts of empty space to the right.
adelle:
I’m glad you enjoyed them!
Like David, I also don’t believe seeing any of those sites before. Thanks so much for collecting and featuring them here. My favourite one on this list is Matriz Communicacao ‚Äî what an ingenious idea for the site’s layout. I always admire 3D tricks like that.
Hi Tracey,
Very nice websites. I really like the Minimal Joomla design and also your website’s design. It’s very neat and clean. Looking forward for the new posts. Keep up the good work.
Szabi’s last blog post … Logo Design for Your Property Video
[...] – My deepest apologies to Tracy, with whom I mixed up a link. Check out this incredible article: 10 Seamless Website Designs Popular [...]
I like Digital Zoo’s use of space and having everything on one page is quite nice.
I love the ones that work smaller, but have a nice background on larger ones. I’m not sure about Yellowood, Ad Literam and Minimal Joomla at smaller sizes, they seem to be for 1024 and up and they sideways scroll at smaller sizes. Not that it makes their sites deficient in anyway, mine scrolls at smaller sizes… just not sure they’re as good examples as Jesse Stephens and Matriz.
I’ve tried to make my site work ok at larger sizes, but I think the edges of the header will fall off to black if you go large enough. Could be very ugly. Still trying to think of a good way to fix that.
p.s. Have you ever seen a phenomenon where the background image only extends to the edge of the browser when the page is loaded and when you scroll sideways the background isn’t loaded? I’ve taken screenshots if you don’t know what I mean. It’s pretty annoying. It would make this “seamlessness” less effective if you had your browser scaled down and then increased the size.
kristarella’s last blog post … Thesis theme
kristarella:
I think I know what you mean about the background suddenly showing a gap when you scroll sideways. Send me a screenshot if you’d like. I work between a 20″ monitor and a much, much smaller laptop, and funnily enough I only get the effect on the laptop.
I hope you find a fix for your header – let me know what it is, if you do!
Hey Tracey,
Decided to blog it, screenshots and more thorough description are in the post (link should come up in CommentLuv link).
kristarella’s last blog post … Event of the day: car crash
Hmm, or not :P
Background not loading
kristarella’s last blog post … Event of the day: car crash
[...] 10 seamless website designs One of the challenges in designing websites is to create a layout which takes into account all the different screen sizes at which it may be viewed. Some websites use fluid layouts (where sections of content will automatically resize to fit the screen dimensions) to get around this. [...]
Thanks for sharing. I really enjoy the “Matriz Comunicado” and “Minimal Joomla” sites. I have been afraid to live outside the box… maybe it is time to go seamless!
Excellent post and exactly what I was looking for! Thank you! Also very nice designs
[...] 10 seamless website designs One of the challenges in designing websites is to create a layout which takes into account all the different screen sizes at which it may be viewed. Some websites use fluid layouts (where sections of content will automatically resize to fit the screen dimensions) to get around this. [...]