tablet and phone website layout design - which to make first? - layout

I have a project which requires the development of a mobile site which works on both smart phone and tablet devices. I have read much about mobile design, concepts of "mobile first", responsive design, etc. One thing I have not seen covered is discussions on work flow, particularly at the layout design phase.
What I am not sure about is whether I should focus on the wireframe model for the phone site layout first, and then work on the tablet layout once the phone layout is finished? Or is it better to work on developing both phone and tablet wireframes concurrently? Which method is less problematic in the long run?

It really depends on how many of these you've done before as well as your designer.
Some designers need to work on the desktop first and bring everything down from there, it's just what allows them to be be more creative.
Having said that you're better off looking at going mobile first. I've seen a lot of responsive projects run into issues around linearising the large desktop content areas down into a tablet and mobile layout while still maintaining brand recognition and a synergy between the designs (yeah, I used 'synergy').
It helps if you're able to get your hands on REAL content for the site so you know exactly what you're dealing with. Use a framework like Bootstrap or Foundation to rapidly prototype some ideas with the real content and test to see what does and doesn't work.
When it comes to designing, try and design things in modules. Check out Style Tiles for hints on how to design with that workflow.
Best advice is do what works for your team, you will make mistakes anyway so even if you ignore everything I've said keep it in the back of your mind. Use real content, prototype/test early and don't be afraid to go through a few iterations.
Oh and finally, if you do go Desktop first design, display: none; is not a suitable solution for your content problems later on.

Related

Alternative to Liferay/JSR 168 and 286 Portals?

My team has been writing a dashboard application using Node.js, Twitter Boostrap, Mongo DB, and Mule for an ESB.
Recently an executive asked us to change our approach to a Portal/Portlet container like Liferay.
Some of us on the team have experience with Liferay, and we have pretty negative feelings about it. Dealing with things like full-page refreshes, portlet lifecycles, style and theming issues, and limited DBMS coverage are at the top of our list of complaints.
We see where our executive team is coming from. They have decided that they want to make the dashboard extensible and easy or easier to plug into for other groups.
Is there a solution out there which can balance the modern web expectations of users with the enterprise needs of IT professionals and executives concerned with building and extensible application with something like Liferay? Pluggable widgets are important here.
Node would obviously be our preference with something like Grails as a close second.
Thanks,
This question may not exactly be a good fit for StackOverflow's format, but I can offer some thoughts still.
If you want to stick your current platform, you need to figure exactly what features your executives want to get out of moving to a new platform. Are those features something you can build into your current platform? How much effort will that take compared to rewriting everything else? How effort will it take to learn a new skillset across your whole team? I'm sure your team can learn the new skills effectively but that still takes effort and there will be growing pains as your teams learns. If you can show to your executives that you can get the same features for a similar or less effort and that you can still have similar total cost of ownership, you can make a case to stay on your current platform.
Also I think you are underestimating what a Portlet container can do. I work mostly with WebSphere Portal so maybe thats why I think most of the pain points you mentioned really aren't that difficult to manage for me. Just because your container needs a particular DBMS to manage itself does not mean you can't use a separate DB for your custom data needs. JSR-286 introduced serveResource as a way to make AJAX easier to implement in portlets. In WebSphere Portal (don't know about Liferay), changing out the whole page content without a page reload might the most difficult on your list I'll admit though.
Modern doesn't have to mean bleeding-edge tech. And the large software products can still perform if you know how to use them right, just like any other tool.

Silverlight on Linux / Mac

I have a big winforms app which I now rewrite as an HTML5 app for the sake of portability.
There is an important UI component with a lot of logic and BCL usage that will be very hard to rewrite as HTML/JS. I am thinking to have this component only in SL.
Looking 2 years ahead does this still give me portability?
The moonlight project seems stuck.
Apple may decide to have new rules or break some compatability.
Are these real risks or am I expected to have at least what I have today?
There's no absolute answer to this of course, it's purely opinion.
However, my advice is to stick to general standards as much as possible; as you say - SL may deprecate, Moonlight might not update again, Apple may completely drop flash support. Who knows ?
They are real risks, but you can program defensively - document your API thoroughly, consider writing a REST/WCF/SOAP interface that can provide the behaviour your program needs.
You're right to be concerned that there are risks basically!
This is not an easy decision to take. For example, if you are targeting Windows users you can successfully go with Silverlight.
Consider reading this post and looking at the process that lead to the decision (for them it wasn't Silverlight but according to your needs, for you may suit fine).

Should I stay focused on desktop development or learn more about web application development?

Let me introduce myself a bit.
I have 7 years of C++ (most MFC) experience, 1 year C#.NET and 2 years Java experience.
I know little about web application, what I did and am doing is Windows desktop applications.
I start to do some (minor) (freelance) side projects in the past half year and uses C# mostly as it's more "rapid" than MFC. But seems there's more web projects in this market than desktop projects. And I do not feel good as long as I do not know web development.
So, should I touch the new web filed for me or just stay focus in desktop application but learn more e.g Python, or Frameworks/Libraries such as Qt or Boost?
My gut feeling is that more and more people/companies are moving their projects to the web. My company, for example, has added numerous web applications since I have been there. Another prime example of this is Microsoft (yes, even them) providing a web-based version of Office, their flagship product.
There will always be a need for desktop applications, but I see more web-based projects in the future. It's always good to learn something new, anyway.
EDIT: Oh, and you don't lose anything by being aware of "desktop-based" processes. You may be doing more server-side programming, even if it is web-based. So, in other words, it doesn't hurt to continue expanding your knowledge in that arena, as well.
There will most likely still be a market for desktop applications for many years to come. However, web development seems to have taken over a large share of the development market from what I can see. I would recommend definitely getting familiar with web development as it definitely can't hurt to increase the number of skills you have even if you never stop writing desktop apps.
Since you have experience with C# you might want to consider doing some ASP.NET work. Or if you feel the need to learn a new technology then maybe consider a framework like Ruby on Rails.
I'd really suggest looking into web development - like you said, there are many more web application projects - and you already know C#.NET and Java, and both of those languages have really good API's / frameworks for web development. ASP.NET for C# and Java Servlets/JSPs.
I'd first suggest learning some really basic HTML to learn how pages are rendered, then try to make dynamic versions using the language of your choice. Then I'd learn some other web technologies like CSS/Javascript/some Javascript libraries - then I'd start looking at frameworks that build on top of the basics in the language of your choice.
Oh, and some further suggestions - there are web frameworks that are component-based rather than request-based - you may be tempted to learn these as a shortcut to web development since most claim that developing in them is similar to desktop development. I really wouldn't suggest this - as in practice you really do need to know how the web works at a lower level to develop custom components, include things that the framework doesn't do, or to debug them when things go wrong even when using these frameworks. If you jump right in you can get lost/confused pretty quickly.
Microsoft Office 2010 will have an online version. To me this is a watershed moment for Web applications. Office apps are an important litmus test as once you can do Office on the Web (which has been the case with Google Documents for some time but Office has important symbolic meaning) you can do most things that most users care about.
Desktop apps won't die but I definitely think they're going to take more and more of a backseat.
I'd highly suggest you read How Microsoft Lost the API War if you haven't already. One of the things that's particularly amazing about this post is that it was written in 2004.
I honestly believe that with maybe the exception of OSs and browsers, everything will be a web app within the next 10 years. Having said that, let me clarify that by everything I mean everything that a) involves a UI of some kind and b) can be guaranteed secure.
User-interfaced apps will always at some point need a backend, which will at some level require code that is not being interfaced by humans and not being executed via HTTP. I am always reminding myself that things like 'cat' in Unix are actually programs that the OS is calling, not just a function built into the OS. MySQL won't be a web app (as far as I know), but app that powers web apps. We may get to a point where these apps are fully developed via a web interface, written, audited, uploaded and called all via a browser, but at some level its still running behind the scenes.
On that second point, about guaranteed security, I can very easily imagine a large corporation or government office running 95 percent of their daily routines via web apps, but mandating that certain high-security operations be done on a machine directly interfaced with some sort of mainframe, after passing through the cool doors with the retinal scans and what not. Or simply because they can't risk moving certain mission-critical apps over to the web, from fear of it breaking our losing data in the process.
But with those two things aside, I honestly believe everything will be web-based. With the advancement of Web Services and XML in general, it will be possible to not only access and interact with our data, but to plug our custom apps into another app and extend that interaction further and in any environment we want.
It's like that Apple ad "There's an app for that." Except once people get the real picture, it won't be an app written for your iPhone, but a URL. "There's a site for that."
I recommend learning the Lift framework. It's as easy to use as Rails, and it's based on a statically-typed language for the JVM, Scala. From the perspective of your background, Scala should be middling to easy to learn, and you'll be more likely to be comfortable with it than with a dynamic language.
In my opinion, you have a good chance of picking it up quickly, learn a lot about good practices in web development, and even expanding your programming horizons a bit.

How To Distract Clients From Using IE6

How can we distract our clients from using IE6. We know IE6 is not a good standard-compliant browsers; has many issues. How to satisfy clients so that they do not use IE6?
Thanks...
I'm currently in the process of building a new site for my company and I've been looking at http://code.google.com/p/ie6-upgrade-warning/.
Essentially it's a little javascript lib that checks to see if the user is running IE6 and if so it displays a nice little overlay on top of your site. The only problem I've got with it is that it completely blocks the user from using your site. I'd like to allow for them to use it anyways but I'd like them to know that their experience may not be as good as it could be. I'm sure it can be adapted though, you should never exclude people from using your site based on their user agent. That being said I think it's a good tradeoff that you try to get your users to upgrade and if they don't wan't to they can still use your site but they probably won't see all of the fancy pancy browser tricks that you can do with modern browsers.
(source: googlecode.com)
It sure looks nice anyway
Other resources include http://ie6update.com/ (not a fan though, you shouldn't trick users)
Update: Seems like someone made a bit more customizable version of this written in jQuery. See jreject.turnwheel.com
One of the reasons this problem exists is as follows.
Many IE6 user have no choice. They sit behind corporate firewalls with locked down machines and while on their home machines they will have the latest technology they are constrained by the workplace rules and policies.
So why do the corporates not upgrade from IE6 to 7 or 8? Well here is one reason. Workload.
As a sysop you need to upgrade 500 machines to the new browser.
In many cases these browsers run mission critical add-ins as ActiveX's etc so to do the upgrade you have to do all the testing and verification and then do a planned roll out upgrade, which will have problems, hiccups and glitches, a lot of work and late nights and unpaid overtime and a lot of flak from the users as you do this.
And what is the payback for this upgrade? Well the internal systems work on IE8 exactly as they worked on IE6, (well not always and you may need to rewrite that as well) but the users can now access the latest startup site that plugs into Facebook (but will be gone in 6 months) perfectly but it is not work related.
So unless there is a tangible business benefit many shops simply cannot se a reason, or justify the cost of a browser upgrade.
These locations will convert, when they go to Windows 7 perhaps or because the "application" they use internally is upgraded and needs the newer browser version. But at this point there is a justification for doing it.
N.B. I have recently worked in two jobs where IE6 compatibility was a must for this reason, large client bases, behind firewalls with lockdown, and i am not stating the above as a reason/excuse not to do it. The sooner the better.
Provided they have the proper permissions to do install software on their machines, use Chrome Frame. The speed boost, if nothing else, should be incentive alone.
"The customer is always right."
You can advise them otherwise, but if they want IE6 for whatever reason then it's up to them.
The best way is by educating them, make them aware of why you are blocking IE6. Do a comparison, case study, etc to convince them, try and put it in terms they may understand, try to convince them that using IE6 is a bad idea (whatever your reasons).
Its simple to implement a script to prevent IE Browsers from connecting to your site, however doing that may result in users being turned away. If this is a public site take into consideration the market share internet explorer has, unless your site is really incredible it is unlikely you will get a user to install a new browser.
To get around this in the past a simple splash page that informes them of the reasons not to use IE6, Example:
You are currently using internet explorer, while you may continue to browse this site using IE, please be aware that some functionality may not be available due to compliance standards within internet explorer, and due to this we do not support issues that arise when using Internet Explorer. We recommend using Google Chrome (Download here) or Mozilla Firefox (Download here).
If this is within a corprate environment you can always work with the IT department to ensure that alternate browsers are distributed. I recommend Google Chrome, simply beacuse of the ability to create "Application Windows" that eliminate problmem causing elements of the browser GUI (Back buttion etc...)
Having a site that elegantly degrades when the user's browser is IE6 is the best option. IE6 users should still be able to use your web site - if a particular feature requires a modern browser a user will be more likely to switch if they already find your site useful.
Another point: modern javascript libraries like jQuery makes it easier to code sites that are compatible with IE6. There's no need to turn away potential customers because of their web browser choice. If you're a web designer it's your job to make sure they have a good experience.
A lot of this comes down to the reasons you want them to stop using IE6. IE6/7 are a pain in the bum if you let them be. We're now taking a more aggressive approach to browser adoption when it comes to what you can/can't do.
For instance, when you visit our new sites in most browsers you'll get rounded corners, transparency, gradients etc. When you visit in IE6 you get a square, opaque, monotone website. Wherever you have PNGs you'll get a simple GIF (even if it looks pants).
Unfortunately IE6 is tied to many businesses for internal reasons (using apps etc) and you can't force them to upgrade but you can give them a subtle message.
make them understand that ie is not bad, its ie 6 thats bad .. if they wish to use ie they can surely use it but could use ie 7 ir even ie 8... make them see that how ie 7 and 8 provide some great features which are not there in ie 6..
also ie 8 is the only browser that follows strict css 2.1 methodology
plus there are many websites which previously were running in ie 6 (with no problem) are running under a warning message that some context may not be suported by ie 6 for eg. www.yahoo.com, so why to use it?
thanks
We had the same issue in one of our projects. I made a simple conditional check and displayed an additional div with links to download firefox, Chrome and IE-8.
Try facebook.com on IE-6. This was my inspiration for the additional div.
In line with Markus' post, it's simple enough to display a popup when the site loads with a warning. Ideally you won't show this every time they load a page of course, that will get old fast.
You have a good opportunity when working on a spec with your client, to tell them "it will cost $X more if we have to support older browsers including IE6 (don't just say IE6), and it will mean we can't easily add more advanced functionality... supporting older browsers will detract from the overall quality and increase time & cost.
A while ago there was a collective effort in Norway to get users away from IE6. Several of the largest sites in Norway participated, and the user got a kind warning on top of the site that recommended him to upgrade or switch browser for an improved browsing experience - if using IE6.
Check out what Wired said about it!
make a whitepaper
Two things:
Charge extra -- double or treble rates or more -- to support IE6. (even IE7 these days).
Point out that IE6 (and WinXP too) will be losing the last vestiges of support in the near future. If you think they're insecure now, just wait till that happens -- no more security fixes. If you're still developing for IE6 now, then you're clearly not going to be ready for the upgrade in time, so you will be hacked, and hacked badly. If your client is willing to accept that, then that's his problem, but you need to help him understand the gravity of the problem. He needs to be putting his upgrade plans in now, not getting more dev work done for the old systems.

