asp.net website to mobile/tablet - asp.net

I have an asp.net website, it contains database calls etc
Whats the best way of taking an existing asp.net website and making it look good in mobile and tablet devices?
I have done some research but there seems to be so many options eg lessframework.com, jquerymobile etc
I havent used mvc before but a few people say to use mvc + jquerymobile
any help would be muchly appreciated

There is no magic bullet that will instantly convert your website to mobile. In fact without knowing the specifics of your website it would be hard to recommend a good fit for your situation since the tools you mention like MVC, JQMobile, etc. would be used in one case or another. With the question as you have posed it you will get personal opinion and there are millions of us with opinions... here's mine:
I would recommend not building a mobile specific website like mobile.website.com but rather look into responsive design where your website and the underlying data structs remain the same but your view changes depending on screen real-estate. Bootstrap or HTML5 Boilerplate or any number of design frameworks will help you get started. You just need to figure out a design that fits your websites functionality.
I use MVC + HTML5 Boilerplate (I love Razor) for most of my new projects but sometimes even it has too much overhead so I just start from scratch (multiple PSD's, convert to HTML in Dreamweaver, apply logic with MVC & client side scripting) but that is something you will have to decide on a project by project basis.

Related

asp.net website design trouble

Hi I am developing a website with multiple pages. I am a beginner, coding is still a challenge for me, but my main hardship is designing my website. Visual studio is very not intuitive when it comes to designing websites, and sometimes you feel (when you try to design) like you work while tied in a straightjacket. I am used to dragging stuff around when designing, but this doesn't work with websites. There are a lot of website templates, but is there any which work with asp.net? And how do you integrate them while working in visual studio? Any help?
You don't need any special templates to work with ASP.Net. Integrating a template works the exact same way as it would if you are designing a site from scratch.
Find out your major pieces that are in every page (or groups of pages) and create your master pages that will provide consistent layout for those pages.
Forget about dragging and dropping and pixel design locations of a regular desktop app, it's not going to work that way.
Start with a framework such as Bootstrap, or a template based on Bootstrap. It's extremely well documented, works cross-platform, and there are plenty of tutorials out there on using it.
Visual Studio works pretty much like any other web design tool does. You're just running into exactly how things have been done for well over a decade now. Tools get better, but the web is an entirely different experience that requires entirely different ways of doing things.
You can easily templates or frameworks into your site. You can add styling to form fields, buttons, etc. easily through the CSS of the template.
Take a look at Bootstrap to get an idea of how you can style elements and understand the layout tricks that can be accomplished with responsive design.

Mobile web app with out any javascript or JQuery?

I am wondering if there is a framework to develop mobile web applications which does not use javascript or jquery. Our client do not want to use any javascript or jquery in the projects. But when i look around for mobile web solutions, i see lots of jquery.
A "mobile" website does not require any special frameworks. You just have to design the site (HTML+CSS) so that it looks great on the smaller screens. Other than that it is the same old HTML forms as was 10 years ago (with the exception that you can use the new fancy HTML5 input types like calendar out of the box).
But you should dig deeper for the reasoning of "no JavaScript" since without it you will have to resort to whole page refreshes even for very small things (like 'hide field X when you choose USA in the address') and that will very negatively impact performance, especially on mobile devices where the network is slower.
If you use mobile MVC views, why use a framework? Why not create your own minimalist design that doesn't incorporate a lot of those features, but has the basic core HTML to define your user interface, and just allow the application to postback to the server? That would work well, and be efficient in mobile.

How are user interfaces for websites designed?

I am more of a server side programmer so bear with me on this. How exactly are user interfaces for websites designed? I mean which tools are usually used? Lets say for example, stackoverflow.com which has lot of dynamic content. How are the various areas designed? I am pretty sure its not in Visual studio. Probably the server side code is in asp.net but what about the actual UI? (layout, images, tables, buttons etc)
What is the usual workflow for an activity like this? Say, I have a design on paper. Where do I go from there? How do you wire in the code after the interface design is complete?
How do you handle the fact that in a page, some of the stuff is static and some areas are dynamic? (like the ask question page I am on now)
As you said, It boils down to the requirement of the webpage.
For a professional (fairly big) website, many teams are involved for example, creative team to do the paper work and design of UI elements and controls, graphics team to actually design images, UI Developers for placing the contents appropriately and CSS, architects to decide on performance for various items (and taking a call on static/dynamic nature of controls)
Generally designers use some external tools for designing HTML pages to provide templates and same can be used later in visual studio to make actual pages. There are many such tools available in the market such as Dreamweaver There are many freeware also available in the market for designing client and CSS rich websites. You can search on Google for these.
If your website requirement is not very client rich, you can still design using visual studio or use new Microsoft product Webmatrix which gives you user friendly tools to make a website look fabulous.
The paper design is the first correct step.
How to continue:
You can get the 960 grid system from http://960.gs/ and start from this one. Its a nice trick that have ready to use css templates that you can build on them your design.
The image effects:
The shadow and borders and other thinks that you ask is usually make on Photoshop, but now the new browsers support many of them using css. For example: http://css-tricks.com/snippets/css/css-box-shadow/
Software that can help on design:
- MS Expression
- DreamWeaver

Web Application Designer Position - What should we be looking for?

I work for a small data management/warehousing company that also focuses heavily on web applications. We are looking to "beautify" our existing web apps into something along the lines of mint.com or sifterapp.com or any of the 37signals sites for example. We are a .Net shop so whatever framework used on the front end would need to play nice with a .net back end and also use asp.net.
My question is what skills should we be looking for and what is the proper title for a person that knows how to create very nice looking web applications like the ones I've mentioned? I think having some experience with photoshop is always necessary, but it seems like a lot of the design patterns can be done using css and/or other front end technologies, or am I off base here? Basically, what skills should we be looking for in a candidate if we are looking for them to have skills in creating beautiful web apps that are both very nice looking and also very usable and what is that position called? Web developer? Designer? UI Engineer? Web Experience Designer?
I am also aware of some UI oriented frameworks like YUI, is this something that we should be looking for in a candidate, experience with this? Is a likely candidate going to be someone with a graphic design/artist degree or will it be someone more programming oriented? Is this actually a task for 2 separate people, one doing the graphics and another doing the user experience/css layout? It just seems very confusing to figure out what exactly we should be looking for so the interviews have been rather hit and miss so far.
Thanks!
you need a Graphic Artist, a usability expert and a web developer.
it is rare/unlikely that you will find one person who excels at all three
the good news is that you'll only need the graphic artist and usability people short-term
I would look for a Javascript developer with experience in integrating with ASP.NET. You need to explicitly require experience with CSS layouts, Javascript, frameworks such as jQuery, Prototype, etc. I know a lot of people that are ASP.NET developers and think they are good web developers just because they can drop a few controls on a page and have no understanding of what is happening on the client-side. Also, make sure that they provide you a portfolio.
There are almost always 3 parts of a website:
1.) Design: The designer(s) is(are) planning the layout of the website, with the following in mind:
- maximalization of usability
- nice looking
- using only needed components (no elements to "fill the void")
2.) Backend: The backend guy(s) is(are) working on the functionality of the server
3.) Frontend: The frontend guy(s) is(are) working on the frontend
The backend and frontend guy might be one person, but programmers are code writers (with no artistic inclination), designers are artists. If you put a designer to write code (for example CSS), he might not solve the problems well enough, the same is the situation if you put a programmer to make a design. In my opinion you should hire a designer (some designers work for a very low salary) and a programmer.
In my opinion nobody can honestly say that he/she is a good backend and frontend developer and a good designer in the same time. For example I'm a good backend guy, a decent frontend guy, but I'm not a designer.

