IT tutorials
 
Graphics
 

Web Apps & Design - Responsive Site Design (Part 2)

11/22/2012 11:42:42 AM
- Windows 10 Product Activation Keys Free 2019 (All Versions)
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

Getting user input

An area that shouldn’t be overlooked when designing for mobile devices is user input. In those instances that you’re asking a user to enter data into an input box, remember that they’ll be doing so with a less extensive keyboard, and so specifying the correct “type” with the <input> tag is important to ensure the correct virtual keyboard is presented to them. By now, all tablet users will have experienced the irritation of web pages that ask for an email address, but which fail to present a virtual keyboard that has the @ symbol. As a result, they must press Shift to find the character, then switch back to the default for the rest of the address.

Another area that’s tricky to manage on mobile devices is the dropdown selection box, because trying to select from a tiny dropdown with your finger can be frustrating. One way around this problem is to use techniques such as the jQuery Mobile select menu to present a form that’s easier to use on a small touchscreen.

Description: Description: Description: JQM select menu. jquery-mobile

JQM select menu. jquery-mobile

If you search the web for adaptive designs, you’ll see many references to various frameworks that claim to make the task easier, together with plenty of talk about creating a grid with CSS that will allow your content to flow correctly when browsed in a variety of devices. I must confess that currently I’m more than a little sceptical about this approach, since it introduces extra <div> tags that make the layout more difficult to read. As someone who’s been building websites right from those early days when we had to use tables to implement all but the simplest and most linear of designs, my relief at finally being able to place objects where we wanted to and have them flow and resize through the means of a common style sheet was considerable. It also meant that HTML pages lost unnecessary code and implementing site-wide style changes became easier. This move towards finding the ideal CSS implementation of a grid seems to be reverting to the bad old days.

The current HTML <table> tags are great for the purpose they were designed for displaying tabular data. Using a table or a grid to control the display layout seems like a retrograde step to me, and I’m sure it will end in tears. If you take a look at the Foundation Framework, for example, a small sample of the HTML on its own website shows how it’s implemented. The grid is built using <div> tags such as the following:

<div class="row">

<div class="tablet-padding">

<div class="three columns

property" id="zurbApps">

Some text

<div class="row">

<div class="six columns">

A list

</div>

<div class="six columns">

Another list

</div>

</div>

</div>

And so it goes on until it starts to look a bit like the sort of unreadable mess that we used to see:

<table>

<tr>

<td>

Some Text

</td>

</tr>

What’s wrong with:

<div class='mystyle'>

Some text

</div>

I wait to be convinced otherwise. Google has officially recommended responsive web design as its preferred method for building mobile websites. I have a big issue with a software company that builds an internet search engine and then tries to enforce ways of designing sites so that its own engine can index them properly.

Description: Description: Description: Google has officially recommended responsive web design as its preferred method for building mobile websites

Google has officially recommended responsive web design as its preferred method for building mobile websites

In a perfect world the search engines should do the job properly and correctly index any site, irrespective of how its HTML is structured. But as we all know, this is an imperfect world, with the world of web design more imperfect than many other areas of it, so if we want to be found we’re stuck with having to fettle our code so as to help the search engines to do their stuff. So if you’re planning for mobile users to access your site, then responsive design is the way forward.

Azure Media Services

In a previous column I wrote about the imminent release of Microsoft’s Azure Media Services, which promised to offer full live streaming from the cloud. This could be of interest to anyone who has a need to deliver video streaming, but who doesn’t want the expense of building and configuring their own streaming servers (to say nothing of paying for large amounts of bandwidth that will probably get used on only a few occasions). This new service from Microsoft could be very useful.

Description: Description: Description: Expression Encoder for Azure Media Services: must try harder

Expression Encoder for Azure Media Services: must try harder

I say could be, because before anything else it has to work, and work easily. Sure, you can develop your own code to access the SDK in Visual Studio 2010, but for a lot of uses you want to take a video source and publish it to Azure in a simple and quick way. For this you’re told to use Microsoft Expressions Encoder 3 or 4, and you’ll also need to install the Azure Media services plugin. Once you’ve done this, you can take a video file and encode and publish it on your Azure media area. What I wanted to do while at the World Bridge Championships was a simple live streaming broadcast, but it seems that you can’t currently take a live source and publish to Azure via Expressions Encoder in the same way that you can with IIS smooth streaming services. I have to say that Microsoft US has been very helpful in trying to sort out this issue, but to no avail. I’ll be returning to this in a future column once it becomes more usable; at present it’s a huge disappointment that really spoils the usefulness of this new service.

More and more we’re seeing extremely clever back-end technologies from Microsoft being let down by incomplete or unreliable front-end tools. The view seems to be that because it’s possible to use a technology from code, then that’s all that’s required. I’d take issue with this: give us ways to deploy these technologies easily and we can save the coding to produce our custom solutions if necessary. Sorry, Microsoft, but if you intend to charge for this service, then you need to get it working first.

“If you want mobile users to access your site, responsive design is the way forward”

Error!

Even when using Expression Encoder to publish a video file, I found that the system would sometimes throw a cryptic error message that prevented publishing. This turned out to be caused by Expression Encoder not generating two of the files necessary for correct streaming.

 
Others
 
- Web Apps & Design - Responsive Site Design (Part 1)
- Image Libraries Changed The World For Designers (Part 6)
- Image Libraries Changed The World For Designers (Part 5)
- Image Libraries Changed The World For Designers (Part 4)
- Image Libraries Changed The World For Designers (Part 3)
- Image Libraries Changed The World For Designers (Part 2)
- Image Libraries Changed The World For Designers (Part 1)
- Photoshop Elements 11
- Hanns.G HP226DGB Hard Glass Full HD LED Monitor
- Sony CyberShot RX100 - A Pocketable Digital Compact Dream
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS