Cheesetoast » layout http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.10 Is Responsive Web Design Important? http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/ http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/#comments Wed, 23 May 2012 16:32:44 +0000 http://www.cheesetoast.co.uk/?p=380 There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick? Continue reading

The post Is Responsive Web Design Important? appeared first on Cheesetoast.

]]>
There’s a huge buzz around responsive web design at the moment. As I mentioned in my previous article, mobile web browsing is expected to overtake desktop browsing within a few years. Now designers are using responsive design to ensure their sites adapt to different devices. But is it worth jumping onto the responsive bandwagon? Is responsive design an important step in the evolution of web design or is it just a gimmick?

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.” Jeffrey Veen

Responsive design makes use of flexible grids and CSS media queries to make a website that responds to varying resolutions. Although fluid layouts have been around for over a decade now, responsive design takes things a step further. Not only is it used to change the basic structure of a page but it can also be very useful for re-scaling images, text, and video.

Ironically, HTML has always been responsive. It was only when CSS popularized fixed widths that layouts became less flexible. Now CSS media queries aim to solve the problem of rigid layouts. To learn more about the subject I recommend you read this article from Smashing Magazine.

Usability Benefits

The whole point of responsive design is to improve the user experience through flexibility. The page adapts to the screen size to better suit the way the user interacts with it. Although smart phones have the ability to zoom, either by multi-touch ‘pinching’ or the double-tap, it’s not without problems. This is especially apparent when filling out forms, the process of which can be cumbersome and frustrating.

Here are some of the benefits of adopting a responsive design:

Future Proofing
As mentioned earlier, mobile browsing is set to overtake desktop browsing. To accommodate mobile users it’s important to design for smaller screens and touch based interaction. While some experts recommend developing a separate mobile-optimized site, a responsive approach is usually much less time consuming and less expensive.
Reduce Download Times
To improve download times on mobile devices designers can be use ‘adaptive images’ whereby image files can be optimized for mobile devices. Unfortunately this technique hasn’t been perfected yet, as it requires javascript that isn’t quite semantic. Luckily, those working on the issue have formed the Responsive Images Community Group (RICG) to “facilitate conversations with standards bodies and browser representatives”.
Creativity
The great thing about responsive design is that it urges designers to put more thought into what’s really important on the page. Unnecessary clutter can be scrapped and navigation elements can be made larger for mobile devices with touch screen interfaces.
Responsive Presentation
To improve usability on a site, it’s important to consider not only the device, but the user requirements and the context of use. Mobile users tend to spend less time browsing a site so it’s important to implement simple navigation and quicker conversion funnels. Responsive layout allows designers to optimize presentation for mobile users.

“Taking the user’s needs into account doesn’t just mean adapting your content to the screen size. It also means thinking about what that mobile user will require first when visiting your site and then laying out the content accordingly. Maybe you’ll present the information in a different order.” Katrien De Graeve

Not For Everyone

Although there are obvious benefits to using a responsive layout, it’s definitely not for everyone.

Aesthetics
Some designers, who put a lot of work into creating expansive, artistic layouts might not want to sacrifice their canvas for a narrower window where navigation takes center stage. Although responsive design can be used to improve UX, it can dramatically alter the visual appeal of the site. The balance between aesthetics and usability is a subject rife with debate.
Tables
It’s not just aesthetics that conflicts with responsive layouts. Tables are notoriously difficult to display well on smaller screens. Although there are some very elegant solutions to the problem, they don’t work across all browsers yet.
Time/Money
Going all-out to design for phones, tablets, desktop monitors and uber desktop monitors essentially involves designing 4 separate layouts. If you’re one of those people or organizations where time = money, this can be a major concern.

Conclusion

Although responsive design isn’t suitable for all websites, it’s definitely something to consider due to the relative ease at which it can be setup and benefits it can offer. It’s important for designers to keep up with the latest technology and responsive design is a great way to accommodate for the shift in browsing devices.

A lot of people seem to be concerned that through responsive design mobile browsers are given a stripped down version of the site. I agree that is most cases this should not be the case; mobile users shouldn’t be excluded from content. However, designers are given the opportunity to optimize the user experience by customizing aspects such as navigation, and this should be embraced.

Responsive web design is cheaper and less time consuming than developing a separate mobile-optimized website and with loads of great responsive WordPress themes out there it doesn’t take much to get setup.

Here are just a few examples of great wordpress themes that offer responsive layout:

If you have any thoughts about this post I’d love to hear about them!

Update: For an interesting discussion on Responsive Layout you can read and comment on the article “5 Reasons Why Responsive Design is Not Worth It“.

The post Is Responsive Web Design Important? appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/responsive-web-layout-design-important-useful/feed/ 2
Responsive Web Design – A 3 Column Layout http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/ http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/#comments Sun, 15 Apr 2012 23:58:48 +0000 http://www.cheesetoast.co.uk/?p=337 Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices. This post will talk about future-proofing websites with responsive design. I'll demonstrate an example of a 3 column front page design, complete with JQuery slideshow.
Continue reading

