Tag Archives: webdesign

Making a Sidebar Mobile-Friendly: 3 Solutions

November 11, 2013 Robin Leave a comment

I used to think the sidebar on a website was absolutely necessary–it was a place to hold navigation links, affiliates, site introduction, and all sorts of cool tidbits that I wanted to display on each page.

This was all well and good when we all browsed the Internet using large desktop and laptop screens. But now that many of our visitors could be using tablets and smartphones to view our pages, we need another strategy…because a sidebar on a smartphone screen means lots of zooming in, and the sidebar content just gets ignored anyway.

One reason I haven’t yet posted my blog’s new design is because I’ve been struggling with this issue: how do I make my page look interesting enough on a large screen, without making it almost impossible to view normally on a small screen? Thus, I set out to answer this question for the ages–and I discovered that some fairly simple solutions existed!

Solution #1: Cut Out an Unnecessary Sidebar

If your sidebar only includes a couple of introductory blurbs about your site and yourself, you could potentially get rid of the sidebar entirely on both desktop and mobile views.

These days, many designs feature a single-column layout with navigation across the top of the page in a horizontal bar, which scales down nicely to mobile screens. (Don’t despair, though–you can condense your introductory blurb down into a neat little slogan and still use that above your navigation!)

Solution #2: Move Sidebar Content Around for Mobile

If you’re like me and include blogrolls, affiliates, ads, and other such sitely things in your sidebar, you definitely want to make sure those stay on every page in desktop view. But for mobile, remember that most mobile users are mainly coming to view your content, so you want to make sure nothing else steals the content’s thunder.

Thus, you could dispense with the sidebar and move its content to somewhere else on the page, or on a separate page entirely for mobile users. A fixed bar across the bottom of the page could work for site ads, while a mobile-only page could work for blogrolls and affiliates, and so on.

Solution #3: Make the Sidebar Disappear on Mobile Browsers

Now we come to the solution which involves the most code–but it’s actually really simple once you think about it. If the sidebar is an issue for mobile browsers, why bother having the mobile browser load a sidebar at all?

This is achieved through the wonder of @media queries, which help you target CSS styles and rules for specific media types (like printing versus viewing on a screen) and specific screen sizes (like handheld devices). Here’s how it would work for hiding a sidebar from mobile viewers:

#sidebar {
width: 200px;
float: right;
padding: 5px;
background-color: #222222;
color: #FFFFFF;
}

@media handheld {
#sidebar {display: none;}
}

Here, the @media query encapsulates another #sidebar rule. Make sure you have your outside curly braces in place around the #sidebar display: none rule, otherwise this code will go completely bonkers! (Learn from my fail!)

IMPORTANT!

There’s a slight catch to this method, however–iPhones and iPads don’t recognize “@media handheld” in CSS. So, here’s the workaround:

@media screen and (max-width: 480px) {
#sidebar {display: none;}
}
(This particular @media query can also be structured as “@media(max-width: 480px)”, according to some sources)

Placing This in Your CSS

Make sure to put these mobile-only styles at the bottom of your stylesheet, so that they are the last things to load and won’t confuse the desktop browsers.

Summary

Sidebars need not be a responsive layout deal-breaker! You can make them behave or change them around as you need to–their content and placement are not set in stone. These 3 tips should help you (and me) get our websites mobile-ready with as little hassle as possible.

camelCase and 2 Other Tips about JavaScript Variable Names

November 4, 2013 Robin Leave a comment

When it comes to JavaScript variable names, you have to keep in mind that JavaScript is like many other web programming languages–it’s picky about capitalization, spelling, and spaces. (And when I say picky, I mean PICKY.)

This doesn’t mean that you have to be a perfect wordsmith to write JavaScript code; you do, however, have to debug your code carefully, because one simple typo can cause your whole script not to run. Here are 3 common pitfalls:

Capitalization (Like camelCase)

Often, you’ll see examples of JavaScripts floating around on the Web with object and function names like “myObject” and “getPage.” These are both examples of camelCase, or the act of combining two words together and then capitalizing one or both words’ beginning letters. (This is also called Embedded Caps, nerdCaps, and a whole host of other terms, LOL!)

Since JavaScript is case sensitive, you have to be careful when you’re writing object and function names with CamelCase in mind. “MyObject” and “myObject” are treated as two different objects; “GetPage” and “getPage” are also treated as two different functions. Read over your code carefully and make sure all your variable capitalizations match!

Spelling (Yep, It’s Still Important)

Along with the issue of capitalization, the spelling of your JavaScript objects and functions matters, too. If you spell your function as “myAwesomeFunction” in one part of your script, for instance, and then misspell it as “myAwseomeFunction” elsewhere, then JavaScript treats those as two separate functions, and you likely have a non-working script.

You wouldn’t believe how many times a careless spelling mistake has thrown my coding off. (One tip: if you’re having trouble spelling the name of the function or object, consider either changing the name to an easier-to-spell option, or setting aside the hard-to-spell name in a little text file and copy-pasting it every time it comes up in a script you’re writing.)

Spaces in the Variable Name: Just Don’t

One reason so many JavaScript developers use camelCase or other forms of combined-word variable names is because JavaScript does not like for variable names to have spaces in them. Thus, if you have a multi-word function or object name, you combine the words, but keep the capitalized letters to make it easier to read.

Sometimes spaces can crop up if there’s an accidental line return in the middle of your file; resizing your script file’s window to check for these line returns could possibly help you debug a script that just won’t run! (This trick saved me some hair-tearing when I was a webdesign newb trying to get a script to work…I had NO idea what was wrong until I maximized the window and saw the sneaky little space hiding in one of the function names!)

Making and Maintaining a Facebook Page for Your Site

October 14, 2013 Robin Leave a comment

Whether you’ve got a blog, small hobby website, hosting site, or anything else Web-oriented, these days making a Facebook page is nearly required for increased audience and popularity. For instance, since I made a Facebook page for Crooked Glasses recently, I’ve noticed a definite surge of interest (if not comments), and it feels as though I’m finally engaging with readers that I had been unintentionally leaving out for a long time.

Making a quality Facebook page, however, takes a little bit more effort–but once you put in a little time, you can create a polished, attractive, easily-updated Facebook presence for your site! Here’s how:

#1: Make a fitting icon and cover photo.

Your icon and cover photo are very important to your site’s branding–they create an instant visual impression that can often make the difference between visitors clicking to visit or hitting the Back button. With the right images, you can really make their first few seconds on your page count!

Here are the dimensions and formatting requirements for each image:

Cover photo: At least 900px wide for current FB layout style; it doesn’t seem to matter what height it is, but mine is about 330px. Must be JPG format.
Icon: At least 180 x 180px; must be JPG format.

Your icon should be fairly simple and snappy, with high contrast and easily-visible shapes, so your page can be quickly recognized in the Facebook News Feed. Your cover photo, by contrast, should be a little more “in-depth,” giving your page a “mood” and a good sense of what your site is about. (This is why I chose the simple black-glasses graphic for my icon and used a real photo of my actual glasses as the cover photo for Crooked Glasses’ page.)

#2: Come up with several unique URLs you can use for your page.

Before you actually start the FB page creation process, brainstorm several short but descriptive page names for your URL, just in case your preferred one is already taken. (For instance, I had to go with “crookedglassesblog” instead of “crookedglasses” because the latter was already taken.) Make sure that you’re happy with your URL and that it’s spelled correctly, because you won’t be able to change it once it’s selected!

#3: Fill in all your page info (and I mean ALL).

Take time to fill in just about everything about your site that is appropriate, from Founded date to About section and everything in between. (Warning: the “Company Info” section, not the “About” section, is the text that will be displayed on the front page underneath the “About” heading, so make it good! Also, be sure to include your website link in Company Info so people have a convenient link to click.)

#4: Invite every Facebook friend you have.

I know it might seem a little crass to send invitations to all your Facebook friends to like your website, but you never know who might like your page if you only give them the chance! Plus, it gives your page that much wider reach as your friends and family like and share your posts with their friends. Think of it this way: you’re giving them something new and entertaining to look at and enjoy.

#5: Post every day–about anything and everything related to your site!

Make sure you post to your site’s Facebook page every day, so that people remember it exists. Don’t think you have to just post your blog articles or site updates, either–post about things you’re planning for the site, or even just a random funny update. Remember, keep your page looking lively, and people will come visit!

#6: Share articles and posts through your personal Facebook feed.

At least two or three times a week, share some of your site’s Facebook posts, perhaps ones you want to showcase or ones you want feedback on. This reminds people who disregarded the Page invite that your page still exists, and shows them a little of what they’re missing. Also, newer friends who didn’t receive an invite can be exposed to what you’re doing on your website. It’s a win-win!

Summary

These 6 steps will help you not only build a great-looking and well-functioning Facebook page, but will also help you keep it active and user-friendly. Visitors will enjoy coming to your page and staying updated, and that’s the whole point of a Facebook page, after all!

Monday in the HTMLab

The Webdesigner’s Design Decision Cycle

October 7, 2013 Robin Leave a comment

As webdesigners, we have to make our sites both informative and beautiful to view. This takes a careful balance of design ideas, which need to be constantly upgraded and improved as users’ needs change.

Thus, the reason I came up with the following graphic depicting the considerations that go into making good webdesign decisions. I call this a “cycle” because we webdesigners never completely stop reevaluating our own decisions–we’re always coming up with ways to do it better, whatever “it” is!

Monday in the HTMLab

Wisdom Blurbs: Webdesign

September 30, 2013 Robin Leave a comment

Monday in the HTMLab

Stable Sidebars: My New Favorite Layout of Choice

September 23, 2013 Robin Leave a comment

I know I’m probably about 3 years behind webdesign’s cutting edge (LOL), but I recently discovered how much I love the idea of a fixed, stable sidebar for my websites.

Wonder what I mean by “stable sidebar?” Here’s a couple of screenshots from my British TV shows fansite:

This is how it appears when you first load one of the show pages…

…and when you scroll down the page, the red sidebar on the left stays perfectly in place!

Why I Think This Design is AWESOME

I love the fact that the navigation and site branding stay in plain view, so nobody has to scroll all the way back to the top to browse between pages. Use convenience, YAY!

I also like that it’s a “headerless” design, which I wrote about back in June. Headerless designs force us as webdesigners to keep things more compact and less blathery (though I still found room for a little paragraph on the sidebar, as displayed in the screenshot, lol). Not to mention that the lack of a header means I don’t feel absolutely compelled to make a huge header image–and people don’t have to keep scrolling past that huge image to see content. Double WOOT!

Lastly, I like this kind of design because the sidebar functions as a visual ribbon decorating the page, adding a different color and look to this all-important bit of the page.

One Caveat: This Sidebar’s Not Exactly at the Leftmost Edge of the Page

One thing the above screenshots don’t show you is that the red sidebar isn’t actually at the left page edge; it actually hangs out kind of in the middle of the page in a fixed-width layout instead of being part of a fluid layout like most folks do.

The big reason for this? I can’t make fluid layouts work at the moment. I’ve studied, copied and pasted, and otherwise tinkered, but I’m still missing something important (my attempts at fluid layouts usually don’t scroll right, have horribly spaced out content in wide windows, or have a stinky vertical scrollbar on the side no matter what I do). I’m completely self-taught in webdesign and not really that great at understanding highly technical code, so I’ve had to mostly blunder through on my own when trying new layout styles.

So, in order to incorporate this look which I so loved, I had to find another solution, one that captured the essence of the stable sidebar without making the whole layout fluid (and thus breaking it). The following code was my fix:

How to Make a Robin-Style Stable Sidebar

#sidebar {float: left; width: 200px; padding: 5px; height: 100%; position: fixed; top: 0px; background-color: #8e0001; color: #FFFFFF; font-size: 14px;}

This is the code for the magic little sidebar. What makes the magic happen:

height: 100%;
position: fixed;

This makes the sidebar always as tall as the browser window it’s in, and it keeps the sidebar attached to the top of the page as well, so that it doesn’t scroll with the rest of the content. This sidebar stays right beside its content thanks to the old “wrapper-div” trick (seen below), which corrals both divs into a fixed-width layout.

#wrap {width: 1000px; margin: 0px auto;}

I’ve tested this in IE, Firefox, and Chrome with identical results; I don’t know how any other browser handles it, but it seems to be pretty obedient code. (IE usually has fits if I try anything creative, but this time it behaved itself!)

Comments or Questions?

Leave me a note in the comments about this design–like I said, I know it’s not the cutting edge of design anymore, but I really like it and it seems to function really well for my visitors. What do you think? (Oh, and if you have tips on how to make this kind of design work in a fluid setup, be my guest!! :D)

Monday in the HTMLab

Robin Makes a Mobile Blog Layout, part 3: Testing Your Layout

September 16, 2013 Robin Leave a comment

Designing a mobile layout and knowing how to code it properly is great, but how does a webdesigner/developer test how a layout will perform on a mobile browser? After all, it’s not quite as easy as testing desktop layouts through your browser before uploading it.

I worried over this as I compiled this series, but thankfully, there are folks out there who have solved part of this problem, developing wonderful online tools that can test your site’s layout and help you identify problems in mobile browsing. The following sites are the best of the best, in my opinion, offering simple and sleek functionality as well as a wealth of information. Simply visit these sites and type your URL in to test how your current layout performs in mobile settings!

W3C MobileOK