Are server-assisted MVC frameworks peaking?

I've been developing web apps for over a decade now, all the way from CGI to ASP.Net and Struts+Spring+Hibernate. The prevalent architectural style seems to be server-assisted MVC, e.g. Struts, Ruby on Rails, etc. Recent developments lead me to ask if these are on the decline.
Adobe's AIR and Flex
Microsoft's WPF and Silverlight
Google's Chrome and Gears
SOFEA and SOUI
All of this leads me to believe that we're starting to come full-circle after a 15-year distraction kicked-off by the invention of the web. Over this period of time, we've been so fascinated by all the web has to offer that we didn't notice that the usability (and the developer experience) of web apps pretty much sucked in comparison to desktop apps. It seems we're now saying "Screw this! We love the web's benefits but we also want better usability, offline capabilities, and better integration with the desktop!".
All of the above mentioned developments seem to be moving us in this direction of putting the presentation logic back where it used to be: the client. Don't get me wrong, I don't think server-assisted MVC frameworks are going away anytime soon, but I do think they are on the decline and RIAs and RDAs are on the rise.
So, what do you think? Are server-assisted MVC frameworks near their peak?
I agree, to a point - we are becoming are more client-centric, but I think this is because the clients are actually advancing in a standardized way.
We started out with everything on the client - because thats all there was. Then it was client-server, which separated the two, then gradually the client bit was thinned out and pushed back to the server, for one reason:
clients sucked (win95, macos<10, unix X11), and deployment was a nightmare. Deploying a browser was trivial.
Thats changing tho. Air is an easy install, as is .NET 3.5. Air apps are easy to deploy (click here - say yes!) as is a WPF Click-once app. The network is now a defacto part of the environment, not something special that had to be added. A database is something you can embed into a silverlight app (SQL Server Compact Edition), or an iphone (SqLite), not something you have to have a big server for.
and everything has auto-updating, which makes the post-install story a lot better.
I dont think they are on the decline - I think the logic has just been pushed out again, and it'll be pulled back in the future, only to be pushed back out etc.
Silverlight/Air/Flash etc are all very powerful, but HTML + Javascript, which is the basis of the server MVC frameworks, has come forward massively, esp if you ignore the b'stard that is IE6.
Regardless, I'll still be writing the backend for RIA's in a server-assisted MVC framework, even if they are throwing out JSON, not HTML. So while they are no longer the be-all, they are far from dead (or peaking)
Lets clarify something!
MVC is only a design pattern for the seperation of concerns. There is no really relation to server side frameworks.
There is no technical Web 1.0 or Web 2.0 ... JavaScript and Flash were there for years. It's only about social networking, tagging etc.
The server side frameworks are not dead at all. I agree with Nic Wise in case of the bad client architectures/rendering. Can you print a HTML page (every time in the same way)? No, you can't, because every browser(-engine) has it's own representation your HTML description. Only because JavaScript/Flash... are restrictions for a lot of people/companies, the server side processing will stay there for a long time.
Developing "Run anywhere" JavaScript has been a burden for a long time! Nowadays we have Frameworks like JQuery which do this job for you. I've written my own homepage in JavaScript, using EJS (Embedded JavaScript) for the templates/mvc. The old bloated JSP/PHP pages have shown, that differing the business logic from the design is a really good thing.
A bad problem of every web application is to decide, where you save the state of the application! If you choose a bad way, you are not able to scale. Client centric frameworks with service oriented backends allow you to scale very good.
I have been working a little bit with SOFEA/SOUI. If you have an ready framework stack for the most common problems, you'll love it.
Air and Flex are nice, but they bring in a lot of restrictions (Flash/JS...).
Google's Chrome and Gears need you to install Google software at your computer. Who has Gears around here? Gears hasn't established as a wide distributed standard.
If you have experience with Hibernate/Spring and Struts, you sould try Grails! It is nice to develop GWT/FLEX&AIR/SOFEA&SOUI backends and also for the good old server side HTML rendering.
I like SOFEA/SOUI because it isn't such invasive, it offers an investment protection (SOA services) and high rate of reusability. It's also a nice way to move the load from your server to the clients.

Resources