Do I need AJAX and ASP.NET for what I'm doing?

Easy question. I used to develop websites back in the days of "classic" ASP, and when I'm asked to do a quick and dirty website for family or friends now, I still resort to direct HTML/ASP and some basic CSS and Javascript - I can get the sites up pretty quickly this way. However, I've had a few requests to design and develop some sites for pay, and thought I should catch up on my web skills. I have been using .NET 3.5, XAML/WPF, etc. for Windows apps, so I'm up on .NET, I'm just behind on the web end.
To the question: If I want to design/code a site that looks identical on all (at least somewhat recent) browsers and platforms, should I be using ASP.NET and AJAX? There might be a little database activity on the site, but not much, so I don't need an enterprise level, multi-tier extendable architecture... just something that looks good and works on multiple platforms without having to code all variations for each browser. After looking at all the ASP.NET books at the bookstore, it seems they all focus mostly on data and postback stuff. Is it still a legit option to use some basic, boring html and javascript with some Flash embedded where needed?
Let me know if I need to clarify the question. Thanks for your advice in advance!
Your question is more loaded than you think, but let me try to address a few points that I think are relevant.
First, how a site looks is almost completely dependent on the HTML/CSS you use and how you code the front end of the site and only slightly dependent on the server technology. So if you want your site to function across browsers and platforms, learn to code following web standards, with semantic markup. (Search on those terms for more info).
Also, ASP.NET comes in two flavors now: ASP.NET MVC and normal ASP.NET. I highly recommend, if you are going to get into ASP.NET, that you follow the MVC platform. It closely follows similar technologies (like Ruby on Rails) and will make the transition to other MVC platforms easier on you. Also, the MVC platform doesn't try to output as much pre-made HTML as straight ASP.NET will when you use their "drag and drop" controls.
Secondly, it really depends on the sites you are building, but straight JS (or JS + jQuery), CSS, and HTML -- and please don't use Flash unless you are embedding a video -- will actually work for a number of basic sites. If you need some things to happen on the server, PHP makes for a great platform. If you are working with advanced database access, and program flow, and since you are already familiar with .NET, then stick with it... MS has some great tools and resources to help you out.
Finally, a lot of developers use a favorite CMS or blogging platform as the backend of simple sites that still need the ability to manage the content easily. Expression Engine (CMS) and WordPress (Blog/Lite-CMS) are often used (both PHP based) but there are tons out there.
Good luck stepping up your game!
I would recommend learning jQuery. This will give you a browser independent abstraction for your JavaScript.
ASP.NET controls will render it's controls in a browser independent way, but that doesn't mean your site will automagically be browser independent. You still need to know how elements are rendered differently in different browsers.
I'd also recommend using a CSS Reset sheet as a starting point for your CSS.
All in all, if you've been developing old school ASP, you'll probably really love ASP.NET as it will save you a lot of time and looping. You may want to jump right in to ASP.NET MVC too.
To the root of your question, I'd learn ASP.NET if you're doing anything more than a simple brochure site. If you have .NET experience, and classic web development experience, then learning ASP.NET is not going to be a big hurdle and will be well worth the effort.
I agree with Aaron Daniels' answer about learning jQuery. jQuery helps a lot with cross-browser compatibility in JavaScript and some CSS-based effects.
However, you should also look into ensuring your site uses well-formed, valid HTML, and doesn't use too many CSS 2+ features. This should ensure that your site is standards compliant, which will mean it will play well with Firefox, Safari, Opera, and even later versions of IE to an extent. You will still need to do manual tweaking for IE - it's been too broken for too long for MS to be able to fix it properly in one go - so look into conditional comments for applying a separate stylesheet for IE users.
AJAX is a handy technology for "desktopifying" your web app. It provides a mechanism for asynchronous callbacks to the web server, so you can pass data to and fro without reloading the page in the browser window. This is how the voting buttons work on StackOverflow, for example.
Lastly, ASP.NET doesn't really have much effect on the end user's experience in terms of the look and feel of the site. It is a server technology that provides for writing complex applications to be delivered over the web to a browser. Having said that, MS have put in some extra goodies to make working with AJAX a little easier.
Hope that helps!

Resources