This tool is a MUST for mobile web developers–it helps you validate, improve, and ultimately optimize your code for mobile usage. As you can see from the above pictures, Crooked Glasses currently fails miserably at being a mobile-friendly site…I got a lot of work to do. *sigh*

Responsive Design Tool

This simple online tool loads quickly and shows a range of different page widths at a glance, so that you can easily compare and contrast. (Caveat: you can’t click through pages unless you download the free tool from Github, but the download link is provided.)

Screenfly

Screenfly displays your website on many different platforms, mimicking everything from tablets to televisions. Click the various icons to see even more specific screen sizes (like Kindle vs. iPad, or iPhone vs. Android phones); you can even click through your miniaturized site to view different pages!

The Responsinator

The Responsinator gives you a scrollable list of all sorts of mobile devices, even comparing portrait vs. landscape orientation on the same device to show you how your site changes when the device is held a different way. The scrollbars on each individual display allow you to scroll around on your site to see what parts of your site may be obscured to the mobile user.

Robin Makes a Mobile Blog Layout, part 2: Mobile-Friendly Code

September 9, 2013 Robin 1 Comment

Making a responsive layout for mobile users is not just about the design of the site–the code also has to be constructed well. We webdesigners simply can’t afford to be lax about our code, because mobile browsers are less forgiving than desktop browsers. What looks great on your laptop may look terrible on a tablet or smartphone screen!

Here are some important things to remember about coding a responsive mobile layout:

Design and Code for the Smallest Device First

This seems kind of backwards, but don’t design and code your site’s desktop look first. Instead, make sure that the layout you’re making loads and operates well on a very small screen, like a smartphone. If it looks great and performs well on a mobile browser, it will function excellently as a desktop layout, too.

Include the Meta Viewport Tag

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>

This little tag, included in the head of your page, keeps mobile browsers from super-shrinking your site to unreadable dimensions and making your users have to zoom in to read your text. (Note: this tag should only be used on responsive layouts or dedicated mobile sites, as HTMLBOY points out.) For more information on how to format this tag, check out the Webdesign Tutsplus page.

Keep the Code Simple, Sweetheart

When you’re designing a mobile layout, as I discussed last week, you want to make sure you’re not crowding your design with lots of images, which require a lot of data transfer over small devices’ connections. But you also don’t want to crowd it with clunky desktop-only formatting, or anything else that will slow the page load time down, especially on a mobile device. Keep the code as simple as possible–even if it looks TOO simple to your eye. A simple but effective site will perform much better than a complicated site that’s trying to do too much.

Also, don’t rely on a:hover at all in a responsive layout. Remember, the user’s “cursor” on a mobile browser is their finger, which doesn’t hover without clicking (unless some folks have magical fingertips quite unlike mine, LOL). Thus, drop-down menus and image changes that happen when the user’s cursor hovers over something is not a good mobile design choice.

Set a Maximum Width for Your Responsive Layout

“Now wait a minute,” you might ask. “Why are you worried about a MAXIMUM width when we’re talking about making a layout small and graceful?” Well, if you’re making a responsive layout, that means that the same layout will be served to all browsers, and will expand and contract with the browser’s window size. The layout that looks great at a width of 400 pixels will probably look REALLY odd at 1300 pixels wide–everything will be stretched out and hard to read.

#maindiv {max-width: 900px;}

The above tag, put into the CSS for your containing DIV, will keep your layout from stretching far into the distance on a widescreen desktop. Your users will cheer!

Don’t Hide Content from Mobile Users

Lastly, don’t assume that mobile users only want to see a few articles on your site. If I visit a site while on mobile, I expect to see ALL the content I would normally see while using my laptop. (This is a big pet peeve of mine to see mobile sites with maybe 20% of the desktop layout’s content.)

So, make sure all your content is accessible via mobile, either with a carefully-designed top-level navigation, or by grouping content into navigational pages so that users can scroll through links for just the content section they want to see. It may sound clunky, but it will work much better than simply hiding content!

Robin Makes a Mobile Blog Layout, part 1: Designing the Look

September 2, 2013 Robin 1 Comment

I’ve been getting my proverbial hands dirty behind the scenes this week, grappling with code in order to put together a probable, working mobile layout for this blog. (The main thing I’ve realized so far? It’s a LOT of WORK. LOL)

This is the mobile design I finally came up with, working with the basic color scheme from the new desktop layout I’ve been designing. Its main features:

Site content shrinks and expands as necessary (this screenshot shows how a mobile phone would display it)
Same logo as my desktop design
Bigger font and widely spaced text lines
Simplified navigation
Larger-sized links