The post Responsive Web Design – A 3 Column Layout appeared first on Cheesetoast.

]]>
With different browsers and monitor sizes to take into consideration, web page layouts have always been unpredictable. These days it’s not just desktop computers but phones and tablets to think about as well. Now that mobile browsing is expected to overtake desktop browsing within the next few years, web developers have to think about how their sites will appear on mobile devices.

In his recent newsletter “Mobile Site Vs. Full Site“, usability expert Jakob Nielsen recommends that developers “build a separate mobile-optimized site” to accompany their full screen websites. Google, for example, has a mobile-optimized version of it’s homepage. This approach allows designers to fine-tune the site for screen sizes and peripherals (for example, drop down menus are often removed on mobile versions because they don’t work well with touch screens). Nielsen recommends trimming or deferring content (e.g. reduce words), enlarging interface options, and cutting out features that aren’t  necessary.

The Responsive Approach

Responsive Design - Layout that adapts to different screen sizes.

For those who can’t afford to dedicate the time and energy developing an entirely separate mobile-optimized website there is always responsive web design. Responsive web design makes use of the CSS media query which allow the developer to specify styling for different screen sizes. Just try resizing your browser window now and you should see this webpage respond to the new dimensions.

If you’re new to responsive layouts and want to learn more then I recommend reading Nick La’s (of Web Designer Wall) article “Responsive Design in 3 Steps“. He also has a more in-depth tutorial called “Responsive Design with CSS3 Media Queries” which is well worth reading.

The 3 Column Design

A 3 column layout that responds to the screen size

Having experimented with Nick La’s demo layout I decided to modify it to include 3 columns instead of 2.

View 3 column responsive layout

or play with it on codepen

This new 3 column design displays all columns on the largest screens as equal widths. As the screen gets smaller it will move the sidebar (third column) under the other two columns.  Instead of removing the sidebar (third column) from the smallest screen I displayed all 3 columns on top of one another.

I also added an awesome responsive JQuery slideshow plugin, courtesy of Viljami Salminen.

Lastly, to get the responsive images, I used a handy little snippet of code in the CSS:

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

[Updated]: Is Responsive Design important? Read my other post about the pros and cons of responsive layouts.

If you decide to play around with the layout further then please leave a comment and let me know how you got on.

The post Responsive Web Design – A 3 Column Layout appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/responsive-web-design-3-column-layout/feed/ 11
Why Tables for Layout Are Unprofessional http://www.cheesetoast.co.uk/no-tables-for-layout/ http://www.cheesetoast.co.uk/no-tables-for-layout/#comments Sun, 18 Jul 2010 14:01:40 +0000 http://www.cheesetoast.co.uk/cheesepress/?p=37 I was recently asked to write some HTML for a e-mail newsletter and I was forced to recall what it was like to design layout using tables (bleh!). Of course there are still some designers out there who argue that using tables for layout is just fine and that harking on about divs and the semantic web is overreacting. Admittedly, it's very quick and easy to come up the desired structure using a GUI like Dreamweaver, but it's just not good practice.
I've compiled a list of reasons why tables should NOT be used for layout. Continue reading

The post Why Tables for Layout Are Unprofessional appeared first on Cheesetoast.

]]>

I was recently asked to write some HTML for a e-mail newsletter and I was forced to recall what it was like to design layout using tables (bleh!). Of course there are still some designers out there who argue that using tables for layout is just fine and that harking on about divs and the semantic web is overreacting. Admittedly, it’s very quick and easy to come up the desired structure using a GUI like Dreamweaver, but it’s just not good practice.

I’m ashamed to admit that when I first started learning HTML I used this method for layout. I remember having to use Dreamweaver to split the code and the design view just so I could locate the correct cell. Now I prefer to write all my code by hand and to see a page that is full of nested <tr>’s and <td>’s just makes me cringe.

A few reasons NOT to use tables for layout:

Spaghetti Code
This is made even worse when the code is poorly presented and the table nestings are all over the place, making it extremely difficult to locate the cell you want. Things get really complicated when you miss a closing tag somewhere. All this mess makes it much harder to maintain the code.
Here is an example of the code required to make a simple table:

<table>
<tr>
<td>Lorum Ipsum</td>
</tr>
</table>

and here is the equivalent without a table:

<div>Lorum Ipsum</div>
Bad for collaboration
Even if you are proficient with tables for layout, and I believe there are many designers who are, most other designers do not work that way. When someone else takes a look at your project they’ll probably want to steer well clear of it.
Increased file size
With all that extra code required to display tables the file size increases, thereby slowing down the loading of the page. It may not seem like a lot at the time but it all adds up.
Bad for SEO
With more code to inspect, search engines take longer to get to the content they are searching for. The higher the ratio of markup to content, the more your ranking will suffer. As demonstrated in the above code snippet, divs generally use less markup than tables. With HTML5 becoming mainstream, it would be wise to take advantage of new elements such as <header> and <article>. This is where the search engines will be looking for relevant content.

The post Why Tables for Layout Are Unprofessional appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/no-tables-for-layout/feed/ 0