But it took quite a while to get this design “right”–and it wasn’t easy to figure out how to manage it. Indeed, I’ve struggled most of this last week to come up with a design that actually looked like a mobile site layout, instead of a hopelessly squeezed version of my desktop design!

The Key: Focus on Readability and Content

I found out while designing this mobile layout that trying to fit all my navigation, my sidebar information, AND my content would just not work. Instead, I needed to make my mobile layout rather sparse-looking by desktop standards:

Keep the color scheme basically the same as your desktop layout, but make sure that there is a lot of contrast between the text color and the background color. High contrast is especially important for readability on small screens!
Only include the navigation that matters to your mobile users; if it doesn’t have to do with your content, it doesn’t need to be on your mobile site’s navigation. (For my blog, that meant that I had to exclude my “Links”, basically.)
Same goes for content. If it’s not one of your articles, don’t include it on your mobile layout. (No sidebar info here!)
Bigger font is actually better on a mobile device–you don’t want to make your users have to zoom in to read your text! That’s why you make a mobile layout in the first place. (For instance, I ended up with Garamond 16px for the body font in my mobile design, and I might even make it bigger than that in the final draft.)
Make headings, links, and navigation very, very clear and very easy to tap on with big fingers. Take it from someone with large fingertips–a link in big font is much easier to tap on than a link in itty-bitty font.
Include clear branding for your site (i.e., your logo/icon); if you can use the exact same logo/icon for your mobile site that you use for your desktop, all the better!

Summary

Mobile layouts have to be simplified, but that doesn’t mean that they are simple to design. (Indeed, you have to be deliberate and careful in your design choices, otherwise your mobile layout will be unusable!) But with a few considerations, you too can make yourself a layout that will transition well to all mobile devices, big screen or small.

(Tune in next week for part 2, in which I will attempt to make this mobile layout a coded reality!)

Monday in the HTMLab

WordPress “Easy Mobile Layout” Plugins: YIKES

August 19, 2013 Robin 1 Comment

These days, more and more people are viewing blog content through mobile means–our phones and tablets have largely replaced our laptops when it comes to simply taking in content. We bloggers must keep pace with these demands when possible; after all, visiting a site and having to re-zoom in to see the text every time you open a new page can be an off-putting hassle. (Take it from me, I’ve run into this annoyance factor even on my own blog!)

But what if you don’t have the time to develop either an app or a mobile-friendly version of your site? The solution seems to be simple: use a mobile layout plugin! It’ll build your mobile design automatically!

Since I am running a self-hosted WordPress installation on my blog, I looked up WordPress plugins which create mobile-friendly layouts. The following is what I discovered while investigating 3 of the most Internet-viewed “popular” plugins…and it’s shocking, to say the least.

WPTouch

Free or Paid: Both options available, but the paid “Pro” option appears to have better tech support overall.

Brief Reviews: Most people get what they’re looking for–a quick, usable mobile layout with a little customization. However, the free version seems to have some issues, especially with themes giving a “too many redirects” error or not serving menus properly to mobile devices. Upgrading to the Pro version apparently fixes this for some users. Check out more reviews on the WPTouch reviews page.

More Information: WPTouch by BraveNewCode

WordPress Mobile Pack

Free or Paid: Free

Brief Reviews: Lots of bad reviews about this plugin not working properly, messing up blog databases, and and being almost impossible to install. Looks like you’d better steer clear of this one…check out more reviews here.

More Information: WordPress Mobile Pack

Mobile Website Builder for WordPress

Free or Paid: Paid

Brief Reviews: This one looked very, very promising–the best of the three I reviewed, in fact!–until I read about all the ads that the plugin puts all over your site, which are very difficult (if not impossible) to remove. Couple that with the fact that this plugin apparently hosts the mobile version of your site on a DudaMobile web address, and this doesn’t seem as strong a contender as I first thought. Check out more reviews here.

More Information: Mobile Website Builder for WordPress by Dudamobile

Conclusion: You’re Really Better Off Doing It Yourself

If you can believe it, this post started out as a way to let people know about great plugins to simplify the process of making our blogs mobile-friendly. Sadly, after considering all the reviews, I can’t in good faith suggest any of these–it’s not worth risking all your hard work just to save time on developing your own mobile-friendly layout. (Of course, this is just my opinion, but after reading about the database problems some of these plugins created, it’s kind of given me the willies about it all!)

I’ve written a few articles here before about developing mobile-friendly designs–these will be helpful no matter whether you want to develop a mobile app, make a separate mobile site, or build a responsive layout that adjusts to all sorts of browsers.